Javascript React-Native：为什么Apollo的GraphQL查询返回未定义？

我目前正在尝试进行GraphQL查询，并使用Apollo在我的React原生应用程序上显示结果

以下是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>
    )}
}'

从“/src/Screens”导入{LoginScreen}
从“apollo客户端”导入apollo客户端；
从'react apollo'导入{ApolloProvider}；
从“阿波罗链接http”导入{HttpLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
const myLink=新的HttpLink({
uri:'http://localhost:5000/graphql',
});
const客户端=新客户端({
链接：myLink，
缓存：新的InMemoryCache（）
});
导出默认类App扩展React.Component{
render（）{
返回(

为了证明我使用的是正确的链接端点：

运行此命令时，在我的调试器中，我看到

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

我已经阅读了多次Apollo文档，几天来我一直在努力让它工作。非常感谢您的帮助。谢谢您抽出时间。
问题是，
localhost
对您的计算机来说只意味着一些东西，但对您的react本机应用程序来说没有任何意义，因为服务器没有运行在它上面。请尝试ch将
localhost
更改为您计算机的IP地址。这应该可以连接您

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


更新：11/21
下面是关于您在评论中留下的其他问题

如果你有更好的主意，请毫不犹豫地告诉我，我会试试的
为什么我不能只做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);

//LoginScreen.js
从“React”导入React；
从'react apollo'导入{gql，graphql}；
从'rebass'导入{按钮，输入}；
从“../config”导入{AUTH_TOKEN_KEY}；
类登录扩展了React.Component{
状态={
表格：{
电子邮件：“”，
密码：“”
},
提交：错误
};
handleSubmit=evt=>{
evt.preventDefault（）；
这是我的国家({
提交：正确
});
const{email，password}=this.state.form；
这是道具
.signinUser（{变量：{电子邮件，密码}}）
。然后（res=>{
setItem（AUTH_TOKEN_KEY，res.data.signinUser.TOKEN）；
window.location='/'；
})
.catch（err=>console.error（err））；
};
handleChange=evt=>{
const{name，value}=evt.target；
这是我的国家({
表格：{
…这个.state.form，
[名称]：值
}
});
};
render（）{
返回(
登录
ref.focus（）}
onChange={this.handleChange}
/>
登录
);
}
}
常数=gql`
变异（$email:String！，$password:String！）{
签名用户（电子邮件：{email:$email，密码：$password}）{
代币
}
}
`;
导出默认图形QL（signinUser，{name:'signinUser'}）（登录）；

2.控制台日志（道具数据）
您应该能够记录此内容。不确定您看到了什么，但我假设从您的描述来看类似于
[Object]
。如果是这样，请尝试此
console.log（'props.data%j'，props.data）
，如果可能，它将
props.data
转换为json。您还可以尝试
console.log（{props}）
查看整个道具树。如果两个道具都没有按您想要的方式工作，那么您可能会遇到其他问题

如果您有更多问题，您可能应该打开新的堆栈溢出问题。这些问题实际上是一对一的问题，一个问题，一个答案。
我认为我们离目标更近了一步，但我仍然会遇到一个错误，即“数据”是未定义的。这可能仍然是网络问题吗？酷，我想你只需要访问道具上的数据，所以
props.data
等等，别担心…我看到你正在从道具上解构数据。嗯，我不确定。试着在react tools中检查你的道具，看看你是否能找到它。我看不到任何明显的，任何方法可以让它变得更简单是工作，我会做。如果你有更好的想法，请不要犹豫告诉我，我会尝试。现在几乎没有编写任何前端代码，因此很容易替换。我还有以下代码，是我尝试将数据分解为对象时编写的。
// 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);