apollographql / Relay Modern Hello World
Programming Languages
Relay Modern Hello World
This is a simple ejected create-react-app
project with the minimal parts added to load a query with the Relay Modern release candidate. It calls a remote server that we use for a lot of example apps, the GitHunt app, which is like a clone of Product Hunt for GitHub repositories. You can get access to GraphiQL here, and the code for the server is available as well.
This example was prepared as part of an in-depth blog post about Relay Modern.
Running the app
yarn
yarn start
If you edit the query code, run the Relay Compiler:
yarn run relay
# or, to watch files and rerun
yarn run relay -- --watch
Code explanation
Here are the parts to look at:
schema.graphql
This is the schema. We need this file to be passed into the relay-compiler
.
scripts/getSchema.js
This is a simple script I wrote up to introspect a remote server and save the schema in .graphql
format.
package.json
Here we have added some scripts for the build process:
"relay": "relay-compiler --src ./src --schema schema.graphql",
"get-schema": "node scripts/getSchema.js"
.babelrc
We needed to install the babel-relay-plugin
and add it to .babelrc
:
{
"presets": [
"react-app"
],
"plugins": [
"relay"
]
}
src/generated/AppFeedQuery.graphql.js
This is the code that gets generated when you yarn run relay
to run the Relay compiler. It's based on the query in App.js
.
src/createRelayEnvironment.js
This file creates a Relay Environment and a Network instance that configures Relay with a function to fetch queries from the remote server.
src/App.js
This is the entirety of the application code, with the most important part being the QueryRenderer
which calls Relay to inject data into the Feed
component.