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

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.

This blog is the 6th part of the following series:

Build a full-stack Web App without creating a server using MongoDB’s Atlas GraphQL API

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.

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:

Caption: Analytics Dashboard in React using Custom Resolvers for Atlas GraphQL API

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:

Let’s enter the name of the function we are creating:

groupAmountByCategories

Then, hit Save Draft, as shown in the image below:

Fetch insights from the database using MongoDB Aggregation Framework.

Next, go to the Function Editor tab and select all the text in the editor.

Replace the implementation with the following JavaScript function:

After the code is replaced, click on Save Draft as shown below:

Grouping expense amount by mode of payment

Now, we will repeat the same process for a new function called:

groupAmountByModes

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:

1. Click on the GraphQL tab on the left-hand panel.
2. Click on the Custom Resolvers tab on the navigation bar on the GraphQL page.
3. Click on the Add a Custom Resolver button.

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)

After entering all the details, click on Save Draft, as shown in the image below:

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)

• Input Type: Existing Type and then select Filter (the one we just created for categoryAnalytics resolver) in the subsequent dropdown

• 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:

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.

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.