Cant connect React to Graphcool backend

Question

Im trying to get a basic React + Graphcool project setup.

Ive initialised the Graphcool backend so I can see the playground at: https://api.graph.cool/simple/v1/MY-KEY

I can run this query in the playground and see results:

query {
    allGroups {
        id
        description
    }
}

However I cant connect this to the React front-end. This is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';

// GraphQL
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

// Components
import App from './components/App/App';

const httpLink = new HttpLink({
    uri: 'https://api.graph.cool/simple/v1/MY-KEY',
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById('App'),
);

In App.js:

import React from 'react';
import gql from 'graphql-tag';
import graphql from 'react-apollo';

const myQuery = gql`
    query {
        allGroups {
            id
            description
        }
    }
`;

const App = () => {
    return (
        <div>
            <h1>Application</h1>
            <h2>Groups:</h2>
        </div>
    );
};

// export default App;
export default graphql(myQuery)(App);

But I get an error:

Uncaught TypeError: (0 , _reactApollo2.default) is not a function

I don't know if this relevant or not but my IDE gives me the following error on the 'allGroups' line in App.js:

cannot query field "allGroups" on type "Query"

Answer 1

you'd better using a graphcool play ground to test you query and mutation . then connect to React.Otherwise, there are many detail to debug.
here is my procedure

1. graphcool deploy is ok?

2. go to playground schema is ok?

3. query and mutation is ok?

4. configure apollo client and connect to React component. is ok?

5. In the component console.log(this.props.data) is ok ?

   This is my flow.

And the most thing when you add some schema and resolvser, you must be add then to graphcool.yaml files. otherwise, graphcool can't find you schema and query method.