javascript - 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;