Implement Update and Delete Operations in React Using the Atlas GraphQL API
Rate this tutorial
In the previous part of this tutorial series, we learned how to implement Create and Read operations in a React app using MongoDB’s Atlas GraphQL API. Let’s see how we can implement Update and Delete operations in our React app.
MongoDB’s Atlas GraphQL API provides the ability to Create, Read, Update, and Delete the data for every linked collection that has a defined schema and permissions set up. We don’t have to implement the resolvers needed to perform basic CRUD operations on our own. Atlas GraphQL API analyses the schema and generates the basic resolvers automatically.
Here, we will first fetch the details of the expense that we want to update. Then, we will update the expense using a GraphQL mutation. The payload for the request will be the expense ID and the changes the user has made in the form. Create a new file: ./src/pages/NavBar.page.js
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
Let’s create a reusable custom date picker. We can utilize this in our 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
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
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.
Awesome! That’s all we needed to do in order to introduce Update and Delete functionality into our React app using MongoDB’s Atlas GraphQL API.
Join the discussion on MongoDB forums for this blog series and feel free to post any doubts and concerns. Wanna take look at the source code? Check out this GitHub repository(graphql-crud) to see it.