Graphql查询语句`graphql`没有被babel-plugin-relay解释

Question

我正在尝试在我的Realy Modern应用程序上设置GraphQL，但是babel没有使用我的grapqh个查询。我收到以下运行时错误：

graphql：运行时意外调用。未设置Babel转换，或者无法识别此呼叫站点。确保将其逐字逐句用作“graphql”

我正在使用具有以下配置的较新babel-plugin-relay：

{
  "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"
    ]
  }
}

我的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;