score:0

As discussed in https://github.com/facebookincubator/create-react-app/issues/462 between @gaearon and @josephsavona from Relay team, they would like to push back Relay support in create-react-app to after the release of Relay 2.

Since the release of Relay 2 is already in the horizon, in the meantime, I would suggest to use a simple hack to add support to create-react-app and wait for their official release.

So for now, you can:

  1. Add babel-plugin-react-relay (trust me it is easier to setup than babel-relay-plugin) to your package.json devDependencies, setup your graphql endpoint in package.json like

    "graphql": { "request": { "url": "http://localhost:8000/graphql" } }, then run yarn

  2. Navigate to ./node_modules/react-scripts/config/webpack.config.dev.js, use ⌘+F to locate presets: [require.resolve('babel-preset-react-app')],

    Add the following line below presets:

    plugins: [require.resolve('babel-plugin-react-relay')],

    Also, turn cacheDirectory right after the above line off using:

    cacheDirectory: false

    This is to ensure that GraphQL schema is correctly refetched by babel-plugin-react-relay each time. And this is no harm since we will be using official create-react-app with Relay support soon :)

  3. Do step 2 to ./node_modules/react-scripts/config/webpack.config.prod.js, only in production configuration there is no cacheDirectory option
  4. Run yarn start and you are good to go

Hope this can get you started with Relay without yarn run eject your code. And do remember to migrate to official Relay 2 supported create-react-app once it is released (I suspect you won't have to do anything though)

score:2

create-react-app v2 (react-scrips >= 2.0.0) works out the box with Relay Modern!

You just need babel-plugin-relay >= 1.7.0, relay-compiler and graphql as dev dependencies to compile queries

Then you need a schema.graphql files declaring your GraphQL types and of course react-relay

Before running start you just have to compile any queries you might have added or changed inside of graphql tags. Simply add the script to your package.json which you can also run in watch mode:

"relay": "relay-compiler --src ./src --schema ./schema.graphql"

Fully working example here: https://github.com/kassens/relay-cra-example

score:3

If you don't want to maintain your own fork of react-scripts, you can simply do the following:

Step 1: Install babel-plugin-relay

$ yarn add babel-plugin-relay

Step 2: Create ./setup.js file in the root of your project

const fs = require('fs');
const path = require('path');

let file = path.resolve('./node_modules/babel-preset-react-app/index.js');
let text = fs.readFileSync(file, 'utf8');

if (!text.includes('babel-plugin-relay')) {
  if (text.includes('const plugins = [')) {
    text = text.replace(
      'const plugins = [',
      "const plugins = [\n  require.resolve('babel-plugin-relay'),"
    );
    fs.writeFileSync(file, text, 'utf8');
  } else {
    throw new Error(`Failed to inject babel-plugin-relay in ${file}.`);
  }
}

Step 3: Update scripts in package.json to run node setup first

"scripts": {
  "build": "node setup && react-scripts build",
  "test": "node setup && react-scripts test --env=jsdom",
  "start": "node setup && react-scripts start"
}

For a complete Relay Modern + Create React App example (including routing) visit:

kriasoft/react-static-boilerplate on GitHub

score:6

Create React App v2

CRA 2 supports Babel macros which makes things a whole lot easier. Essentially you have to add babel-plugin-relay and use it with import graphql from 'babel-plugin-relay/macro'. Check out the docs for more information.

Create React App v1

One option is to create your own fork of react-scripts that adds babel-relay-plugin to .babelrc. Creating a fork of react-scripts is documented as method #3 in this Medium post. You can publish the fork as a scoped package to npm and then use that when creating your React app: create-react-app my-app --scripts-version @scope/react-scripts.

A different option that some might prefer is react-app-rewired: https://github.com/timarney/react-app-rewired - I haven't looked into this myself yet, but it seems like another good way of doing it that could potentially lessen the need to keep a fork of react-scripts maintained.


Related Query

More Query from same tag