Error loading graphql with react-relay modern

Question

I am developing an react-native application using Relay for working with graphql. Before earlier versions I have been using Relay classic with RootContainer and renderer following the 'sibelius' react-native-relay-example also combined with these two posts: first and second.

So I have changed the react-relay version from 0.10.0 to 1.0.0 and for starters put a simple query at first screen using relay modern implementation. I did not change babel-relay-plugin. When ever I run the app I getgraphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as 'graphql'

I am also a starter at developing react-native apps and overall using graphql so I have this constant feeling I am missing something not mentioned in the docs which I suppose to already know when working with react.

This is my .babelrc file:

{
  "plugins": ["./data/babelRelayPlugin"],
  "presets": ["react-native"]
}

babelRelayPlugin.js

const getBabelRelayPlugin = require('babel-relay-plugin');
const schemaData = require('./schema.json');
module.exports = getBabelRelayPlugin(schemaData.data);

I am creating a RelayEnvironment which I am importing to the QueryRenderer:

import {
  Environment,
  Network,
  Store,
  RecordSource
} from 'relay-runtime';

const fetchQuery = (operation, variables, cacheConfig, uploadables) => {
  return (
    fetch('https://../graphql', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          query: operation.text,
          variables,
        }),
      }).then( response => {
        return response.json();
      }).catch( err => console.log(err) )
  );
}

const source = new RecordSource();
const store = new Store(source);
const network = Network.create(fetchQuery);
const handlerProvider = null;

export const RelayEnvironment = new Environment({
  handlerProvider,
  network,
  store,
});

This is my QueryRenderer in jsx:

        <QueryRenderer
          environment={ RelayEnvironment }
          query={ graphql`query {
            content(path: "/latest-updates"){
              title
              children{
                entries{
                  key: id
                  title
                  flyTitle
                  teaser
                  mainImageObj{
                    path
                  }
                }
              }
            }
          }` }
          render={ ({error, props}) => {
            if(error){
              console.log(error);
            } else if(props) {
              console.log(props);
              return <Text> Done </Text> ;
            } else {
              console.log('loading...');
            }
          }}
        />

If I run this query in graphiql I do get the expected result.

yachaka · Accepted Answer · 2017-05-31 13:39:21Z

2

babel-relay-plugin is now babel-plugin-relay in Relay Modern, and the usage isn't the same anymore - see here.

You need 3 things now:

Your schema in GraphQL notation, in a separate file (it is the string you pass to buildSchema)
yarn add -D babel-plugin-relay - you do not need to make a custom one anymore
To install and run the relay-compiler in the background

Here is how it works:

You pass your schema to the relay-compiler via command-line and run it on your sources: relay-compiler --src ./src --schema path/schema.graphql
The relay compiler generates definitions for your queries in a folder called __generated__ next to your files
The babel-plugin-relay replaces your queries by a require() call to the corresponding generated GraphQL definition by the relay compiler

Example setup and usage

yarn add -D babel-plugin-relay relay-compiler

Directory structure

schema.graphql
src/
  App.js
.babelrc
package.json

schema.graphql

type Query {
  user: User!
}

type User {
  name: String!
}

src/App.js

// ...

const myQuery = graphql`
  query App_ExampleQuery {
    user {
      name
    }
  }
`;

// ...

.babelrc

{
  "plugins": ["relay"]
}

package.json

...
"scripts": {
  "relay": "relay-compiler --src ./src --schema ./schema.graphql --watch",
},
...

Then, run yarn relay or npm run relay in a separate terminal.
Start your app as usual.

edited May 31, 2017 at 13:39

answered May 31, 2017 at 11:44

yachaka

5,6291 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

parohy Over a year ago

Does it has to be a .graphql file or can I use the schema.js ?

yachaka Over a year ago

@parohy It can also be a JSON file, but it can't be your exported .js file.

yachaka Over a year ago

Have a look at printSchema (graphql.org/graphql-js/utilities/#printschema) to convert your JS schema to a .graphql schema

yachaka Over a year ago

Overall you should be using directly GraphQL notation, it will be easier developping with -as the ecosystem is built around it

parohy Over a year ago

Thank you so much! Its ALIVE!

|

Collectives™ on Stack Overflow

Error loading graphql with react-relay modern

1 Answer 1

Example setup and usage

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example setup and usage

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related