react-apollo Network error: Server response was missing for query 'Hello'

Question

I am trying to set up react-apollo using this code:

import React from 'react';
import {render} from 'react-dom';

import gql from 'graphql-tag';
import { ApolloProvider, graphql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';


const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:5000/graphql' }),
  cache: new InMemoryCache()
});



class App extends React.Component {
  render () {
    return <p> Hello React project</p>;  }
}
const MY_QUERY = gql`query Hello { hello }`;

const AppWithData = graphql(MY_QUERY)(App)
render(
  <ApolloProvider client={client}>
    <AppWithData />
  </ApolloProvider>,
  document.getElementById('app')
);

However, I get this error:

Looking at the Network tab in chrome dev tools, I can see that the request is coming through:

I am wondering if maybe I am missing some configuration setting to get the responses in the right format? Or maybe I need to return the data from my graphql endpoint in a different format? Any advice is appreciated, I am just learning graphql and apollo so it could be something super obvious. thanks!

Answer 1

The issue was that I needed to wrap the response in a 'data' key, so the response I needed was:

{
    "data": {
         "hello": "hello"
    }   
}

As I said, I am brand new to graphql/apollo