extend documentation: document how to configure a webpack or create-react-app project

[barbalex]

Seeing that relay modern integration in create-react-app is not about to happen soon I tried to:

• create new create-react-app
• eject
• add support for relay modern

The last point turned out to be harder than I thought (well: not that surprising: If this were easy cra would probably not exist). I could not find any instructions explaining how to configure a webpack project to work with an existing graphql endpoint (I am using postgraphql) and configure relay modern.

The official relay tutorial shows how easy it is to work once a project is configured! The code examples are so to the point though that you can not even see from what packages the used functions were imported :-(. And it works by forking an already configured project instead of explaining how to configure your project.

Everything I tried based on the official relay example did not work. There are also other examples (for instance this) but it seems like there are many ways to do this and every example takes a different route and some may be specific for relay 1. Who knows...

It would be really nice if configuring a webpack project could be added to the docs.

[barbalex]

Additionally or alternatively it would be very helpful if in example app all occurrences of relay were commented to explain what is happening, why and what would be possible alternatives.

For instance I see QueryRenderer in https://github.com/relayjs/relay-examples/blob/master/todo-modern/js/app.js. But I have no idea why it is here and if this is necessary for using createFragmentContainer in other components.

[seanchas]

After eject

yarn add react-relay react-compiler react-runtime
yarn add --dev graphql babel-plugin-relay
mkdir schema

config/paths.js

module.exports = {
...
+ appSchema: resolveApp('schema/schema.graphql'),
...
}

.env.local

...
+ REACT_APP_GRAPHQL_ENDPOINT=<YOUR_GRAPHQL_ENDPOINT>
...

scripts/schema.js
https://gist.github.com/seanchas/b0632551d080598ad5b8e12cca762951

package.json

"scripts": {
+ "schema": "node scripts/schema.js",
+ "build-relay": "relay-compiler --src ./src --schema ./schema/schema.graphql",
+ "watch-relay": "yarn run build-relay -- --watch",
- "build": "node scripts/build.js",
+ "build": "yarn run build-relay && node scripts/build.js",
  ...
}

...

"babel": {
...
+ "plugins": {
+   "relay"
+ }
...
}

[barbalex]

@seanchas thanks a lot

That got me just far enough so I managed to fetch my first data. Wohoo!!

[josephsavona]

Care to submit a PR to add these steps to the docs? :-)

[seanchas]

@josephsavona I don't speak English that well, you know ;) Can try if someone will edit later.

[josephsavona]

@seanchas We welcome contributions from multilingual speakers! (aside: several of us are non-native English speakers and almost everyone on the team speaks 2+ languages). If you have time a PR would be great, we can always help edit grammar :-)