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

Implement Read and Create Operations in React Using the Atlas GraphQL API CRUD

Sourabh BagrechaPublished Oct 24, 2022 • Updated Nov 01, 2022
GraphQLReactAtlasJavaScript
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
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 back-end, defines a schema that describes all the possible data that the client can request, and on the other hand, front-end clients can specifically request exactly the data that’s needed with a single request.

What does Atlas GraphQL API provide?

Usually, to provide this flexibility to the clients, the server-side implementation may become very complex. To resolve data, we have to implement resolver functions. Each resolver function is responsible for resolving the data for a single field. To query database data and send it back to the client, we’d have to create and maintain a whole bunch of resolver functions.
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 Atlas App Services.
In this article of the blog series, we will implement the Read and Create functionality in our app using GraphQL.

Install dependencies through npm

  1. The graphql-request package will help us communicate through GraphQL from our app.
  2. The @mui/lab and @mui/icons-material package will help us in adding some complex UI elements to our app, like DatePicker.
  3. The date-fns package will help us in doing simple date- and time-related calculations easily.
Let’s start by adding the GraphQL endpoint to our React app. We will append the endpoint in the following way in the file: ./src/realm/constants.js

Extract the GraphQL endpoint from Atlas App Services

Click on the GraphQL tab in the left panel and then click on the “Copy” button in front of the GraphQL endpoint as shown in the image below: Atlas App Services tab highlighting the copy GraphQL Endpoint button.

Create a common Page Container

We will use this page container in all the pages so as to make all our pages look good and consistent across the app. Create a new file: ./src/components/PageContainer.component.js

Listing all user expenses on the home page

Refer to the comments in the code to get an understanding of what each of those functions is doing. File: ./src/pages/Home.page.js

Display expense details

We will create an ExpenseCard component. We’ll use it as a list item on our home page to display the details of an expense, like title, amount, category, mode, and date.
./src/components/ExpenseCard.component.js

Create expense form

Next, we will provide the users the ability to add an expense on their behalf. Once added they will be redirected to the homepage. Create a new file: ./src/pages/CreateExpense.page.js

Conclusion

Awesome! That’s all we needed to do in order to implement the Create and Read functionality in our app. In the next part, we will see how we can utilize the Update and Delete functionality provided by the Atlas GraphQL API in our React app.
You can post your doubts or any issues you faced on the dedicated forum topic while following this tutorial. Also, check out the GitHub repository(graphql-crud branch) for this tutorial series.

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

Triggers Treats and Tricks - Auto-Increment a Running ID Field


Sep 23, 2022
Tutorial

Bringing your data to your Wrist with the MongoDB Atlas Data API and Fitbit


Sep 02, 2022
Podcast

Database Automation Series - Automated Indexes


Sep 23, 2022
Tutorial

Serverless MEAN Stack Applications with Cloud Run and MongoDB Atlas


Jun 14, 2022
Table of Contents