Relay: graphql: 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`.

[ketankulkarni]

Environment.js

/* eslint-disable */

const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime');

const source = new RecordSource();
const store = new Store(source);
const network = Network.create((operation,variables)=>{
  return fetch('http://192.168.31.152:3000/graphiql', {
    method: 'POST',
    headers: {
      // Add authentication and other headers here
      'Accept':'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables,
    }),
  }).then(response => {
    return response.json();
  });
}); // see note below
const handlerProvider = null;

const environment = new Environment({
  handlerProvider, // Can omit.
  network,
  store,
});

export default environment;

item.js

import React,{Component} from 'react';
import {createFragmentContainer,graphql} from 'react-relay'

class Item extends Component{
  render(){
    return(
      <div>
      <div>{this.props.item.id} {this.props.item.name}</div>
    </div>
    )
  }
}


export default createFragmentContainer(Item, graphql`
  fragment Item_item on Item {
    id
    name
  }
`)

itemlist.js

/* eslint-disable */

import React,{Component} from 'react';
import Item from './item.js';
import {createFragmentContainer,graphql} from 'react-relay'

class ItemList extends Component{
  render(){
    const datalist = [
        {
          id:'1',
          name:'item-1'
        },
        {
          id:'2',
          name:'item-2'
        }
    ]

    return(
      <div>
        <h3>Item List</h3>
      {
        this.props.viewer.items.edges.map(({node})=>
          <Item key={node.id} data={node}/>
        )
      }
    </div>
    )
  }
}

export default createFragmentContainer(ItemList,graphql`
  fragment ItemList_viewer on Viewer{
    items{last:5, @connection(key:"ItemPage_allItems",filters:[])}
    edges{
      node{
        ...Item_item
      }
    }
  }
`)

itemlistpage.js

/* eslint-disable */

import React,{Component} from 'react';
import {QueryRenderer,graphql} from 'react-relay';
import environment from '../Environment.js';
import ItemList from './itemlist';

const ItemListPageQuery = graphql`
  query items{
    viewer{
      ...ItemList_viewer
    }
  }
`
class ItemListPage extends Component{
  render(){
    return(
      <QueryRenderer
        environment={environment}
        query={ItemListPageQuery}
        render={({error,props})=>{
          if (error) {
            return <div>{error.message}</div>
          }
          else if (props) {
            return <ItemList viewer={props.viewer}/>
          }
          return <div>Loading</div>
        }}
      />
    )
  }
}

export default ItemListPage

Actual Error -

[sibelius]

this is a problem with your babel setup

[Bastiani]

Use option 3 https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892
In my case I had a problem with this "babel-plugin-transform-export-extensions" was not installed automatically with dependencies, then i installed manually.

[English3000]

I have the same error. What's the solution if one isn't using CRA?

P.S. If I make a .babelrc

{
  "presets": ["react-app"],
  "plugins": ["react-native-web", "relay"]
}

the error becomes

Cannot find module 'js/__generated__/appQuery.graphql' from 'js/app.js'

The file is /js/__generated__/appQuery.graphql.js

[English3000]

The solution was in brunch-config.js, under conventions: { to set ignored: to () => false because its default is to ignore anything starting with _ (i.e. __generated__)

[sibelius]

Follow docs about Babel plugin relay setup, and you should be able to fix this

[HawiCaesar]

@sibelius any specific documentation ? The Babel plugin relay only has the package no README.md. Do you mean looking through the docs of Babel itself ?

[sibelius]

https://facebook.github.io/relay/docs/en/installation-and-setup.html#set-up-babel-plugin-relay

[geyang]

For Create React App users, you need babel-plugin-replay/macro because CRA does not allow you use custom babelrc.

Here is the detailed instruction: https://facebook.github.io/create-react-app/docs/adding-relay

import graphql from 'babel-plugin-relay/macro';

graphql`
    query AppQuery {...}
`

[sroze]

And to add to that, you want types, this is here:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35707#issuecomment-617823807