Use Relay

[lukejagodzinski]

Hi, is it possible to use Relay with create-react-app without ejecting project and messing with webpack configuration?

I get the following error in the console:

invariant.js:38 Uncaught Invariant Violation: RelayQL: 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 `Relay.QL`.

I was looking for solution and it seems to be problem with lack of Relay.QL transpiler in the Babel configuration. But all these projects were not created with create-react-app cli. From what I know it's not possible to mess with webpack configuration until I eject a project.

[lacker]

You can't add more transpilation steps without ejecting, so right now I think the answer is no. It would be nice if you could use Relay without ejecting, somehow, though.

[lukejagodzinski]

Ok thanks for information. Do you know how to add such configuration to ejected project? Do you have some link to tutorial/guide how to do it?

[gaearon]

We could detect if you have relay in package.json and add its Babel plugin. Since it’s part of the Facebook stack it makes sense to me to provide an integrated experience (as long as it works great).

[lukejagodzinski]

@gaearon that would be great!

[lukejagodzinski]

In the meantime does anyone know how to configure webpack after ejecting to work with Relay?

[schickling]

I think the solution @gaearon would make a lot of sense!

@jagi in the meanwhile you can eject and use a setup like in this example which uses babel-plugin-react-relay. It uses Relay's babel-relay-plugin internally but makes usage more convenient and extends its functionality. For example you no longer need to have a build/babelRelayPlugin.js script.

Let me know if you need any help setting it up.

[saintsjd]

@gaearon thinking about writing a pull request for your idea above "detect if you have relay in package.json and add its Babel plugin"

Question though. The babelRelayPlugin needs a reference to a schema.json file (example here https://github.com/relayjs/relay-starter-kit/blob/master/build/babelRelayPlugin.js). This file is typically generated by a script that introspects a graphql server and saves the output to schema.json. What is the the cleanest way to handle this in a pull request to add realyjs support to create-react-app?

More explanation is found here https://facebook.github.io/relay/docs/guides-babel-plugin.html#content.

We could configure babelRelayPlugin to look for my-app/schema.json and write instructions in the README for the user on how he/she can create schema.json.

Additionally we could provide an npm run updateRelaySchema <url-to-your-graphql-server-here> which would introspect the graphql server and create my-app/schema.json.

Does this sound reasonable? Other ideas?

[schickling]

@saintsjd I think it makes a lot of sense in order to simplify this process further. What do you think of a workflow like proposed here: https://github.com/graphcool/graphql-config

[saintsjd]

@schickling Nice suggestion! I will try it.

[gaearon]

cc @josephsavona, I expect the setup will be different in Relay 2?
Since it is preferred for new projects, is there anything we can do on our side to integrate better?

[josephsavona]

The setup in Relay2 will be basically the same - a single babel plugin that requires access to the schema. So it seems like implementing support would involve:

• A way to detect if the user wants to use Relay (sounds like checking for react-relay in package.json would work)
• A way to configure the GraphQL endpoint. graphql-config has potential here, though it seems best to advocate a single canonical place to store graphql config data. The default approach of graphql-config, an environment variable, doesn't seem ideal here because it leaves no room for specifying authentication data. Since this is a React project, using the package.json variation seems sensible.
• Actually enabling the plugin with the schema. https://github.com/graphcool/babel-plugin-react-relay has potential here, though I think we should consider just changing the default Relay plugin to have the same (more convenient) behavior. babel-plugin-react-relay really is more convenient to use, but because it wraps the official plugin it means we have to upgrade two packages in coordination on every release, one of which we don't own.

So overall, I'm inclined to say that we should change babel-relay-plugin to support the package.json configuration option of graphql-config, and use that for create-react-app.

[fson]

@josephsavona This sounds like a good plan for babel-relay-plugin. Since you brought up the topic of releases, now I'm wondering how we could determine which version of babel-relay-plugin to use in create-react-app? When the user updates react-relay, also babel-relay-plugin needs to be updated. The Babel plugins are dependencies of react-scripts and therefore not controlled by the user.

Since we can look up the react-relay package version from package.json and babel-relay-plugin seems to always track its version, maybe we could use that information to choose the right plugin version. But depending on many versions babel-relay-plugindoesn't seem like a great idea. We could also always support only the latest version, but that would mean that each time we change the supported Relay version, it would be a breaking change to react-scripts and the users need to update Relay to use it?

[josephsavona]

@fson Good points - I hadn't considered the plugin versioning aspect. Ideally the plugin would rarely have to change. Instead, the plugin can have a peer dependency on a separate module - the Relay2 compiler - that it delegates to. Then the developer can be in charge of updating the Relay and the compiler versions together (and Relay can have a peer dependency on the compiler to enforce compatible versions), and create-react-app can depend on the (infrequently changing) Relay plugin.

[saintsjd]

I was studying the source for babel-relay-plugin a bit. If I am not mistaken, getBabelRelayPlugin accepts either a schema object or a function for its first argument.

See https://github.com/facebook/relay/blob/master/scripts/babel-relay-plugin/src/getBabelRelayPlugin.js#L35 and https://github.com/facebook/relay/blob/master/scripts/babel-relay-plugin/src/getBabelRelayPlugin.js#L245-L247

Perhaps we don't need to change babel-relay-plugin? Maybe we can create a plugins/babelRelayPlugin.js file like this:

var getbabelRelayPlugin = require('babel-relay-plugin');

var getGraphQLSchemaFromPackageJson = function() {
   // parse package.json and get graphql settings like graphql-config does
   // use fetch and introspectionQuery to get schema 
   // return schema object
}

module.exports = getbabelRelayPlugin(getGraphQLSchemaFromPackageJson);

Then enable the plugin if the user wants relay (react-relay is in package json):

{
  "passPerPreset": true,
  "presets": [
    {"plugins": ["./plugins/babelRelayPlugin"]},
    "react-native"
  ]
}

I haven't tried this yet.