CRUD Operation with React Native and GraphQL Server

This is third part of React Native and GraphQL series. If you haven’t checked previous part, please check it here. In the last part we coded CRUD operation for GraphQL client and used Graphcool as GraphQL server. If you check my first tutorial on GraphQL, I mentioned that we can implement our own GraphQL server. I started learning Graphql because it allows us to implement our own server which I was missing with firebase. Implementing a standalone technology (i.e. having control of both client and server ), is an achievement in itself. So, in this part of tutorial we will learn how we can implement our own GraphQL server and make our GraphQL client work with it.

Our Graphql server will have three parts/layers :

  1. Schema
  2. Resolvers
  3. Connectors

Schema is very similar to database schema we were creating for Graphcool server. But here we have to specify the structure of our database model, queries and mutation.

Resolvers establish relationship between Schema and Connectors.

Connectors establish connection between resolvers and database.

I am using Sqlite database here, but,  you can use mongodb, MySql or any other supported database.

First, create a directory gqlserver.  Inside it, create a file package.json and copy the content below in it.

So, your package.json file should look like above with all the dependencies we need to create graphql server.

Next, create a file .babelrc and add the content below :

Adding the above file will allow us to use ecma6 syntax in our server code.

Now fire the command below to install all dependencies :

Create a file server.js and add the code below :

In the above code we have created a GraphQL Server using express and graphql on port 4000. Cors will allow client from different ip or port to connect to the server.

Create a file schema.js and add the code below :

In the above code we have created schema of type User, Query and Mutation, structure of which , is as per requirement of our client app. Our client app requirements are to list all users , create users, delete users and update users detail.

Create a file resolvers.js and add the code below :

In the above code, we are importing User model from connectors and resolving queries and mutations specified in Schema we created above.

Finally create file connectors.js and add the code below :

In the above code we are creating database and User Model using Sqlite and Sequelize and adding some dummy data using casual module.

Now lets make a small modification to our client side code so that it works with our new server :

In the above code, we have commented the createNetworkInterface uri having graphql url and added our new server url to it.

Go gqlserver directory in command prompt and fire the command belwo to start server

Now, start ReactGraphQLApp app and it will perform all CRUD operations like before, without connection to any third party server, because, now it’s connected to your own server 😉

Video Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *