Нарушение инварианта: Запрос (...): Ничего не возвращено из рендера.Обычно это означает, что отсутствует инструкция возврата

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>
    );
  }
}

I setup graphql настройка на моем локальном хосте, и она хорошо работала в http://localhost:4000/graphql.

Когда я вызываю URI из собственного приложения реакции, оно генерирует ошибки.

Ошибка1 : Ошибка сети: сбой сетевого запроса

Ошибка2 : Инвариантное нарушение: Запрос (...): ничего не было возвращено при рендеринге,Обычно это означает, что отсутствует инструкция возврата.Или, чтобы ничего не отобразить, верните null.

Я также попытался изменить URI http://localhost и присвоил http://127.0.0.1

Заранее спасибо

Answer 1

Ответ Дюверни, возможно, был полезен для других, но у меня была эта проблема и в веб-приложении React, и лекарство должно было специально возвращать null, если нет данных. Если вы вернете пустую строку, она потерпит неудачу. Упаковка возвращаемого значения в JSX также решает проблему. Надеюсь, это сэкономит кому-то еще несколько минут.

Answer 2

Компонент Query должен быть вне, это будет:

...
  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>
    );
  }
  ...