4

I´m trying to setup GraphQL on my Realy Modern application, but babel is not working with my grapqh queries.I´m getting the following runtime error:

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`

I´m using the newer babel-plugin-relay with the following configuration:

{
  "name": "client",
  "version": "3.0.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "dependencies": {
    "babel-plugin-relay": "^1.1.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-fa": "^4.2.0",
    "react-relay": "^1.1.0",
    "react-router-relay": "^0.14.0"
  },
  "devDependencies": {
    "faker": "^4.1.0",
    "react-scripts": "1.0.10",
    "relay-compiler": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "relay": "relay-compiler --src ./src --schema ./src/data/schema.graphql"
  },
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "relay"
    ]
  }
}

And my App.js:

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

import environment from '../../environment'

import './App.css';

import Admin from '../Admin/Admin.js';

const AppQuery = graphql`
    query Companies {
        data {
            ...Admin_Company
        }
    }
}
`

class App extends Component {
  render() {

    return (

        <QueryRenderer
            environment={environment}
            query={AppQuery}
            render={
                ({ error, props }) => {
                    if (error) { 
                        return <div>{error.message}</div>
                    } else if (props) {
                        return <Admin data={props.data} />
                    }

                    return <div>Loading...</div>
                }
            }
        />
    );
  }
};

export default App;
Mendes
  • 17,489
  • 35
  • 150
  • 263

0 Answers0