How to setup a React Native + GraphQL + Relay Modern

Hello my name is Luiz i’m full-stack developer at Horizon Four. On this post i will show you the steps and some tips to create a development environment using Relay and GraphQL so without further ado let’s go!

Firstly what is Relay and GraphQL?

GraphQL is a new way to write API’s. GraphQL has introduced a new approach to APIs where I do not need multiple micro-services I just need a big micro-service where I can request what I want and it returns me the requested data, and with that it decreases the possibility of overfetching (more data than you need) and underfetching (less data than you need). And Relay is a client to be able to consume this huge API that has his own store/cache and cursor.

Here are some steps to set up an environment:

Step One: Create a GraphQL Server

To create a GraphQL server, you can use the Graph Cool it’s very simple to configure it’s like firebase but using GraphQL as the query language or you can use the create-graphql with the create-graphql you will be able to create your own GraphQL server totally from zero, with this boilerplate you will find a preconfigured GraphQL enviroment with user authentication and you just need to add your: loaders, types, connections and mutations

Step Two: Add some dependencies to your React-Native Project:

Dependencies: yarn add react-relay relay

DevDependencies: yarn add relay-compiler babel-plugin-relay —-dev

Step Three: Setup .babelrc and package.json

Add this plugin on your .babelrc:

  "plugins": [["relay", { "schema": "data/schema.json" }]],

This plugin will help the compiler in this case babel to understand the relay code inside your .js files.

Add this to your package.json “scripts”:

"scripts": {
    "relay": "relay-compiler --src ./src --schema data/schema.graphql"
    "relay:watch": "yarn relay --watch",
},

This script will precompile your relay-code before the code runs, in order to increase performance, so when you modify a query or a mutation you will need to run yarn relay or instead of it you can use the yarn relay:watch to watch for changes and compile when you change a relay query or mutation.

Step Four: Create the Relay Enviroment

Now you will need to create the environment to connect to your GraphQL, lets get started!

We will create the environment with relay-runtime that we added before on the second step

You will use this when you use a QueryRenderer or a createMutation will be passed as a parameter to connect to the server and make the fetch to the api.

Step Five: Making Queries and Mutations

Now let’s setup some mutations and queries with relay. So without further ado let’s go!

Creating queries with QueryRenderer:

For this we will use QueryRenderer from react-relay that we added before

OBS: The ErrorView and the LoadingView should be created by yourself so be creative 😄🖖

Creating Mutations with createMutation:

For this we will use commitMutation from react-relay that we added before

So now that we created our queries and our mutations we just need to run yarn relay to compile our code and if you made all things right it will compile.

IMPORTANT - Relay is very sensitive with naming, so you need to follow their patterns like this:

For Queries:

YourComponent_viewer or YourComponent_query

For Mutations:

NameOfMutation + Mutation

If you make all this steps right your relay + graphql environment will be ok to start developing ! Live long and prosper 🖖🏻

My social networks:

• Twitter: @luiz_bones
• GitHub: lXSPandora
• Company that i work for: https://github.com/entria