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

Create an Analytics Dashboard Using Atlas GraphQL API’s Custom Resolvers

Sourabh BagrechaPublished Nov 09, 2022 • Updated Nov 09, 2022
GraphQLReactAtlasJavaScript
Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
MongoDB Atlas GraphQL API provides a lot of features out of the box. In the previous parts of this blog series, we implemented all the CRUD (Create, Read, Update, Delete) operations possible on our data. But sometimes, that’s not enough.
You may need to perform advanced analytics on your data. To achieve that, you have to write a long aggregation pipeline that processes multiple documents and returns the computed results. This is beyond the abilities of the default GraphQL API provided by MongoDB Atlas. But that doesn’t mean we are restricted to perform basic CRUD operations only.
Custom resolvers for GraphQL is the exact feature we need to perform the advanced querying and computations we just discussed.

Why do we need custom resolvers for GraphQL?

Custom resolvers give us the ability to extend our Atlas-provided GraphQL API. We can easily add new root-level fields that require complex business logic and calculations, like executing an aggregation pipeline, to gain insights from our database for a particular user.
All we need to do is provide these five details to configure our custom resolver:
  • Name.
  • Parent type.
  • Input type.
  • Payload type.
  • The Atlas Function, which can fetch data from our database, perform complex calculations on them, and return the computed results to the resolver, which will later be forwarded to the user.
Atlas GraphQL API screen highlighting the Custom Resolvers tab

How can we build an analytics dashboard with React and Atlas GraphQL API?

In this part of the blog series, we will be discussing how we can create functions that perform advanced querying and calculations. Then, we will see how we can utilize those functions in our custom resolvers and expose them through GraphQL.
For our app, we’ll create a consolidated dashboard where the users can track how (payment mode of expenses) and where (categories of expenses) they are spending their money. This will help them in better planning and budgeting for the coming months to make their financial goals a success. The dashboard should look like this:
Analytics Screen of our Expengo App

Create MongoDB Atlas functions for the category and mode analytics

An Atlas function is a really nice way to run code without worrying about the underlying infrastructure. Atlas functions are automatically scalable, highly available, and require minimal setup configuration.
Functions have access to the context object that contains:
  • Information about the user that called this function.
  • Access to environment variables.
  • An HTTP client to communicate with any other
  • API on the internet.
  • Access to services like data sources.
Grouping expense amount by category
Before moving onto Atlas GraphQL API’s custom resolver, we need to create a function that can be used by the custom resolver. Navigate to your App Services application and select Functions from the left-hand menu. Then, click on Create New Function as shown in the image below:
Atlas Functions screen highlighting the Functions menu and the "Create New Function" button
Let’s enter the name of the function we are creating: groupAmountByCategories
Then, hit Save Draft, as shown in the image below:
"Create New Function" screen highlighting the Function's "Name" field and "Save Draft" button
Fetch insights from the database using MongoDB Aggregation Framework
Next, go to the Function Editor tab and select all the text in the editor. Function Editor screen highlighting all the selected text that's there in the editor.
Replace the implementation with the following JavaScript function:
After the code is replaced, click on Save Draft as shown below: Function Editor Screen highlighting the newly pasted function code.
Grouping expense amount by mode of payment
Now, we will repeat the same process for a new function called: groupAmountByModes
"Create New Function" screen highlighting the Function's "Name" field and "Save Draft" button
Inside the function editor for groupAmountByModes, we will use the following JavaScript function to fetch all the relevant expenses and group them by mode name and calculate the total amount per mode using the aggregation pipeline.

Create a custom resolver for GraphQL

Custom resolver for category analytics
Follow the sequence in the same order as mentioned in the image below to create a new Custom GraphQL resolver:
  • Click on the GraphQL tab on the left-hand panel.
  • Click on the Custom Resolvers tab on the navigation bar on the GraphQL page.
  • Click on the Add a Custom Resolver button.
Atlas GraphQL API Screen highlighting the sequence of button that need to be pressed in order to add a new custom resolver.
Now, add the following details in the Custom GraphQL Resolver configuration:
  • GraphQL Field Name: categoryAnalytics
  • Parent Type: Query
  • Function: groupAmountByCategories (the one that we created in the last section)
  • Input Type: Custom Type (select all text and then paste the following in the text field):
  • Payload Type: Custom Type (select all text and then paste the following in the text field)
Create Custom Resolver screen highlighting the GraphQL Field Name, Parent Type, Function & Input Type field
After entering all the details, click on Save Draft, as shown in the image below: Create Custom Resolver screen displaying the Payload Type field and highlighting the "Save Draft" button
Custom resolver for mode analytics
Following the same procedure as above, we will create a new custom resolver with the following details:
  • GraphQL Field Name: modeAnalytics
  • Parent Type: Query
  • Function: groupAmountByModes (the second one that we created in the last section) Create Custom Resolver screen highlighting the GraphQL Field Name, Parent Type, Function & Input Type field
  • Input Type: Existing Type and then select Filter (the one we just created for categoryAnalytics resolver) in the subsequent dropdown Create Custom Resolver screen displaying the Input Type field.
  • Payload Type: Custom Type (select all text and then paste the following in the text field):
After entering all the details, click on Save Draft as shown in the image below: Create Custom Resolver screen displaying the Payload Type field and highlighting the "Save Draft" button.
The Custom Resolvers list now contains both the categoryAnalytics and modeAnalytics resolver, as shown in the image below. And now, we are all set to deploy our changes. Atlas GraphQL API screen highlighting the list of custom resolvers and the "Review Draft & Deploy" button.

Conclusion

Woah! We have made all the configurations needed to enable advanced analytics in our Atlas App Services app using Custom Resolvers for GraphQL API. In the next part of this blog series, we will see how we can utilize this in our React front end to provide a consolidated dashboard to our users.

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

Rule-Based Access to Atlas Data API


Feb 17, 2023
Tutorial

Next Gen Web Apps with Remix and MongoDB Atlas Data API


Apr 13, 2023
Code Example

Hostels Kenya Example App


Jul 07, 2022
Article

Optimizing your Online Archive for Query Performance


Sep 21, 2023
Table of Contents