MongoDB Developer
Atlas
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

CRUD Operations with GraphQL Using Atlas App Services

Sourabh BagrechaPublished Aug 24, 2022 • Updated Aug 24, 2022
GraphQLAtlasJavaScript
Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty

CRUD Operations with GraphQL Using Atlas App Services

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.

Why GraphQL?

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.

What does the 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 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.

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:
Expengo app data model- representing the Expense schema.
Every expense in our collection will havean _id, category, mode, title, amount, author id, and a createdAt timestamp.
For example, a single expense document in the collection should look something like this:

Add sample data to your collections

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.
  1. Make sure you are on the “Atlas” tab, and then on “Browse Collections” on the cluster linked to your Atlas App Services’ app.
    Atlas Database Deployment screen highlighting the "Browse Collections" button
  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”
    Demonstrating how to create a new Database and how to create a new collection in that database from the "Collections" tab.
  3. Once done, click on “Insert Document” on the next screen.
    Collections screen highlighting the "Insert Document" button
    "Insert to Collection" pop-up highlighting the JSON view button
  4. Replace the content in the opened modal with the following:
    And hit “Insert” once done:
    "Insert to Collection" pop-up having the data to be inserted and highlighting the "Insert Button".

Generate Schema in your App Services based on your data stored in Atlas

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.
App Services Screen highlighting the 4 steps mentioned above.
Step 5: Click on “Generate schema from sampling.”
"Generate Schema from expenses" screen highlighting the "Generate Schema from sampling" button.
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.
Schema screen highlighting our JSON Schema and the "Save" button on the top.

Set up roles and configure permissions

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.
Rules screen highlighting the step mentioned above.
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.
Rules screen highlighting the 5 steps to create a new role named "ExpenseOwner" as mentioned above.
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.
Rules screen highlighting the newly created ExpenseOwner Role and "Review Draft & Deployment" button.

Conclusion

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.
And before you ask, here’s the GitHub Repository for this tutorial series.

Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty

This is part of a series

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React
More in this series
Related
Article

Exact Matches in Atlas Search: Beginners Guide


Aug 30, 2022
Tutorial

Implement Email/Password Authentication in React


Aug 24, 2022
Tutorial

Building a Real-Time, Dynamic Seller Dashboard on MongoDB


Jan 20, 2023
Tutorial

Getting Started with MongoDB Atlas, NodeJS, and Azure App Service


Mar 24, 2023
Table of Contents