Invariant Violation: Query(...): Nothing was returned from render. This usually means a return statement is missing

Question

I have a component name is Graph.js code given below:

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

And another file name is Launcher.js code given below:

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 setup in my localhost and it worked well in http://localhost:4000/graphql.

When I call URI from react-native app its generated errors.

Error1: Network error: Network request failed

Error2: Invariant Violation: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I also tried to change URI http://localhost and given to http://127.0.0.1

Thanks in Advance

Answer 1

The Query component must be outside of , it would be:

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

Answer 2

Duverney's answer was possibly helpful to others, but I had this issue as well on a React web app, and the cure was to specifically return null if there is no data. If you return an empty string, it will fail. Wrapping the return value in JSX also solves the issue. Hopefully that saves someone else a few minutes.