Configure Atlas App Services to perform CRUD operations in our app using Atlas GraphQL API
Build a full-stack app using MongoDB Atlas App Services without worrying about servers at all
Hi there, I am Sourabh Bagrecha from the city of lakes Udaipur, currently working as a Software Engineer at MongoDB. One of the things I enjoy the most is building full-stack apps using React.js, Node.js, and MongoDB. And no matter what kind of app I am building, CRUD: Create, Read, Update and Delete operations are the backbone of any application.
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 MongoDB’s Atlas GraphQL API.
In this part of the blog series, we will be configuring our MongoDB Atlas App Services to make sure that our GraphQL APIs do what they are intended to do in a secure and predictable manner.
Data Model
Since authorization and user management are handled by Atlas App Services out-of-the-box we don’t need to worry about managing user data on our own.
All we need to do is store and manage expense data in a collection and give our users the ability to access the expenses created by them.
An expense document in our app would have the following fields:
╔═══════════╦════════════╦════════════════════════════════════════╗
║ Field ║ Type ║ Purpose ║
╠═══════════╬════════════╬════════════════════════════════════════╣
║ _id ║ ObjectId ║ To uniquely identify every single ║
║ ║ ║ expense from the collection. ║
║ category ║ String ║ To visualize where your money is going.║
║ mode ║ String ║ Mode of payment: To visualize how you ║
║ ║ ║ are spending your money. ║
║ title ║ String ║ To get the context of this expense. ║
║ amount ║ Integer ║ ║
║ author ║ ObjectId ║ The UserId: To identlify who created ║
║ ║ ║ this expense. ║
║ createdAt ║ Timestamp ║ ║
╚═══════════╩════════════╩════════════════════════════════════════╝For example, a single expense document in the collection should look something like this:
{
"_id": { "$oid": "61dbca296ce5d97556e52b18" },
"category": "Entertainment",
"mode": "Axis CC",
"title": "Netflix",
"amount": { "$numberInt": "149" },
"author": { "$oid": "61d85eae766161a4497a6dd6" },
"createdAt": { "$date": { "$numberLong": "1641795749000" } }
}Add sample data to your collections
1. Click on Atlas, and then click on the “Browse Collections” button on the cluster linked to your Atlas App Services’ App.
2. Now click on the “Add My Own Data” button, and hit “Create” once you enter the following information in the form:
1. Database name: “expengo”
2. Collection name: “expenses”3. Once done, click on “Insert Document” on the next screen.
4. Replace all of it with the following:
{
"_id": { "$oid": "61dbca296ce5d97556e52b18" },
"category": "Entertainment",
"mode": "Axis CC",
"title": "Netflix",
"amount": { "$numberInt": "149" },
"author": { "$oid": "61d85eae766161a4497a6dd6" },
"createdAt": { "$date": { "$numberLong": "1641795749000" } }
}And hit “Insert” once done:
5. To generate the schema from the data stored in your collection, click on the buttons in the same sequence as mentioned in the image below:
6. And click on “Generate schema from sampling”
7. If everything goes fine, you will get the following JSON schema, once confirmed, click on “Save Draft”:
Configure permissions and access rules for your data
In an ideal scenario, we want to give our users the ability to create and access their own expenses and no one else should be able to access them. To make sure that the privacy of our users is maintained, we will need to implement some access rules on our data.
- Click the following buttons in the sequence mentioned below.
We will choose “No Template” for now.
2. Click on edit role as mentioned below:
Also, since we want our users to CRUD their own expenses, please make sure you tick all the boxes as shown below:
- In the previous blog post, we implemented Authentication in our app using MongoDB’s Atlas App Services. Now, whenever an authenticated user is making a request to App Services, you will be able to fetch their unique user id from the request made.
- “%%user.id” will give us the id of the user that is making the request.
The following JSON expression will make sure that any user who is making the request will only be able to create and access the data on their own behalf.
Paste the following code as shown in the image below and click “Done Editing”:
{
"author": {
"%stringToOid": "%%user.id"
}
}Now just click on “Review Draft and Deploy” as mentioned in the image below, and you are all set to utilize the Atlas GraphQL APIs in your frontend.
Conclusion
Awesome! That’s all we needed to do in order to configure our app to perform CRUD functionalities into our 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 you can discuss anything related to this Blog-series.
And before you ask, here’s the GitHub Repository for this tutorial series.
