React Native and GraphQL CRUD Operation

This is second part of React Native and GraphQL series. If you are new to GraphQL make sure you check first part here  . In this part we will see how we can Create, Read, Write and Delete data with React Native App  as front end and GraphQL as back-end. Also we will see, how we can use Apollo Client’s new imperative store API and UI up-to-date with back-end data.

In first part of tutorial, we created Listuser component, in which we were listing users by making query to graphql server. Now, we will add some more code to perform edit and delete operation. Below is the updated code of Listuser.js for delete and edit operation :

In the above code, we have added edit and delete link and also added delete mutation. Now, when user taps delete link, delete mutation is executed for id of that row. Also, following delete operation, we update the cache so that data deleted is immediately reflected to the user. We are initiating the edit operation in Listuser component but we will complete it in Createuser component.

We have also made changes to the Createuser component. Below is the updated code for the same :

We take the id of data, of which user taps the edit link, in Listuser component and using that id we update the data in the above code. Update mutation syntax is very similar to Delete mutation syntax.

Finally, we are using Mainuser component to establish communication between Createuser component and Listuser component. Below is the code for Mainuser component :

In the above code, using the state’s of the Main user component, we are passing the row to be edited to Createuser component on edit event of Listuser  component.

Video Tutorial :




2 thoughts on “React Native and GraphQL CRUD Operation”

  1. I’m still learning from you, while I’m making my way to the top as well. I certainly love reading all that is written on your website.Keep the posts coming. I enjoyed it!

Comments are closed.