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;