babel-preset-react-app: add babel-plugin-relay

[maletor]

Adds support for Relay Modern. relay-compiler, relay-runtime, and
react-relay are all "peer" dependencies, including the script to run
relay compiler. This at least unblocks CRA from being able to develop
Relay Modern.

https://facebook.github.io/relay/docs/babel-plugin-relay.html
https://facebook.github.io/relay/docs/relay-compiler.html

---

#2001 (comment)

Because Relay Modern does not require a schema for babel, this makes the integration process so much easier. Hopefully we can get this merged, but if you think it would be blocked by needing documentation, let me know what a general idea of what you're looking for and we can get that added as well.

[gaearon]

Hmm. This doesn't look complicated. Any caveats?

[maletor]

Caveats.

1. Does not work with relay classic. For instance, if you need to specify a schema, you are out of luck. In my opinion, the complications are not worth it. Either use Relay Modern, or eject.

2. Wasted CPU cycles on non Relay projects. We aren't going to get into the business of "detecting" a Relay Modern app. This is not trivial while an extra plugin in babel is trivial.

3. You must be responsible for add relay-compiler yourself as a devDependency and "watching" for updates to your files. This is not unique to CRA and is outlined in the Relay Modern documentation. This is why I say, maybe some documentation on this side would be nice, perhaps pointing at Relay Modern documentation?

I have tested this by directly adding this change within my node_modules directory and it works great!

[gaearon]

Does it break any other graphql solutions, like Apollo?

[gaearon]

Can we make a PR to Babel plugin to enforce import/require name?

[wtgtybhertgeghgtwtg]

It looks like the plugin and runtime are designed to be used verbatim, so I'm not sure if that would be an option.

[arvigeus]

What about reading package.json and looking for packages like relay-compiler and react-relay in order to use this plugin? No wasted cycles, no need to worry about Apollo (I think)

[wtgtybhertgeghgtwtg]

I don't see an issue for this on the Relay repo and apparently package detection is non-trivial; is there a plan to move forward with this?

[maletor]

I hope so. Is CRA doing package detection anywhere else at the moment? I would have preferred to keep this as a one line ish change.

[k15a]

There is process.env['npm_package_devDependencies_react-relay'] which should make package detection pretty easy. Or I am missing an important thing here? I am not aware of a place where package detection is used but there is a place where a value from package.json is read. This could be used for package detection as well.

[gaearon]

We need some plan for a bunch of optional dependencies people want: Sass, Relay, TypeScript. These are all in principle possible to support but we don't want to either create a second plugin system (which webpack already "is") nor to increase default download size. If you figure out a creative way out of this problem I'd love to know!

[maletor]

This should probably be merged without that system. It's pretty innocuous.

[maletor]

Ping @gaearon

[dpehrson]

I'm not sure whether I've just done something stupid, but attempting to apply the same monkey-patch to my own copy of the babel-preset-react-app doesn't even work. Compilation still fails with graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as graphql.

Would definitely like to see proper relay modern support in CRA, the majority of the reason I went with CRA was because I thought it would save me from all this.

[lpalmes]

Hey @dpehrson, i have this react-scripts fork, which if you replace your react-scripts dependency in your package.json will work with relay-modern, i'm using them myself, that's why is up in npm, hopefully they are useful to you, and i do hope as well we have relay support in cra in the future.

[react-scripts-dangerous]

Hello! I'm a bot that helps facilitate testing pull requests.

Your pull request (commit 56d72ae) has been released on npm for testing purposes.

npm i [email protected]
# or
yarn add [email protected]
# or
create-react-app [email protected] folder/

Note that the package has not been reviewed or vetted by the maintainers. Only install it at your own risk!

Thanks for your contribution!

[utkez]

I get the following error after creating a new react app, running yarn start and trying to access the homepage:
./~/react-error-overlay-dangerous/lib/components/code.js Module not found: Can't resolve 'react-dev-utils/ansiHTML' in '/Users/utkez/Projects/servers/drac_worker/new-ui/node_modules/react-error-overlay-dangerous/lib/components'

I don't know if it's somehow related, but it seems that exactly the same error happened in another pull request introducing different feature: #2714

[dhmacs]

Any update on this?

[steobrien]

Since #3909 has landed, I believe this change – i.e. simply adding babel-plugin-relay – is sufficient to support Relay. Are there any plans to merge it?

[kassens]

With the next Relay release (after 1.6.2) and 2.0 of react-scripts, you'll be able to do

import graphql from 'babel-plugin-relay/macro';

graphql`...`

I don't think there needs to be a direct dependency?

[shaneosullivan]

Thanks @kassens that's great news! Is there any ETA on the Relay release? Or even a days/weeks/months estimate?

[gaearon]

Closing per #2343 (comment).

[kassens]

@shaneosullivan let me try to do an RC this week, so we can test this easily!

[shaneosullivan]

Awesome, thanks @kassens! Some additional updates to docs and examples would be a huge help too, the current ones on master are fairly confusing

[fernandocalsa]

Is there anything we can help to speed this up? testing or writing documentation... I have been searching for it for long time

[jeffreypriebe]

Example of RC usage (expanding from @kassens comments from Aug 14, his example repo):
https://github.com/kassens/relay-cra-example

(For anyone else finding this thread and wanting an example.)