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;