最后如何将新的 babel-plugin-relay 与 Relay Classic 一起使用？

Posted 2023-03-08

【中文标题】最后如何将新的 babel-plugin-relay 与 Relay Classic 一起使用？

【英文标题】：How to use new babel-plugin-relay with Relay Classic finally?

【发布时间】：2017-12-08 19:04:21

【问题描述】：

经过两天的挖掘，我只有一个问题。如何使用 babel-plugin-relay 代替已弃用的 babel-relay-plugin？

到目前为止我做了什么：

我有这个带有 json 的 .babelrc：

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

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

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`` 查询时遇到了错误：

./app.jsx 中的错误模块构建失败：错误： /Users/Vadim/Dropbox/WebStormProjects/mulibwanji/client/src/app.jsx： babel-plugin-relay：缺少架构选项。检查您的 .babelrc 文件或 无论您在哪里配置 Babel 插件以确保“中继”插件 有一个“模式”选项。

我做错了什么？我不知道在这个 babel-plugin-relay 中使用 Relay Classic 的线索......迁移到 babel-plugin-relay 后，在文档中确定要做什么 babelRelayPlugin 文件并不明显。

【参考方案1】：

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

我添加了babel-plugin-relay-loader 和babel-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"
  ]

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