CRUD Operations with GraphQL Using Atlas App Services
Rate this tutorial
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.
Adding the ability to perform CRUD 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 the exact 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 client and server applications interact with each other.
GraphQL, on the back end, defines a schema that describes all the possible data that the client can request. On the other hand, the frontend app can request the exact data that’s needed.
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 API allowing CRUD operations. All that with the 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.
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:
For example, a single expense document in the collection should look something like this:
Before building our GraphQL API, we’ll add sample data to our Atlas cluster.
If you don’t have an Atlas cluster and an App Services app yet, check out the previous articles in this blog post series.
- Make sure you are on the “Atlas” tab, and then on “Browse Collections” on the cluster linked to your Atlas App Services’ app.
- Now click on the “Add My Own Data” button, and hit “Create” once you enter the following information in the form:
- Database name: “expengo”
- Collection name: “expenses”
- Once done, click on “Insert Document” on the next screen.
- Replace the content in the opened modal with the following:And hit “Insert” once done:
Schemas are your application's data model specification. Once you've defined a schema, App Services provides you with additional tools and services to work with data that conforms to the schema.
Atlas GraphQL API uses schemas to automatically generate a GraphQL schema, including types, queries, and mutations. You can extend your app's API with custom resolvers that reference the types defined by your schemas.
Now, we’ll generate a schema from the data stored in our collection. Click on the buttons in the same sequence as mentioned in the image below:
Step 1: Click on the “App Services” tab on the top and select the app that you created as part of the Authentication step of this blog series.
Step 2: Click on the “Schema” link in the left navigation panel.
Step 3: Select the “expenses” collection under “expengo.”
Step 4: Click on the “Generate Schema” button.
Step 5: Click on “Generate schema from sampling.”
Step 6: If everything goes fine, you will get the following JSON schema. Once confirmed, click on “Save Draft.”
Schemas represent types of data rather than specific values. App Services supports many built-in schema types. These include primitives, like strings and numbers, as well as structural types, like objects and arrays, which you can combine to create schemas that represent custom object types.
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 set up roles and configure permissions to their expense data by following the steps outlined below:
Step 1: Click on the “Rules” tab in the left navigation panel of the screen.
Step 2: Select the expenses collection under the “expengo” database.
Step 3: Click on the “Skip(start from scratch)” button since we want to add custom permissions to our users, which we will explore in the next screen.
Since we want our users to CRUD (Create, Read, Update, and Delete) their own expenses, we will create a new role that will allow them to do the same and also protect their expenses from any unauthorized access.
Therefore, we are going to create a new role with the name of “ExpenseOwner” as shown in the image below.
Step 1: Enter name of the role as “ExpenseOwner.”
Step 2: 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.
The expression “
%%user.id” will evaluate 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 expenses on their own behalf.
In the Apply When input, paste the following code:Step 3: Since we want to give our users the ability to insert, delete, and search their own expenses, we will allow all document permissions for this role.
Step 4: Under the field permissions section, we will select “Read and Write” all fields so that our user will have full control over their expense data.
Step 5: Click on the “Save Draft” button.
After your draft is saved successfully, you will see the “ExpenseOwner” role appear on the Rules screen. Now, click on the “Review Draft and Deploy” button as shown below, and you are all set to utilize the Atlas GraphQL APIs in your application.
Awesome! That’s all we needed to do to configure our app to perform CRUD operations.
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.
Rate this tutorial