MongoDB Developer
Atlas
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

Implement Update and Delete Operations in React Using the Atlas GraphQL API

Sourabh BagrechaPublished Nov 01, 2022 • Updated Nov 01, 2022
ReactAtlasJavaScript
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
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.

What does Atlas GraphQL API provide?

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.

Edit Expense Page

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

Reusable expense form component

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

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

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 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.

Copy Link
facebook icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

How to Set Up HashiCorp Vault KMIP Secrets Engine with MongoDB CSFLE or Queryable Encryption


Nov 14, 2022
Article

An Introduction to the MongoDB Atlas Data API


Sep 15, 2022
Tutorial

Tutorial: Build a Movie Search Engine Using Atlas Full-Text Search in 10 Minutes


Sep 23, 2022
Tutorial

How to Use Custom Archival Rules and Partitioning on MongoDB Atlas Online Archive


Jun 07, 2022
Table of Contents