Question

我的组件名称是Graph.js代码，如下所示：

import React, { Component } from "react";
import { View, Text } from "react-native";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import Launches from "./Launches.js";
const client = new ApolloClient({
  uri: "http://127.0.0.1:4000/graphql"
});

export default class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <ApolloProvider client={client}>
        <View>
          <Text>Hello Apillo</Text>
        </View>
        <Launches />
      </ApolloProvider>
    );
  }
}

另一个文件名是Launcher.js代码，如下所示：

import React, { Component } from "react";
import { View, Text } from "react-native";
import gql from "graphql-tag";
import { Query } from "react-apollo";

const LAUNCHES_QUERY = gql`
  query LaunchesQuery {
    launches {
      flight_number
      mission_name
    }
  }
`;
export default class Launches extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Query query={LAUNCHES_QUERY}>
          {({ loading, error, data }) => {
            if (loading) return <Text>Loading...</Text>;
            if (error) return console.log(error);
            let length = data.length;
            console.log(data);
            return <Text>Launches</Text>;
          }}
        </Query>
      </View>
    );
  }
}

我在本地主机上设置了graphql，在http://localhost:4000/graphql上运行良好。

当我从react-native应用程序调用URI时，它会生成错误。

错误1 ： 网络错误：网络请求失败

错误2 ： 不变违规：查询（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

我还尝试更改URI http://localhost并赋予http://127.0.0.1

预先感谢

Answer 1

Duverney的回答可能对其他人有帮助，但是我在React Web应用程序上也遇到了这个问题，解决方法是，如果没有数据，则专门返回null。如果返回一个空字符串，它将失败。在JSX中包装返回值也可以解决此问题。希望这可以节省别人几分钟的时间。

Answer 2

查询组件必须位于之外，它是：

...
  render() {
    return (
      <Query query={LAUNCHES_QUERY}>
        {({ loading, error, data }) => {
          if (loading) return <Text>Loading...</Text>;
          if (error) return console.log(error);
          let length = data.length;
          console.log(data);
          return <Text>Launches</Text>;
        }}
      </Query>
    );
  }
  ...

不变违规：Query（...）：渲染未返回任何内容。这通常意味着缺少return语句

2 个答案: