Getting started with React Native and GraphQL Step by Step

Today we are starting a new series of tutorial on “React Native and GraphQL”. We will start this series at a beginners level (so that it address to every one interested in the topic) and will take it to the most advance level possible.

What is GraphQL?

GraphQL is a query language and allows us to make queries just like SQL does.

Why I got  interested in this technology?

  1. GraphQL allows you to get result in single request for which you might have to make several request if you use REST API.
  2. GraphQL gives flexibility to  use ‘ready to use back-end’ or setup our own back-end server
  3. GraphQL is actively supported by open-source community

For ease of understanding, we will start playing with GraphQL using ‘ready to use backend’ . So, lets get started.

Step 1. Sign-up and create account with Graphcool here  and stay signed in till the end of this tutorial because CLI commands that we are going to use works only if you are sign-in to your account in browser.

Step 2. Install GraphQL CLI by using command below :

Step 3. Create a  React Native Project by using command below :

Step 4. If you are familiar with php and mysql, you must be knowing, when we start a project we first create a database. Similarly, here we will first create a graphql schema. So, get in the new react native project directory and fire command below :

The above command creates a new graphql project on graphcool server and also a project.graphcool file in the current directory. You will notice that two schema ‘File’ and ‘User’ are already there. Now, lets make some modification to the existing Schema.

Step 5. We will make simple modification by adding firstName and lastName to User schema. So, our new User schema looks like this :

Notice, we haven’t added any exclamation mark to the new fields, because we don’t want to make it non-nullable. Adding exclamation mark makes field non-nullable.

Step 6. To update the changes we just made to local schema file, we need to fire command below :

( If you are a Laravel developer, you must be finding the above steps similar to the migration process used in Laravel to created db )

Step 7. Now we will install  react-apollo package. React-apollo package allows us to make graphql queries . (Remember GraphQL is just a query language, so, we need a package which allows us to use GraphQL queries in our React Native App. )  Install react-apollo package using the command below :

Step 8. Now create a directory app inside your react native project root directory. In a  file App.js in the app directory. Now add the code below to the App.js file :

In the above code we are importing createNetworkInterface, ApolloClient function and ApolloProvider component from react-apollo package. Now, we need to supply an endpoint to createNetworkInterface to establish connection with GraphCool back-end for making queries. Fire the command below to get the api endpoint :

With the above command you will get three api endpoints from which we only need ‘Simple API’ and add it to the createNetworkInterface function. After that we are instantiating ApolloClient and getting the client constant which we are injecting to ApolloProvider component. Now, which ever component in which we want to use GraphQL need to be wrapped withing ApolloProvider component.

The above code will remain same for almost all the GraphQL App we will do. ( So, more than understanding you need to by-heart it 😉 )

Step 9. Create a component directory in the app directory and create a Createuser.js file in the component directory. Now, add the code below to the Createuser.js file :

In the above code, we have created a mutation at line no 87 and assigned it to constant CREATE_USER_MUTATION. Mutations are a way to write data to back-end in GraphQL.  Above mutation syntax look like 2 nested functions, where the inner function name follows a naming convention ie prefix ‘create’ followed by Schema name User. The outer function just following the ‘mutation’ keyword is the operation name. You are flexible to use any operation name. Our mutation takes two arguments ‘firstName’ and ‘lastName’. After that, we are combining the mutation with ‘Createuser’ component using ‘graphql’ container. (This looks very similar to combine of Redux. ) After combining the mutation we can use it as a prop, the way we are doing at line no. 24.

Step 10. Create a new file Listuser.js in component directory and add the code below :

In the above code we have written a query at line 69 to retrieve data from back-end. Query is similar to mutation in syntax. But, main difference that query has is the key-work query. It is used to fetch data.  Also the name convention of inner function is different i.e. prefix ‘all’ followed by schema name.

Step 11. Now to make the above app work we just need to add the code below to index.android.js/index.ios.js :

Now, when you run your app you will get interface to add firstname and lastname. Add name of some of your friends and relatives. Then replace the line no 3 and 10 of App.js like the code below :

Now, reload app and you will get to see the names of friends and relatives you added using ‘Createuser’ component.

This was just the first step of journey of thousand miles of world of GraphQL. We will keep doing some interesting stuffs and honing our GraphQL skills. Stay tuned to everything we do by subscribing you our news letter and subscribing to our Youtube channel.

Video Tutorial