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