React Native：为什么使用 Apollo Return 未定义的 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 中有效：

并且只是为了表明我为 link 使用了正确的端点：

当运行这个时，在我的调试器中，我看到

这表明数据未定义，这是一个网络错误。所以我一定是在前端的设置上做错了什么。在某种程度上，我没有正确使用 Apollo。很明显，错误出在我定义客户端的 App.js 中，但我已经有一段时间无法正常工作了，这让我抓狂。我找不到关于此的任何 SO 帖子。

我已经多次浏览 Apollo 文档，几天来一直在尝试让一些东西发挥作用。任何帮助深表感谢。谢谢你的时间。

Answer 1

问题是 localhost 仅对您的计算机有意义，但对您的 React 本机应用程序毫无意义，因为服务器不在运行上。尝试将 localhost 更改为您计算机的 IP 地址。那应该让你上钩。

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

更新：11/21

下面针对您在评论中留下的补充问题进行处理。

如果你有更好的想法，请不要犹豫告诉我，我会尝试的。
为什么我不能只做 console.log(props.data)？

1。我是怎么做到的

这是我的 demo/toy 应用程序之一的工作登录页面的 copy/paste。我知道它有效。它基本上做的事情和你尝试的一样，只是添加了一些不错的东西（例如，管理表单状态、将变量传递给 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}) 查看整个道具树。如果两者都无法按您希望的方式工作，那么您可能遇到了其他问题。

如果您有更多问题，您应该打开新的堆栈溢出问题。这些实际上只是一对一的事情，一个问题，一个答案。

React Native：为什么使用 Apollo Return 未定义的 GraphQL 查询？

React Native: Why Does GraphQL Query With Apollo Return Undefined?

javascript

apollo

graphql

react-native

react-apollo

更新：11/21

1。我是怎么做到的

2。 console.log(props.data)