Relay support

[saintsjd]

Here is a first pass at support for relay in create-react-app from @maxwell-oroark and me. This is issue #462 . This pull request works for both local development server and for builds. I have tested following the CONTRIBUTING.md guide (both with npm start and npm run create-react-app my-app).

For instructions on how to get relay going, refer to template/README.md.

There are some todos outstanding:

• test in eject mode
• support graphql-config instead of just an environment variable for REACT_APP_GRAPHQL_URL
• better formatting on error messages

Please review and let me know your thoughts.

[ghost]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

[ghost]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[saintsjd]

Re-merged with master. We now have eject support, nicer errors, and a great README.

Note the environment variable is changed to REACT_APP_ GRAPHQL_URL

[fson]

I just tested this and the experience is really getting there – it's a big improvement over configuring babel-relay-plugin by hand. Nice work so far!

@josephsavona suggested in #462 that the URL would be configured using the graphql field in package.json first introduced by graphcool/graphql-config and support for this could also be added to babel-relay-plugin:

{
  ...
  "graphql": {
    "request": {
      "url": "https://example.com/graphql"
    }
  }
}

I like that idea, but I see a couple of questions that need to be discussed:

• A field in package.json doesn't allow easily using a separate backend for development and production builds (unless it's overridable with an environment variable, but I think we wanted to avoid having multiple ways to configure it).
• Moving the schema fetching to babel-relay-plugin is not trivial, because Babel plugins execute synchronously. For example graphcool/babel-plugin-react-relay has a work-around for this, but it's not pretty and I think the approach taken in this pull request with separate async hooks called by the dev server / build is nicer, but I'm not sure how it could be used outside CRA context. In general it would be nice to move some of the heavy lifting added here to separate packages. Should we make the Relay plugin a separate package inside create-react-app? Can some of it moved upstream to the official Relay packages?

[saintsjd]

Thanks for taking a look! Your comments align with things I have been thinking about.

I thought about graphql-config. In the end, I did not include graphql-config because the environment variable provides easy separation of configuration for development and production. We can support the env variable without including another package like graphql-config. Also helpful is the REACT_APP prefix that exposes the environment variable to the client for configuring relay network layer.

If we want to offer multiple ways of configuring the graphql url, then we should use graphql-config to do this. Let me know if we do. I can look into it.

Should we make the Relay plugin a separate package inside create-react-app?

Interesting idea. This is along the lines of where I was going with the plugins folder. Other optional addons that could be added this way in the future (CSS pre-processing for example). The plugins just need to implement isEnabled, start, build callbacks. Thinking of these as separate packages might make more sense though. This way you would npm install create-react-app-relay instead of npm install react-relay. I like your idea here. I need to think about how it could be implemented.

Can some of it moved upstream to the official Relay packages?

This part I am not sure about. I haven't looked much into the babel-relay-plugin project.

[josephsavona]

I'm conflicted about this PR. On the one hand, we'd love to make it super easy to get started using Relay. On the other hand, this tool feels as if it should stay focused on the getting-started experience - helping new React developers get familiar with the ecosystem or start a small project.

Instead of this PR, how about incorporating some of these changes directly into the Relay plugin? If we make Relay easier to configure in general, then we can revisit create-react-app integration. Thoughts?

cc @gaearon

[ivosabev]

Although I personally really needs this thing to work, I think including Relay, or Apollo, or any other non-tooling code in the core or creating a plugin system just to work around the opinionated architecture of create-react-app itself (eg. inaccessible babel and webpack configs) is against the main idea behind this project.

I would rather see the core team focus on streamlining the process of updating an ejected of forked create-react-app. Then issues like adding Relay could be easily solved by adding a simple tutorial in the README.

ps I would also consider talking to the Relay team and asking them drop the babel plugin, which is the main reason causing this hack.

[gaearon]

Instead of this PR, how about incorporating some of these changes directly into the Relay plugin? If we make Relay easier to configure in general, then we can revisit create-react-app integration.

👍

I’m pretty sure we don’t want to have any Relay-specific files in the main react-scripts package. We just switched to a monorepo structure so we’ll soon publish our Babel presets if it helps. I’m open to having a Relay-specific package in this repo, but it shouldn’t get installed by default.

[saintsjd]

@gaearon could you explain just a bit more what you mean by...

we’ll soon publish our Babel presets if it helps

[saintsjd]

I appreciate the thoughtful comments from the group on this pull request. Honestly, I agree. This doesn't feel quite right in the core of create-react-app.

Before we close the pull request, I'd like to get the group's thoughts on a few things:

If we support relay through the babel plugin or through a separate package, how can we integrate the external package with create-react-app without needing to change babel and webpack configs provided by create-react-app?

Do we need to make the babel config and webpack config support some sort of hooks so packages can merge in some config like relay requires?

@maxwell-oroark and I might maintain a fork called create-relay-app which just tails create-react-app but adds on Relay support. This would meet some of our immediate needs and might bridge us to a solution that integrates more cleanly with create-react-app. My hope is we eventually find a clean way to integrate directly.

[gaearon]

@gaearon could you explain just a bit more what you mean by...

we’ll soon publish our Babel presets if it helps

I meant this: #701.

[gaearon]

Thanks again for the PR. I’m going to close because, while we should ensure a good experience for Relay users, I don’t think adding a lot of code to CRA or a full-fledged plugin system makes sense at this point.

Instead, for now, I would suggest forking react-scripts as described in #779. This is a viable solution, and it should be relatively easy to integrate by modifying bin/react-scripts to first run Relay-specific scripts (e.g. scripts/prepare-relay.js), and then delegating to scripts/start.js or scripts/build.js. You would also change the Babel preset. This should be relatively easy to keep up-to-date with the main Create React App repo since you almost wouldn’t touch its original files, and would add things on top of it.

Read #779 for more information.
Thanks!

[svrcekmichal]

Hi @saintsjd @maxwell-oroark I've used your code and created fork of react-script for my personal usage. I also published it under @svrcekmichal scope to npm for everyone to use. I hope you don't mind, also I want ask @gaearon if it's not against any license rules of facebook, thanks for reply. And thanks for great work done with create-react-app

[valle-xyz]

Hey @svrcekmichal, can you open your fork for issues?

And could you explain how to create the schema.json? Also I get a error of unexpected invocation at runtime.

[svrcekmichal]

Hi @Valentin-Seehausen, I've opened issues. If you get error of unexpected invocation it means your schema.json does not match with queries used in relay. schema.json is automatically created on npm start, you just have to got react-relay installed in your package.json and variable REACT_APP_GRAPHQL_URL in your .env file. I've got to made doc better, but didn't have time till now.

[valle-xyz]

Hey, @svrcekmichal awesome work, thanks for that! Your fork works perfectly, but I don't need LESS and CSS-modules. And @saintsjd and @maxwell-oroark thank you, too! I didn't expect two Facebook products to be so incompatible. Or maybe there is something blocking Relay 2? :-)

Anyway: When someone needs only relay and wants to stay unejected, one can also use my react-script as a basement for customization. It offers only relay support. https://github.com/Valentin-Seehausen/create-react-app