Implement Read and Create Operations in React Using the Atlas GraphQL API CRUD
Rate this tutorial
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.
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.
- The @mui/lab and @mui/icons-material package will help us in adding some complex UI elements to our app, like DatePicker.
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
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:


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