最后如何在 Relay Classic 中使用新的 babel-plugin-relay?

How to use new babel-plugin-relay with Relay Classic finally?

经过两天的挖掘,我只有一个问题。如何使用 babel-plugin-relay 而不是弃用的 babel-relay-plugin?

到目前为止我做了什么:

我有下面 json 的 .babelrc:

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    ["relay", {"compat": true, "schema": "./graphql/schema.graphql"}]
  ]
}

updateSchema.js 文件来自 relay-starter-kit.

webpack.config.js 以下行:

...
module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0'],
          plugins: [path.resolve(__dirname, 'graphql', 'babelRelayPlugin')],
        },
      },
...

projectRoot/graphql/babelRelayPlugin.js 代码如下:

const getbabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');

module.exports = getbabelRelayPlugin(schema.data);

当我尝试摆脱 babel-relay-plugin 并将其更改为 babel-plugin-react 时 documenation 鼓励 - 我在转译时遇到错误 Relay.QL` ` 这样的查询:

ERROR in ./app.jsx Module build failed: Error: /Users/Vadim/Dropbox/WebStormProjects/mulibwanji/client/src/app.jsx: babel-plugin-relay: Missing schema option. Check your .babelrc file or wherever you configure your Babel plugins to ensure the "relay" plugin has a "schema" option.

我做错了什么?我无法通过这个 babel-plugin-relay 获得使用 Relay Classic 的线索...在迁移到 babel-plugin-relay 之后,文档中的 babelRelayPlugin 文件做什么并不明显。

目前我只找到了一种解决方法,但不确定它是否是一种好的做法。我受到 this commit 的启发,最终没有被接受。

我添加了 babel-plugin-relay-loaderbabel-plugin-relay npm 包并删除了 babelRelayPlugin.js 文件也添加到我下面的 package.json 行中:

...
  "metadata": {
    "graphql": {
      "schema": "./graphql/schema.json"
    }
  }
...

webpack.config.js 中的 js 加载程序部分如下所示:

...
{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0'],
          plugins: ['babel-relay-plugin-loader'],
        },
      },
...

我留下的.babelrc文件如下:

{
  "plugins": [
    ["babel-relay-plugin-loader"]
  ],
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

它有效,但我仍在寻找更好的解决方案