Set up your React app for CRUD operations using Atlas GraphQL API — Part 1

A MongoDB‘s Atlas GraphQL API tutorial explaining how to implement Create and Read operations in a React.js app

MongoDB’s Atlas GraphQL with React.js

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 Atlas GraphQL API.

In this part of the blog series, we will be implementing the Create, Read, and Delete Functionality in our App using GraphQL.

Let’s install a few npm packages to make our lives easier

1. The graphql-request package will help us communicate through GraphQL from our app.
2. The @mui/lab & @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.

npm i graphql-request @mui/lab @mui/icons-material date-fns

Let’s start by adding our GraphQL Endpoint to our react app, we will append the endpoint in the following way in the file: ./src/realm/constants.js

export const APP_ID = “←Your App ID →”;
export const GRAPHQL_ENDPOINT = “←Your GraphQL Endpoint →”

Extract our GraphQL Endpoint

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:

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

Let’s start listing all the expenses by a user on their 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 details of an expense as an ExpenseCard

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

Let’s build a create-expense page

Here 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 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 Atlas GraphQL API in our React 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.