React Native：為什么用Apollo返回的GraphQL查詢未定義？

Question

我目前正在嘗試進行GraphQL查詢，並使用Apollo在我的React Native應用程序上顯示結果。

這是App.js中的相關代碼：

import {LoginScreen} from './src/Screens'
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const myLink = new HttpLink({
  uri: 'http://localhost:5000/graphql',
});

const client = new ApolloClient({
  link: myLink,
  cache: new InMemoryCache()
});

export default class App extends React.Component{
  render() {
    return(
      <ApolloProvider client={client}>
        <LoginScreen/>
      </ApolloProvider>
    )}
}'

這是LoginScreen.js中的相關代碼

function ShowUser({data: { loading, otsUserByUserId }}) {
    if (loading) {
      return <Text>Loading</Text>;
    } else {
        console.log("Ots user is " + otsUserByUserId)
        console.log("Data: " + data)
      return (
        <View>
            {otsUserByUserId.map(user =>
                <Text>The name of user is {user.firstName} {user.lastName}.</Text>
            )}
        </View>
      );
    }
  }

export default graphql(gql`
    query otsUser{
        otsUserByUserId(userId:1) {
            firstName
            lastName
        }
    }
`)(ShowUser)

如您所見，我的查詢在GraphiQL中有效：

只是為了表明我對鏈接使用了正確的端點：

運行此程序時，在調試器中，我看到

這表明數據是不確定的，並且是網絡錯誤。 因此，我在前端的設置上一定做錯了。 在某種程度上，我沒有正確使用Apollo。 似乎很明顯，我的App.js錯誤在於我如何定義客戶端，但是我已經有一段時間無法使任何東西正常工作了，這使我發瘋。 我在此找不到任何SO帖子。

我已經多次瀏覽過Apollo文檔，並且一直在嘗試使某些東西現在工作幾天。 任何幫助深表感謝。 感謝您的時間。

Answer 1

問題是localhost僅對您的計算機有意義，而對您的本機應用程序沒有任何意義，因為服務器未在其上運行。 嘗試將localhost更改為計算機的IP地址。 那應該勾住你。

const myLink = new HttpLink({
  uri: 'http://{COMPUTER_IP_ADDRESS_HERE}:5000/graphql',
});

---

更新：11/21

以下是處理您在評論中剩余的其他問題。

1. 如果您有更好的主意，請隨時告訴我，我會嘗試的。
2. 為什么我不能只做console.log（props.data）？

1.我是如何做到的

這是我的一個演示/玩具應用程序中一個有效的登錄頁面的副本/粘貼。 我知道這行得通。 基本上，您可以通過添加一些不錯的功能（例如托管表單狀態，將var傳遞給HOC，本地存儲緩存）來完成與您嘗試的相同的操作。 您應該能夠從中獲得所需的信息，並輕松地使其適應您的用例。

// LoginScreen.js
import React from 'react';
import { gql, graphql } from 'react-apollo';
import { Button, Input } from 'rebass';

import { AUTH_TOKEN_KEY } from '../config';

class Login extends React.Component {
  state = {
    form: {
      email: '',
      password: ''
    },
    submitting: false
  };

  handleSubmit = evt => {
    evt.preventDefault();
    this.setState({
      submitting: true
    });

    const { email, password } = this.state.form;
    this.props
      .signinUser({ variables: { email, password } })
      .then(res => {
        window.localStorage.setItem(AUTH_TOKEN_KEY, res.data.signinUser.token);
        window.location = '/';
      })
      .catch(err => console.error(err));
  };

  handleChange = evt => {
    const { name, value } = evt.target;

    this.setState({
      form: {
        ...this.state.form,
        [name]: value
      }
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h1>Login</h1>
        <Input
          type="text"
          name="email"
          label="Email"
          value={this.state.form.email}
          // baseRef={ref => ref.focus()}
          onChange={this.handleChange}
        />
        <Input
          type="password"
          name="password"
          label="Password"
          value={this.state.form.password}
          onChange={this.handleChange}
        />
        <Button>Login</Button>
      </form>
    );
  }
}

const signinUser = gql`
  mutation($email: String!, $password: String!) {
    signinUser(email: { email: $email, password: $password }) {
      token
    }
  }
`;

export default graphql(signinUser, { name: 'signinUser' })(Login);

2. console.log（props.data）

您應該能夠登錄。 不知道您所看到的是什么，但是我假設您的描述中的內容類似於[Object] 。 如果是這樣，請嘗試使用console.log('props.data %j', props.data) ，如果可能，它將把props.data轉換為json。 您也可以嘗試console.log({props})查看整個道具樹。 如果兩種方法都無法按您希望的方式工作，那么您可能在這里還有其他事情要做。

如果您還有其他問題，則可能應該打開新的堆棧溢出問題。 這些實際上只是一對一的事情，一個問題，一個答案。