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"

score 1 · Answer 1 · answered Jan 04 '18 at 11:36

1

thats graphql import error, lets try this

In App.js:

 import { graphql, } from 'react-apollo';

answered Jan 04 '18 at 11:36

toufek khoury

2,974
2
8
15

Im still getting errors: Uncaught TypeError: _super.call is not a function. 4.js:sourcemap:12210 The above error occurred in the component. Uncaught TypeError: _super.call is not a function. Uncaught TypeError: Cannot read property 'modules' of undefined – Evanss Jan 04 '18 at 11:39
ok, apollo passes the data to props.data , there is no props in App component .. lets try to add the props and debug : `const App = (props) => { return (

Application

Groups: {props.data}

); };` – toufek khoury Jan 04 '18 at 11:46
Im getting the white screen of death so nothing is rendered. I tried console logging props but notting is logged. – Evanss Jan 04 '18 at 11:49
we have solved those two issues , now we might have 'naming' problem in index.js .. `ReactDOM.render( , document.getElementById('root') // change this to something else than 'App' )` help and do like on a my comment mate – toufek khoury Jan 04 '18 at 11:59
No change... ;-( – Evanss Jan 04 '18 at 12:04
hmm , we need to check who prevent those permissions calls , if this query worked in playground so no reason not working here as the resolver works fine . this is SSR application? – toufek khoury Jan 04 '18 at 12:14
Sorry I don't know what a SSR application is! I didnt explicitly setup any permissions. Where are read permissions? – Evanss Jan 04 '18 at 12:42
If I type in graphcool-framework into my terminal the playground launches in a browser. If I add /permissions to the end of the url then I get this error: Schema could not be fetched. Please check if the endpoint 'https://api.graph.cool/simple/v1/MY-KEY/permissions' is a valid GraphQL Endpoint. – Evanss Jan 04 '18 at 12:47
in graphcool.yml I have this: permissions: - operation: "*" – Evanss Jan 04 '18 at 12:53
good , thats our problem here ,maybe not SSR( SSR-server side rendering you will need little differant 'client' ) – toufek khoury Jan 04 '18 at 14:04
what is `MY-KEY` stands for ? is that valid service id? – toufek khoury Jan 04 '18 at 14:09
Yes Its a valid key - the playground opens up in my browser fine. – Evanss Jan 04 '18 at 15:53

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Is this your address?

here is mine

can you see difference?

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 18 '18 at 13:10

Zhang Yung

46
1

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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

graphcool deploy is ok?
go to playground schema is ok?
query and mutation is ok?
configure apollo client and connect to React component. is ok?
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.

Cant connect React to Graphcool backend

3 Answers3

Application

Groups: {props.data}