MongoDB Developer
Atlas
plus
Sign in to follow topics
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
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.

Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

WhatsApp Business API Webhook Integration with Data API


Apr 05, 2023
Tutorial

Visualize MongoDB Atlas Database Audit Logs


Oct 06, 2022
Article

Conference Transcription and Replay - Build a Serverless GraphQL API with MongoDB Realm


Mar 21, 2023
Article

Exact Matches in Atlas Search: Beginners Guide


Aug 30, 2022
Table of Contents