Relay Client Guide

The objective of this project is to go over the documentation of Relay and ilustrate it with practical cases for the lessons in the Relay documentation.

You can use this project by checking out the different tags that correspond to the respective lessons in the Relay site documentation.

When reviewing or checking out this code, I would assume that you have already gone over the following tags:

• getting-started
• rendering-quieries
• rendering-fragments
• rendering-fragments-2
• rendering-fragments-3
• variables
• variables-2
• suspense
• error-boundaries
• fetch-policies
• presence-of-data
• presence-of-data-2
• pagination
• routing
• routing-2

It will be interesting for you to inspect the internals of the Store by installing the Relay Developer Tools extension to follow these samples.

Specific to this sample: mutations

This sample is an slight evolution of routing-2.

This evolution adds a mutation to the application. the mutation is in the Issue.js file. The mutation implemented adds a new comment to the list of coments of an issue. It uses @appendEdge to have relay to automatically update the store and have the new additioned comment to be added to the user interface.

Other reccomendations

In order to see what is going on with the relay store, you should to install the Relay Developer Tools

It will be very useful to see the GitHub´s GraphQL API Reference, specially the following entries:

• Repository Object
• IssueConnection Object
• IssueEdge Object
• Issue Object

You may also take advantage and watch in the code how you can use React hooks controlled inputs (see Mentions section below).

I reccomend to use the Visual Extension for Flow to make sure that you understand what is going on with with the Flow checks.

Configure and run this sample

This project connects to the Github GraphQL server. You can find information about it in the Github GraphQL API site.

• Checkout the project and do npm install to install the required libraries.
• Create a Personal Access Token in Github and store it in a safe place.
• Create a file in the root folder with the name .env.local
• Enter the following line in the .env.local file. This creates an environment variable that ls used later in ./src/fetchGraphQL.js

REACT_APP_GITHUB_AUTH_TOKEN=(YOUR TOKEN)

• Do npm run relay
• Do npm start.

Mentions

The helper function userInput comes from Evan Schultz in his blog entry