React Native：为啥使用 Apollo 的 GraphQL 查询返回未定义？

Posted 2023-03-08

【中文标题】React Native：为啥使用 Apollo 的 GraphQL 查询返回未定义？

【英文标题】：React Native: Why Does GraphQL Query With Apollo Return Undefined?React Native：为什么使用 Apollo 的 GraphQL 查询返回未定义？

【发布时间】：2018-05-04 10:42:20

【问题描述】：

我目前正在尝试使用 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 文档，并且几天来一直试图让某些东西工作。任何帮助深表感谢。感谢您的宝贵时间。

【参考方案1】：

问题是localhost 仅对您的计算机有意义，但对您的本机应用程序没有任何意义，因为服务器未在其上运行。尝试将localhost 更改为您计算机的IP 地址。那应该把你联系起来。

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

---

更新：11/21

下面是处理你在cmets中留下的额外问题。

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

1。我是怎么做到的

这是我的一个演示/玩具应用程序的工作登录页面的副本/粘贴。我知道它有效。它基本上与您尝试添加的一些不错的功能相同（例如，托管表单状态、将变量传递给 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) 来查看整个道具树。如果两者都没有按您想要的方式工作，那么您可能还有其他事情要做。

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

【讨论】：

我认为我们更近了一步，但我仍然收到“数据”未定义的错误。这仍然是网络问题吗？

酷，我想你只需要访问道具上的数据，所以props.data

等等，没关系...我看到你正在从道具中解构数据。嗯，我不确定。尝试在 react-tools 中检查你的道具，看看你是否能弄清楚。我没有看到任何明显的东西

老实说，任何使这项工作的方法，我都会做。如果您有更好的想法，请随时告诉我，我会尝试的。目前几乎没有编写任何前端代码，因此很容易替换。

当我试图将数据解构为对象时，我也有以下代码。 pastebin.com/6skMwP39