最后如何在 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-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"
]
}
它有效,但我仍在寻找更好的解决方案
经过两天的挖掘,我只有一个问题。如何使用 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-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"
]
}
它有效,但我仍在寻找更好的解决方案