Set up your React app for CRUD operations using Atlas GraphQL API — Part 2
A MongoDB’s Atlas GraphQL API Tutorial explaining how to implement Update operation in a React.js app
Why GraphQL?
Adding the ability to perform CRUD: Create, Read, Update and Delete operations on your application’s data requires you to create and expose APIs that your client will consume to interact with the data stored in your database.
GraphQL gives clients(Mobile/Desktop/Web Apps) the ability to request exactly the data they need, nothing more and nothing less. GraphQL is an alternative to REST APIs and the main difference is in the way in which Clients and Servers interact with each other.
GraphQL, on the Backend, defines a schema that describes all the possible data that the client can request, and on the other hand Frontend Clients can specifically request the data as per their needs.
What does Atlas GraphQL API provide?
Usually, to provide this flexibility to the clients, the server side of things becomes very complex. We have to create and maintain a lot of resolvers so that we can fetch the requested data from the database on our server and then respond to the client with the data received from the database.
But today, we won’t be writing a single line of server-side code and yet we will be creating a fully functional GraphQL CRUD API using MongoDB’s Atlas GraphQL API.
In this part of the blog series, we will be implementing the Update Expense Functionality in our App using GraphQL.
Edit Expense Page
Here, we will be first fetching the details of that specific expense that we want to update and then we will be updating the expense using the expense id and changes the user has made in the form. Create a new file: ./src/pages/NavBar.page.js
Reusable Expense Form component
Since Create Expense and Update Expense pages are going to have the same fields we are creating a reusable Expense Form component that can be utilized by both pages. Let’s create a new file: ./src/components/ExpenseForm.component.js
Reusable Custom Date Picker Component
Creating a reusable custom date picker would be really advantageous for us, we can use this in ExpenseForm as well as in our Analytics Dashboard that we are going to create later in this blog series. Create a new file: ./src/components/CustomDatePicker.component.js
Navigation Bar
To navigate between different pages and features we need a unified navigation menu to make sure that every portion of the app is accessible from anywhere. Create a new file: ./src/components/NavBar.component.js
Putting it all together in App.js
Let’s add all the new pages we introduced recently in the main router so that we can navigate across different pages in our React app smoothly.
Conclusion
Awesome! That’s all we needed to do in order to introduce CRUD functionality into our app.
If you have any doubts or concerns, please feel free to reach out to us on Community Forums. I have created a dedicated Forum Topic for this blog where we can discuss anything related to this Blog-series.
And before you ask, here’s the GitHub Repository(graphql-crud branch) for this tutorial series.
