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

Question

After two days digging I just have one question. How to use babel-plugin-relay instead of deprecated babel-relay-plugin?

What I've done so far:

I have this .babelrc with json below:

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

updateSchema.js file from relay-starter-kit.

webpack.config.js with lines below:

...
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 with code below:

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

module.exports = getbabelRelayPlugin(schema.data);

When I've tried to get rid of babel-relay-plugin and change it to the babel-plugin-react as documenation encourages - I've had error with transpiling Relay.QL`` queries like that:

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.

What I've done wrong? I can't get clue of using Relay Classic with this babel-plugin-relay... It's not obvious what to do babelRelayPlugin file at documentation for sure after migrating to babel-plugin-relay.

Answer 1

At this moment i've found only one workaround and not sure that it is a good practice. I was inspired with this commit, which wasn't accepted eventually.

I've add babel-plugin-relay-loader with babel-plugin-relay npm packages and deleted babelRelayPlugin.js file also added to my package.json lines below:

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

js loaders section in webpack.config.js looks like below:

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

And .babelrc file I left as below:

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

It works, but i'm still searching of better solution