Sourabh Bagrecha

One of the things I enjoy the most is building fullstack apps using React, Node.js, and MongoDB. Whenever I want to host my side projects’ front end, I find myself hosting a Netlify site or maybe uploading it on AWS S3. But I use them only to host my front end (client app), and this adds a lot of operational overhead, as I have to manage my front end on one tool and my back end and database on the other.

Wouldn’t it be convenient if there was a tool where I could manage my database, back-end, and front-end hosting in a single place? Atlas App Services provides website hosting out of the box in the same dashboard, which we used to create and configure authentication and GraphQL APIs for our app.

And, in this final part of the blog series, we will be looking at how we can utilize this website hosting provided by Atlas App Services. In just five steps, we will have a live website with a URL that can be accessed from anywhere in the world.

## Create a production build of your React app
To create a build folder, execute the following command from the root directory of your React app:
```bash
npm run build
```

Once the build process is finished, take a look at the folder structure of your app and you will be able to see a build folder in the root directory.

![Code Editor's file explorer highlighting the Build folder.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image3_4c1a069613.png)

## Enable hosting on Atlas App Services
Open your App Services application in the Atlas UI.

Now, select Hosting from the left panel and then click on Enable Hosting, as mentioned in the sequence in the image below:
![Atlas App Services Screen highlighting how to Enable Website Hosting](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image1_59e9d5feb1.png)

## Upload the contents of your app’s build folder
Open the build folder we just generated in your File Explorer and drag all the contents of the build folder to the hosting menu’s screen on the browser as shown in the image below.

Do not upload the build folder directly. Instead, upload all the contents that are inside the build folder by selecting all the files and folders after opening the build folder in the File Explorer.

![Drag the build folder’s contents from your computer's file explorer into the hosting menu of the Atlas App Services in the browser.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image6_554b08e028.png)

Since React has created an index.html file of its own, accept the overwrite warning for index.html by clicking on Upload in the prompt, as shown in the image:
![Overwrite Files popup highlighting the Upload button](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image7_76e4310f42.png)

## Review draft and deploy
Now, review the draft and deploy. 

![Atlas App Services screen highlighting the "Review Draft & Deploy" button](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image8_60c05339fe.png)

## Testing: Access your hosted website
Once you get a “Deployment was successful” message in green at the top, log on to the URL provided by Atlas App Services, as shown in the image below, and test if the app is working as expected.

![Atlas App Services Hosting screen highlighting the URL that can be used to access our Web App from anywhere in the world.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image2_5bd8dc91e0.png)

And if all goes well, you will be able to see the login and your expenses, just like shown in the image below:

![Expengo app's home page that was deployed using Atlas App Services Static Hosting.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image4_d8cc4140fe.png)

## Conclusion
Finally, in just five easy steps, we were able to deploy our app using MongoDB Atlas App Services static hosting. You can switch to the setting tab at the top and point your custom domain to this hosted web app.


This Atlas App Services tutorial shows you how to host websites and single-page applications like React in just 5 steps.

Deploy and Host Your React Web App on MongoDB Atlas App Services

# Configure Email/Password Authentication in MongoDB Atlas App Services

One of the things I like the most is building full-stack apps using Node.js, React, and MongoDB. Every time I get a billion-dollar idea, I immediately start building it using this tech stack. No matter what app I’m working on, there are a few features that are common:

- Authentication and authorization: login, signup, and access controls.
- Basic CRUD (Create, Read, Update, and Delete) operations.
- Data analytics.
- Web application deployment.

And without a doubt, all of them play an essential role in any full-stack application. But still, they take a lot of time and energy to build and are mostly repetitive in nature. Therefore, we are left with significantly less time to build the features that our customers are waiting for.
In an ideal scenario, your time as a developer should be spent on implementing features and not reinventing the wheel. With [MongoDB Atlas App Services](https://www.mongodb.com/atlas/app-services), you don’t have to worry about that. All you have to do is connect your client app to the service you need and you’re ready to rock!
Throughout this series, you will learn how to build a full stack web application with MongoDB Atlas App Services, GraphQL, and React. We will be building an expense manager application called Expengo.

## Authentication

Implementing authentication in your app usually requires you to create and deploy a server while making sure that emails are unique, passwords are encrypted, and sessions/tokens are managed securely.
In this blog, we’ll configure email/password authentication on Atlas App Services. In the subsequent part of this series, we’ll integrate this with our React app.

![Expengo app walkthrough](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/walkthrough_a085dddc6a.gif)

## MongoDB Atlas App Services authentication providers
MongoDB Atlas is a developer data platform integrating a multi-cloud database service with a set of data services. Atlas App Services provide secure serverless backend services and APIs to save you hours of coding.
For authentication, you can choose from many different providers such as email/password, API key, Google, Apple, and Facebook. For this tutorial, we’ll use the email/password authentication provider.

## Deploy your free tier Atlas cluster
If you haven’t already, [deploy a free tier](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster/) MongoDB Atlas cluster. This will allow us to store and retrieve data from our database deployment. You will be asked to add your IP to the IP access list and create a username/password to access your database. Once a cluster is created, you can create an App Service and link to it.

## Set up your App Service
Now, click on the “App Services” tab as highlighted in the image below:

![Database Deployments screen highlighting App Services tab](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/App_Services_tab_5d34a6032b.png)

There are a variety of templates one can choose from. For this tutorial, we will continue with the “Build your own App” template and click “Next.”

![Atlas App Services welcome page highlighting the Build Your Own App feature](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Select_a_template_06356e9eb4.png)

Add application information in the next pop-up and click on “Create App Service.”

![Connecting data to Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Create_App_Services_Dialog_4c6ddcdc76.png)

Click on “Close Guides” in the next pop-up screen.

![Application guides for Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Close_guides_54b8ce39f3.png)

Now click on “Authentication” in the side-bar. Then, click on the “Edit” button on the right side of Email/Password in the list of Authentication Providers.

![Authentication providers for Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Turn_on_authentication_d4528fa3b6.png)

Make sure the Provider Enabled toggle is set to On.

On this page, we may also configure the user confirmation settings and the password reset settings for our application.  For the sake of simplicity of this tutorial, we will choose:

1. User confirmation method: “Automatically confirm users.”
2. Password reset method: “Send a password reset email.”
3. Placeholder password reset URL: http://localhost:3000/resetPassword.
    > We're not going to implement a password reset functionality in our client application. With that said, the URL you enter here doesn't really matter. If you want to learn how to reset passwords with App Services, check out the [dedicated documentation](https://www.mongodb.com/docs/atlas/app-services/authentication/email-password/#password-resets).
4. Click “Save Draft.”

![Defining authentication settings within Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Authentication_provider_06d7d94eee.png)

Once your Draft has been saved, you will see a blue pop-up at the top, with a “Review Draft & Deploy” button. Click on it and wait for a few moments.

![Review Draft & Deploy button in App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Review_Draft_and_Deploy_115d03c3ef.png)

You will see a pop-up displaying all the changes you made in this draft. Click on “Deploy” to deploy these changes:

![Deployment draft in Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Deploy_Draft_9cafaa3f80.png)

You will see a “Deployment was successful” message in green at the top if everything goes fine. Yay!

![Successful deployment notification](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Deployment_was_successful_ffc92d6da9.png)

## Conclusion

Please note that all the screenshots were last updated in August 2022. Some UX details may have changed in more recent releases.
In the next article of the series, we will learn how we can utilize this email/password authentication provider in our React app.


In less than 6 steps, learn how to set up authentication and allow your users to log in and sign up to your app without writing a single line of server code.

Configure Email/Password Authentication in MongoDB Atlas App Services

Implement Email/Password Authentication in React

CRUD Operations with GraphQL Using Atlas App Services

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React

# Implement Email/Password Authentication in React
Welcome back to our journey building a full stack web application with MongoDB Atlas App Services, GraphQL, and React!

In the [first part of the series](https://www.mongodb.com/developer/products/atlas/email-password-authentication-app-services), we configured the email/password authentication provider in our backend App Service. In this second article, we will integrate the authentication into a web application built with React. We will write only a single line of server-side code and let the App Service handle the rest!

We will also build the front end of our expense management application, Expengo, using React. By the end of today’s tutorial, we will have the following web application:

![Expengo application walkthrough](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/0_Hn_2_D_Mk_Z778_Ry6oz_1_06ebd7bc2f.gif)

## Set up your React web application

Make sure you have [Node.js and npm installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) on your machine. You can check if they’re correctly set up by running the following commands in your terminal emulator:

```sh
node -v
npm -v
```

### Create the React app
Let’s create a brand new React app. Launch your terminal and execute the following command, where “expengo” will be the name of our app:

```sh
npx create-react-app expengo -y
```

The process may take up to a minute to complete. After it’s finished, navigate to your new project:

```sh
cd expengo
```

### Add required dependencies
Next, we’ll install the [Realm Web SDK](https://www.mongodb.com/docs/realm/web/). The SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with Atlas App Services like Functions, authentication, and GraphQL.

```
npm install realm-web
```

We’ll also install a few other npm packages to make our lives easier:

1. [React-router-dom](https://reactrouter.com/docs/en/v6) to manage navigation in our app:

    ```
    npm install react-router-dom
    ```
   
1. [Material UI](https://mui.com/) to help us build beautiful components without writing a lot of CSS:

    ```
    npm install @mui/material @emotion/styled @emotion/react
    ```

### Scaffold the application structure
Finally, let’s create three new directories with a few files in them. To do that, we’ll use the shell. Feel free to use a GUI or your code editor if you prefer.

```sh
(cd src/ && mkdir pages/ contexts/ realm/)
(cd src/pages && touch Home.page.js PrivateRoute.page.js Login.page.js Signup.page.js)
(cd src/contexts && touch user.context.js)
(cd src/realm && touch constants.js)
```

Open the expengo directory in your code editor. The project directory should have the following structure:

```
├── README.md
└──node_modules/
├── …
├── package-lock.json
├── package.json
└── public/
 ├── …
└──src/
 └──contexts/
  ├──user.context.js
 └──pages/
  ├──Home.page.js
  ├──PrivateRoute.page.js
  ├──Login.page.js
  ├──Signup.page.js
 └── realm/
  ├──constants.js
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── reportWebVitals.js
 └── setupTests.js
```

## Connect your React app with App Services and handle user management

In this section, we will be creating functions and React components in our app to give our users the ability to log in, sign up, and log out.

* Start by copying your App Services App ID:

![Atlas App Services Screen highlight the Copy App ID button.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Copy_App_ID_53e06faff4.png)

Now open this file: `./src/realm/constants.js`

Paste the following code and replace the placeholder with your app Id:

```js
export const APP_ID = "<-- Your App ID -->";
```


### Create a React Context for user management
Now we will add a new React Context on top of all our routes to get access to our user’s details, such as their profile and access tokens. Whenever we need to call a function on a user’s behalf, we can easily do that by consuming this React Context through child components.
The following code also implements functions that will do all the interactions with our Realm Server to perform authentication. Please take a look at the comments for a function-specific description.

**./src/contexts/user.context.js**

```js
import { createContext, useState } from "react";
import { App, Credentials } from "realm-web";
import { APP_ID } from "../realm/constants";
 
// Creating a Realm App Instance
const app = new App(APP_ID);
 
// Creating a user context to manage and access all the user related functions
// across different components and pages.
export const UserContext = createContext();
 
export const UserProvider = ({ children }) => {
 const [user, setUser] = useState(null);
 
 // Function to log in user into our App Service app using their email & password
 const emailPasswordLogin = async (email, password) => {
   const credentials = Credentials.emailPassword(email, password);
   const authenticatedUser = await app.logIn(credentials);
   setUser(authenticatedUser);
   return authenticatedUser;
 };
 
 // Function to sign up user into our App Service app using their email & password
 const emailPasswordSignup = async (email, password) => {
   try {
     await app.emailPasswordAuth.registerUser(email, password);
     // Since we are automatically confirming our users, we are going to log in
     // the user using the same credentials once the signup is complete.
     return emailPasswordLogin(email, password);
   } catch (error) {
     throw error;
   }
 };
 
 // Function to fetch the user (if the user is already logged in) from local storage
 const fetchUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.refreshCustomData();
     // Now, if we have a user, we are setting it to our user context
     // so that we can use it in our app across different components.
     setUser(app.currentUser);
     return app.currentUser;
   } catch (error) {
     throw error;
   }
 }
 
 // Function to logout user from our App Services app
 const logOutUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.logOut();
     // Setting the user to null once loggedOut.
     setUser(null);
     return true;
   } catch (error) {
     throw error
   }
 }
 
 return <UserContext.Provider value={{ user, setUser, fetchUser, emailPasswordLogin, emailPasswordSignup, logOutUser }}>
   {children}
 </UserContext.Provider>;
}
```

## Create a PrivateRoute page
This is a wrapper page that will only allow authenticated users to access our app’s private pages. We will see it in action in our ./src/App.js file.

**./src/pages/PrivateRoute.page.js**

```js
import { useContext } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const PrivateRoute = () => {
 
 // Fetching the user from the user context.
 const { user } = useContext(UserContext);
 const location = useLocation();
 const redirectLoginUrl = `/login?redirectTo=${encodeURI(location.pathname)}`;
 
 // If the user is not logged in we are redirecting them
 // to the login page. Otherwise we are letting them to
 // continue to the page as per the URL using <Outlet />.
 return !user ? <Navigate to={redirectLoginUrl} /> : <Outlet /> ;
}
 
export default PrivateRoute;
```


## Create a login page
Next, let’s add a login page.

**./src/pages/Login.page.js**

```js
import { Button, TextField } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Login = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // We are consuming our user-management context to
 // get & set the user details here
 const { user, fetchUser, emailPasswordLogin } = useContext(UserContext);
 
 // We are using React's "useState" hook to keep track
 //  of the form values.
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // This function will be called whenever the user edits the form.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 // This function will redirect the user to the
 // appropriate page once the authentication is done.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // Once a user logs in to our app, we don’t want to ask them for their
 // credentials again every time the user refreshes or revisits our app, 
 // so we are checking if the user is already logged in and
 // if so we are redirecting the user to the home page.
 // Otherwise we will do nothing and let the user to login.
 const loadUser = async () => {
   if (!user) {
     const fetchedUser = await fetchUser();
     if (fetchedUser) {
       // Redirecting them once fetched.
       redirectNow();
     }
   }
 }
 
 // This useEffect will run only once when the component is mounted.
 // Hence this is helping us in verifying whether the user is already logged in
 // or not.
 useEffect(() => {
   loadUser(); // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 
 // This function gets fired when the user clicks on the "Login" button.
 const onSubmit = async (event) => {
   try {
     // Here we are passing user details to our emailPasswordLogin
     // function that we imported from our realm/authentication.js
     // to validate the user credentials and log in the user into our App.
     const user = await emailPasswordLogin(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
       if (error.statusCode === 401) {
          alert("Invalid username/password. Try again!");
      } else {
          alert(error);
      }
 
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Login</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Login
   </Button>
   <p>Don't have an account? <Link to="/signup">Signup</Link></p>
 </form>
}
 
export default Login;
```


## Create a signup page
Now our users can log into the application, but how do they sign up? Time to add a signup page!

**./src/pages/Signup.page.js**

```js
import { Button, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Signup = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // As explained in the Login page.
 const { emailPasswordSignup } = useContext(UserContext);
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // As explained in the Login page.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 
 // As explained in the Login page.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // As explained in the Login page.
 const onSubmit = async () => {
   try {
     const user = await emailPasswordSignup(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
     alert(error);
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Signup</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Signup
   </Button>
   <p>Have an account already? <Link to="/login">Login</Link></p>
 </form>
}
 
export default Signup;
```


## Create a homepage
Our homepage will be a basic page with a title and logout button.

**./src/pages/Home.page.js:**

```js
import { Button } from '@mui/material'
import { useContext } from 'react';
import { UserContext } from '../contexts/user.context';
 
export default function Home() {
 const { logOutUser } = useContext(UserContext);
 
 // This function is called when the user clicks the "Logout" button.
 const logOut = async () => {
   try {
     // Calling the logOutUser function from the user context.
     const loggedOut = await logOutUser();
     // Now we will refresh the page, and the user will be logged out and
     // redirected to the login page because of the <PrivateRoute /> component.
     if (loggedOut) {
       window.location.reload(true);
     }
   } catch (error) {
     alert(error)
   }
 }
 
 return (
   <>
     <h1>Welcome to Expengo</h1>
     <Button variant="contained" onClick={logOut}>Logout</Button>
   </>
 )
}
```


## Putting it all together in App.js
Let’s connect all of our pages in the root React component—App.

**./src/App.js**

```js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { UserProvider } from "./contexts/user.context";
import Home from "./pages/Home.page";
import Login from "./pages/Login.page";
import PrivateRoute from "./pages/PrivateRoute.page";
import Signup from "./pages/Signup.page";
 
function App() {
 return (
   <BrowserRouter>
     {/* We are wrapping our whole app with UserProvider so that */}
     {/* our user is accessible through out the app from any page*/}
     <UserProvider>
       <Routes>
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/signup" element={<Signup />} />
         {/* We are protecting our Home Page from unauthenticated */}
         {/* users by wrapping it with PrivateRoute here. */}
         <Route element={<PrivateRoute />}>
           <Route exact path="/" element={<Home />} />
         </Route>
       </Routes>
     </UserProvider>
   </BrowserRouter>
 );
}
 
export default App;
```


## Launch your React app
All have to do now is run the following command from your project directory:

```
npm start
```

Once the compilation is complete, you will be able to access your app from your browser at http://localhost:3000/. You should be able to sign up and log into your app now.

## Conclusion
Woah! We have made a tremendous amount of progress. Authentication is a very crucial part of any app and once that’s done, we can focus on features that will make our users’ lives easier. In the next part of this blog series, we’ll be leveraging App Services GraphQL to perform CRUD operations. I’m excited about that because the basic setup is already over.

If you have any doubts or concerns, please feel free to reach out to us on the MongoDB Community Forums. I have created a [dedicated forum topic](https://www.mongodb.com/community/forums/t/build-a-full-stack-app-using-mongodb-realm-graphql-without-worrying-about-servers-at-all/156840) for this blog where we can discuss anything related to this blog series.

And before you ask, here’s the [GitHub repository](https://github.com/sourabhbagrecha/expengo), as well!


Configuring signup and login authentication is a common step for nearly every web application. Learn how to set up email/password authentication in React using MongoDB Atlas App Services.

# 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 havean _id, category, mode, title, amount, author id, and a createdAt timestamp.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/expengo_data_model_d4a92fac05.png)

For example, a single expense document in the collection should look something like this:

```json
{
 "_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
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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/browse_collections_9c55069e61.png)

1. 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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/add_my_own_data_cdc352035d.png)
    
1. Once done, click on “Insert Document” on the next screen.

    ![Collections screen highlighting the "Insert Document" button](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/insert_document_b5eb01ba59.png)

    !["Insert to Collection" pop-up highlighting the JSON view button](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/insert_as_json_b398027a01.png)
    
1. Replace the content in the opened modal with the following:

    ```json
    {
     "_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:

    !["Insert to Collection" pop-up having the data to be inserted and highlighting the "Insert Button".](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/insert_document_to_collection_351dc9aa32.png)
    
## Generate Schema in your App Services based on your data stored in Atlas

[Schemas](https://www.mongodb.com/docs/atlas/app-services/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](https://www.mongodb.com/docs/atlas/app-services/graphql/) 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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/configure_schema_31f6e555ab.png)

Step 5: Click on “Generate schema from sampling.”

!["Generate Schema from expenses" screen highlighting the "Generate Schema from sampling" button.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/generate_schema_from_sample_0dd8f85af5.png)


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](https://www.mongodb.com/docs/atlas/app-services/schemas/types/#std-label-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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/review_schema_and_deploy_8d860813e1.png)

## 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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/set_up_rules_with_preset_role_954e411c9f.png)

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:

```json
{
  "author": {
    "%stringToOid": "%%user.id"
  }
}
```

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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/set_up_rules_df4c71f576.png)

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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/review_and_deploy_rules_18ea33d0c3.png)

## 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](https://www.mongodb.com/community/forums/t/build-a-full-stack-app-using-mongodb-realm-graphql-without-worrying-about-servers-at-all/156840) for this blog where you can discuss anything related to this blog series.

And before you ask, here’s the [GitHub Repository](https://github.com/sourabhbagrecha/expengo) for this tutorial series.



GraphQL gives clients the ability to request exactly the data they need, nothing more and nothing less. Learn how to perform CRUD operations using Atlas GraphQL API.

Adding the ability to perform CRUD—**C**reate, **R**ead, **U**pdate, and **D**elete—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 back-end, defines a schema that describes all the possible data that the client can request, and on the other hand, front-end clients can specifically request exactly the data that’s needed with a single request.

## What does Atlas GraphQL API provide?

Usually, to provide this flexibility to the clients, the server-side implementation may become very complex. To resolve data, we have to implement resolver functions. Each resolver function is responsible for resolving the data for a single field. To query database data and send it back to the client, we’d have to create and maintain a whole bunch of resolver functions.

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 Atlas App Services.

In this article of the blog series, we will implement the Read and Create functionality in our app using GraphQL.

## Install dependencies through npm

1. The [graphql-request](https://www.npmjs.com/package/graphql-request) package will help us communicate through GraphQL from our app.
2. The [@mui/lab](https://mui.com/material-ui/about-the-lab/) and [@mui/icons-material](https://mui.com/material-ui/material-icons/) package will help us in adding some complex UI elements to our app, like DatePicker.
3. The [date-fns](https://date-fns.org/) package will help us in doing simple date- and time-related calculations easily.

```bash 
npm i graphql-request @mui/lab @mui/icons-material date-fns
```

Let’s start by adding the GraphQL endpoint to our React app. We will append the endpoint in the following way in the file: ./src/realm/constants.js
```bash
export const APP_ID = “←Your App ID →”;
export const GRAPHQL_ENDPOINT = “←Your GraphQL Endpoint →”
```
## Extract the GraphQL endpoint from Atlas App Services
Click on the GraphQL tab in the left panel and then click on the “Copy” button in front of the GraphQL endpoint as shown in the image below:
![Atlas App Services tab highlighting the copy GraphQL Endpoint button.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image1_69c2711eff.png)

## Create a common Page Container
We will use this page container in all the pages so as to make all our pages look good and consistent across the app. Create a new file: *./src/components/PageContainer.component.js*

```javascript
import { Box, Paper, useTheme } from '@mui/material';
import React from 'react';

const PageContainer = (props) => {
  const theme = useTheme();
  return (<Box sx={{ backgroundColor: theme.palette.grey[200] }}>
    <Paper sx={{ maxWidth: "50rem", marginX: "auto", minHeight: "90vh", paddingX: "20px", paddingY: "10px" }}>
      {props.children}
    </Paper>
  </Box>
  )
}
export default PageContainer;
```
## Listing all user expenses on the home page
Refer to the comments in the code to get an understanding of what each of those functions is doing. File: *./src/pages/Home.page.js*

```javascript
import { useContext, useEffect, useState } from 'react';
import request, { gql } from 'graphql-request';
import PageContainer from "../components/PageContainer.component";
import { UserContext } from '../contexts/user.context';
import { GRAPHQL_ENDPOINT } from '../realm/constants';
import ExpenseCard from '../components/ExpenseCard.component';

const Home = () => {
  // Fetching user details from UserContext
  const { user } = useContext(UserContext);

  const [expenses, setExpenses] = useState([]);

  // GraphQL query to fetch all the expenses from the collection. 
  const getAllExpensesQuery = gql`
  query getAllExpenses {
    expenses(sortBy: CREATEDAT_DESC) {
      _id
      title
      amount
      mode
      category
      createdAt
    }
  }
  `;

  // Since we don't want to filter the results as of now,
  // we will just use the empty query object
  const queryVariables = {};

  // To prove that the identity of the user, we are attaching
  // an Authorization Header with the request
  const headers = { Authorization: `Bearer ${user._accessToken}` }

  // loadExpenses function is responsible for making the GraphQL
  // request to App Services and updating the expenses array from the response. 
  const loadExpenses = async () => {
    const resp = await request(GRAPHQL_ENDPOINT,
      getAllExpensesQuery,
      queryVariables,
      headers
    );
    setExpenses(_ => resp.expenses.map(expense => ({ ...expense, key: expense._id, afterDelete })));
  };

  useEffect(() => {
    loadExpenses();
  }, []);

  // Helper function invoked after an expense has been deleted.
  const afterDelete = () => {
    loadExpenses();
  }

  return <PageContainer>
    <h1>All Expenses</h1>
    {
      expenses.map(expense => <ExpenseCard {...expense} />)
    }
  </PageContainer>
}

export default Home;
```

## Display expense details
We will create an ExpenseCard component. We’ll use it as a list item on our home page to display the details of an expense, like title, amount, category, mode, and date.

*./src/components/ExpenseCard.component.js*

```javascript
import { Delete, Edit } from "@mui/icons-material";
import { Card, CardContent, Grid, IconButton, Typography } from "@mui/material";
import request, { gql } from "graphql-request";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
import { GRAPHQL_ENDPOINT } from "../realm/constants";

const ExpenseCard = ({ _id, title, amount, category, mode, createdAt, afterDelete }) => {
  const { user } = useContext(UserContext);

  // GraphQL query to delete an expense
  const deleteExpenseQuery = gql`
  mutation DeleteExpense($query: ExpenseQueryInput!) {
    deleteOneExpense(query: $query) {
      _id
    }
  }
  `;

  // Passing the expense-id in the query to delete a specific expense
  const queryVariables = { query: { _id } };

  const headers = { Authorization: `Bearer ${user._accessToken}` };

  // deleteThisExpense function is responsible for deleting the
  // expense based on the provided expense ID and then calling the
  // afterDelete function to do the cleanup. 
  const deleteThisExpense = async () => {

    // Confirming the user action
    const resp = window.confirm("Are you sure you want to delete this expense?");
    if (!resp) return;

    try {
      await request(GRAPHQL_ENDPOINT, deleteExpenseQuery, queryVariables, headers);
      afterDelete();
    } catch (error) {
      alert(error);
    }
  };

  return (
    <Card style={{ marginBottom: "1rem", paddingBottom: 0 }} elevation={1}>
      <CardContent>
        <Grid container>
          <Grid item xs={4}>
            <Typography variant='body2' color="text.secondary" gutterBottom>
              {category}
            </Typography>
            <Typography variant="h6" component={Link} to={`/expense/${_id}`}>
              {title}
            </Typography>
          </Grid>
          <Grid item xs={4}>
            <Typography variant="h6">
              ₹{amount}/-
            </Typography>
            <Typography variant="body1" color="text.secondary">
              {mode}
            </Typography>
          </Grid>
          <Grid item xs={4}>
            <Link to={`/expense/${_id}/edit`}>
              <IconButton color="primary">
                <Edit />
              </IconButton>
            </Link>
            <IconButton color="error" onClick={deleteThisExpense}>
              <Delete />
            </IconButton>
            <Typography variant="body1" color="text.secondary">
              {(new Date(createdAt)).toDateString()}
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

export default ExpenseCard;
```

## Create expense form
Next, we will provide the users the ability to add an expense on their behalf. Once added they will be redirected to the homepage. Create a new file: *./src/pages/CreateExpense.page.js*

```javascript
import { useContext, useState } from "react";
import PageContainer from "../components/PageContainer.component";
import { UserContext } from "../contexts/user.context";
import { gql, request } from "graphql-request";
import { GRAPHQL_ENDPOINT } from "../realm/constants";
import ExpenseForm from "../components/ExpenseForm.component";
import { useNavigate } from "react-router-dom";

const CreateExpense = () => {
  const { user } = useContext(UserContext);
  const navigate = useNavigate();

  // Some prefilled form state
  const [form, setForm] = useState({
    amount: "640",
    category: "Education",
    mode: "Credit Card",
    title: "Online Course",
    createdAt: new Date()
  });

  // GraphQL query to create an expense
  const createExpenseQuery = gql`
  mutation AddExpense($data: ExpenseInsertInput!) {
    insertOneExpense(data: $data) {
      _id
    }
  }
  `;

  // All the data that needs to be sent to the GraphQL endpoint
  // to create an expense will be passed through queryVariables.
  const queryVariables = {
    data: {
      title: form.title,
      amount: parseInt(form.amount),
      mode: form.mode,
      category: form.category,
      author: user.id,
      createdAt: form.createdAt
    }
  };

  // To prove that the identity of the user, we are attaching
  // an Authorization Header with the request
  const headers = { Authorization: `Bearer ${user._accessToken}` };

  const onSubmit = async (event) => {
    event.preventDefault();
    const { amount, category, mode, title } = form;
    if (amount.length === 0 || category.length === 0 || mode.length === 0 || title.length === 0) {
      return;
    }
    try {
      await request(GRAPHQL_ENDPOINT, createExpenseQuery, queryVariables, headers);

      // Navigate to the Home page after creating an expense
      navigate(`/`);
    } catch (error) {
      alert(error)
    }
  };

  return <PageContainer>
    <ExpenseForm onSubmit={onSubmit} form={form} setForm={setForm} title="Create Expense" />
  </PageContainer>
}

export default CreateExpense;
```


## Conclusion
Awesome! That’s all we needed to do in order to implement the Create and Read functionality in our app. In the next part, we will see how we can utilize the Update and Delete functionality provided by the Atlas GraphQL API in our React app.

You can post your doubts or any issues you faced on the [dedicated forum topic](https://www.mongodb.com/community/forums/t/build-a-full-stack-app-using-mongodb-realm-graphql-without-worrying-about-servers-at-all/156840) while following this tutorial. Also, check out the [GitHub repository$graphql-crud branch$](https://github.com/sourabhbagrecha/expengo/tree/graphql-crud) for this tutorial series.



This MongoDB Atlas GraphQL API tutorial will explain how to implement Create and Read operations in a React app.


Implement Read and Create Operations in React Using the Atlas GraphQL API CRUD

In the previous part of this tutorial series, we learned [how to implement Create and Read operations in a React app](https://www.mongodb.com/developer/products/atlas/create-read-operations-using-atlas-graphql-api/) using MongoDB’s Atlas GraphQL API. Let’s see how we can implement Update and Delete operations in our React app.

## What does Atlas GraphQL API provide?
MongoDB’s Atlas GraphQL API provides the ability to Create, Read, Update, and Delete the data for every linked collection that has a defined schema and permissions set up. We don’t have to implement the resolvers needed to perform basic CRUD operations on our own. Atlas GraphQL API analyses the schema and generates the basic resolvers automatically.

## Edit Expense Page
Here, we will first fetch the details of the expense that we want to update. Then, we will update the expense using a GraphQL mutation. The payload for the request will be the expense ID and the changes the user has made in the form. Create a new file: *./src/pages/NavBar.page.js*

```javascript
import { useContext, useEffect, useState } from "react";
import PageContainer from "../components/PageContainer.component";
import { UserContext } from "../contexts/user.context";
import { gql, request } from "graphql-request";
import { GRAPHQL_ENDPOINT } from "../realm/constants";
import ExpenseForm from "../components/ExpenseForm.component";
import { useParams, useNavigate } from "react-router-dom";

const EditExpense = () => {
  const { user } = useContext(UserContext);
  const [form, setForm] = useState({
    amount: "",
    category: "",
    mode: "",
    title: "",
    createdAt: new Date()
  });

  const { id: expenseId } = useParams();
  const navigate = useNavigate();

  const loadExpense = async () => {
    // GraphQL query to fetch the details of an expense
    // using the expenseId
    const getExpenseQuery = gql`
      query getExpense($query: ExpenseQueryInput!) {
        expense(query: $query) {
          _id
          title
          amount
          mode
          category
          createdAt
        }
      }
      `;

    const queryVariables = { query: { _id: expenseId } }

    const headers = { Authorization: `Bearer ${user._accessToken}` };

    const resp = await request(GRAPHQL_ENDPOINT, getExpenseQuery, queryVariables, headers);

    // Destructuring the values of the expense fetched
    // and auto-filling them into the form.
    const { title, mode, amount, category, createdAt } = resp?.expense;
    setForm({
      title,
      mode,
      amount: amount.toString(),
      category,
      createdAt
    });
  };

  useEffect(() => {
    loadExpense(); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onSubmit = async (event) => {
    event.preventDefault();
    const { amount, category, mode, title, createdAt } = form;

    // Checking if any of the values are empty before submitting.
    if (amount.length || category.length || mode.length || title.length) {
      return;
    }

    // GraphQL mutation to edit the details of an expense
    const editExpenseMutation = gql`
    mutation EditExpense($query: ExpenseQueryInput!, $set: ExpenseUpdateInput!) {
      updateOneExpense(query: $query, set: $set) {
        _id
      }
    }
    `;

    // Here, we will be including all the keys and their respective values needed
    // to fetch the exact expense and update it accordingly with
    // new values.
    const queryAndUpdateVariables = {
      query: {
        _id: expenseId
      },
      set: {
        title,
        amount: parseInt(amount),
        mode,
        category,
        createdAt
      },
    };

    const headers = { Authorization: `Bearer ${user._accessToken}` };

    try {
      await request(GRAPHQL_ENDPOINT, editExpenseMutation, queryAndUpdateVariables, headers);

      // Navigating to the homepage once the updates are sent and confirmed.
      navigate(`/`);
    } catch (error) {
      alert(error)
    }
  };

  return <PageContainer>
    <ExpenseForm onSubmit={onSubmit} form={form} setForm={setForm} editing />
  </PageContainer>
}

export default EditExpense;

```

## Reusable expense form component
Create Expense and Update Expense pages are going to have the same fields. We are creating a reusable Expense Form component that can be utilized by both pages. 

Let’s create a new file: *./src/components/ExpenseForm.component.js*
```javascript
import { Button, TextField } from "@mui/material";
import CustomDatePicker from "./CustomDatePicker.component";
import PageContainer from "./PageContainer.component";

const ExpenseForm = ({ onSubmit, form, setForm, editing }) => {
  const onFormInputChange = (event) => {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value });
  };

  return <PageContainer>
    <form onSubmit={onSubmit} style={{ maxWidth: "400px", margin: "auto" }}>
      <h1>{editing ? "Edit expense" : "Create Expense"}</h1>
      <TextField
        label="Title"
        type="text"
        variant="outlined"
        name="title"
        value={form.title}
        onChange={onFormInputChange}
        fullWidth
        style={{ marginBottom: "1rem" }} />
      <TextField
        label="Amount"
        type="number"
        variant="outlined"
        name="amount"
        value={form.amount}
        onChange={onFormInputChange}
        fullWidth
        style={{ marginBottom: "1rem" }} />
      <TextField
        label="Mode"
        type="text"
        variant="outlined"
        name="mode"
        value={form.mode}
        onChange={onFormInputChange}
        fullWidth
        style={{ marginBottom: "1rem" }} />
      <TextField
        label="Category"
        type="text"
        variant="outlined"
        name="category"
        value={form.category}
        onChange={onFormInputChange}
        fullWidth
        style={{ marginBottom: "1rem" }} />
      <CustomDatePicker
        label="Date"
        value={form.createdAt}
        onChange={(v) => { setForm({ ...form, createdAt: v }) }}
        style={{ marginBottom: "1rem", display: "block" }}
      />
      <Button variant="contained" color="primary" onClick={onSubmit} type="submit">
        {editing ? "Update" : "Create"} Expense
      </Button>
    </form>
  </PageContainer>;
}

export default ExpenseForm;
```

## Reusable custom date picker component
Let’s create a reusable custom date picker. We can utilize this in our ExpenseForm as well as in our Analytics Dashboard that we are going to create later in this blog series. 

Create a new file: *./src/components/CustomDatePicker.component.js*
```javascript
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';

const CustomDatePicker = ({ label, value, onChange, style }) => {
  return (
    <span style={style}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label={label}
          value={value}
          onChange={onChange}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </span>
  );
};

export default CustomDatePicker;
```

## Navigation bar
To navigate between different pages and features, we need a unified navigation menu to make sure that every portion of the app is accessible from anywhere. Create a new file: *./src/components/NavBar.component.js*

```javascript
import { useContext, useState } from 'react';
import { AppBar, Box, Toolbar, Typography, Button, IconButton, Drawer, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
import { Menu as MenuIcon, Add, PieChart, Logout, Home } from '@mui/icons-material/';
import { Link } from 'react-router-dom';
import { UserContext } from '../contexts/user.context';

const NavBar = () => {
  const [show, setShow] = useState(false);
  const toggleDrawer = (event) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setShow(show => !show);
  };
  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component={Link} to="/" sx={{ flexGrow: 1, textDecoration: "none", color: "white" }}>
            Expengo
          </Typography>
          <Button color="success" variant="contained" startIcon={<Add />} component={Link} to="/new">Add Expense</Button>
        </Toolbar>
      </AppBar>
      <TemporaryDrawer show={show} setShow={setShow} toggleDrawer={toggleDrawer} />
    </>
  );
};

const TemporaryDrawer = (props) => {
  const { show, toggleDrawer } = props;
  const { logOutUser } = useContext(UserContext);

  const logOut = async () => {
    await logOutUser();
    window.location.reload(true);
    return;
  }

  const navLinks = [
    {
      text: 'Home',
      Icon: Home,
      link: '/',
    },
    {
      text: 'Add Expense',
      Icon: Add,
      link: '/new',
    },
    {
      text: 'Analytics Dashboard',
      Icon: PieChart,
      link: '/analytics',
    },
    {
      text: 'Logout',
      Icon: Logout,
      action: logOut,
    },
  ];

  const DrawerList = () => (
    <Box
      sx={{ width: 250 }}
      role="presentation"
      onClick={toggleDrawer}
      onKeyDown={toggleDrawer}
    >
      <List>
        {
          navLinks.map(({ text, Icon, link, action }) => {
            return link ?
              <Link to={link} style={{ textDecoration: "none", color: "inherit" }} key={text}>
                <ListItem button>
                  <ListItemIcon>
                    <Icon />
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
              </Link>
              :
              <ListItem button onClick={action} key={text}>
                <ListItemIcon>
                  <Icon />
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
          })
        }
      </List>
    </Box>
  );

  return (
    <div>
      <Drawer
        open={show}
        onClose={toggleDrawer}
      >
        {<DrawerList />}
      </Drawer>
    </div>
  );
}

export default NavBar;
```

## Putting it all together in App.js
Let’s add all the new pages we introduced recently in the main router so that we can navigate across different pages in our React app smoothly.
```javascript
import { BrowserRouter, Route, Routes } from "react-router-dom";
import NavBar from "./components/NavBar.component";
import { UserProvider } from "./contexts/user.context";
import CreateExpense from "./pages/CreateExpense.page";
import EditExpense from "./pages/EditExpense.page";
import Home from "./pages/Home.page";
import Login from "./pages/Login.page";
import PrivateRoute from "./pages/PrivateRoute.page";
import Signup from "./pages/Signup.page";

function App() {
  return (
    <BrowserRouter>
      {/* We are wrapping our whole app with UserProvider so that */}
      {/* our user is accessible through out the app from any page*/}
      <UserProvider>
        <NavBar />
        <Routes>
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/signup" element={<Signup />} />
          {/* We are protecting our Home Page from unauthenticated */}
          {/* users by wrapping it with PrivateRoute here. */}
          <Route element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/new" element={<CreateExpense />} />
            <Route exact path="/expense/:id/edit" element={<EditExpense />} />
          </Route>
        </Routes>
      </UserProvider>
    </BrowserRouter>
  );
}

export default App;
```

## Conclusion
Awesome! That’s all we needed to do in order to introduce Update and Delete functionality into our React app using MongoDB’s Atlas GraphQL API.

Join the discussion on [MongoDB forums](https://www.mongodb.com/community/forums/) for this blog series and feel free to post any doubts and concerns. Wanna take look at the source code? Check out this [GitHub repository(graphql-crud)](https://github.com/sourabhbagrecha/expengo/tree/graphql-crud) to see it.

This MongoDB Atlas GraphQL API tutorial explains how to implement Update and Delete operations in a React app.

Implement Update and Delete Operations in React Using the Atlas GraphQL API 

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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image12_f85a817c1b.png)

## 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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/analytics_screen_7192d7fdda.png)

## Create MongoDB Atlas functions for the category and mode analytics
An [Atlas function](https://www.mongodb.com/docs/atlas/app-services/functions/) 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](https://www.mongodb.com/docs/atlas/app-services/functions/context/) 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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image1_44f908ffa2.png)

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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image2_13432dc655.png)

### 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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image15_4d0dd12d15.png)

Replace the implementation with the following JavaScript function:
```javascript
exports = async (input) => {
  // Extract the ‘from’ and ‘to’ dates from the input argument, passed by the custom resolver 
  const {from, to} = input;
  const collection = context.services.get('mongodb-atlas').db('expengo').collection('expenses');
  const user = context.user.id;
  
  // Define a pipeline that matches the current author and the timeline mentioned in the input query,
  // and then add the amounts by category. 
  const pipeline = [
    {
      $match: {
        author: new BSON.ObjectId(user), 
        createdAt: {$gte: new Date(from), $lte: new Date(to)}
      }
    }, 
    {
      $group: {
        _id: "$category", 
        amount: {$sum: "$amount"}
      }
    }, 
    {
      $project: {
        category: "$_id", 
        amount: 1, 
        _id: 0
      }
    }
  ];
  const categories = await collection.aggregate(pipeline).toArray();
  return { categories };
};
```
After the code is replaced, click on Save Draft as shown below:
![Function Editor Screen highlighting the newly pasted function code.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image14_1d1fb6be84.png)

### 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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image10_019d480219.png)

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.
```javascript
exports = async (input) => {
  const {from, to} = input;
  const collection = context.services.get('mongodb-atlas').db('expengo').collection("expenses");
  const user = context.user.id;
  
  // Pipeline to filter relevant expenses as per the date range
  // and group them by the mode name and calculate the total amount
  // per mode.
  const pipeline = [
    {
      $match: {
        author: new BSON.ObjectId(user), 
        createdAt: {$gte: new Date(from), $lte: new Date(to)}
      }
    }, 
    {
      $group: {
        _id: "$mode", 
        amount: {$sum: "$amount"}
      }
    }, 
    {
      $project: {
        mode: "$_id", 
        amount: 1, 
        _id: 0
      }
    }
  ];
  const modes = await collection.aggregate(pipeline).toArray();
  return { modes };
};
```
## 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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image3_74c858cbbc.png)

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):
```json
{
  "type": "object",
  "title": "filter",
  "properties": {
    "from": {
      "bsonType": "timestamp"
    },
    "to": {
      "bsonType": "timestamp"
    }
  }
}
```
* **Payload Type:** Custom Type (select all text and then paste the following in the text field)
```json
{
  "type": "object",
  "title": "CategoryAnalyticsOutput",
  "properties": {
    "categories": {
      "bsonType": "array",
      "items": {
        "bsonType": "object",
        "title": "categoryAnalyticsItem",
        "properties": {
          "category": {
            "bsonType": "string"
          },
          "amount": {
            "bsonType": "int"
          }
        }
      }
    }
  }
}
```

![Create Custom Resolver screen highlighting the GraphQL Field Name, Parent Type, Function & Input Type field](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image8_cafb455652.png)

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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image11_eacf05dee4.png)

### 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](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image5_3027438434.png)

* **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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image6_8788eef5b5.png)

* **Payload Type:** Custom Type (select all text and then paste the following in the text field):
```json
{
  "type": "object",
  "title": "ModeAnalyticsOutput",
  "properties": {
    "modes": {
      "bsonType": "array",
      "items": {
        "bsonType": "object",
        "title": "modeAnalyticsItem",
        "properties": {
          "mode": {
            "bsonType": "string"
          },
          "amount": {
            "bsonType": "int"
          }
        }
      }
    }
  }
}
```
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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image9_854f25f2b1.png)

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.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image7_9ac6171327.png)

## 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.


Learn how to utilize MongoDB Aggregation Pipelines via a GraphQL API and perform advanced analytics on the data stored in our database.

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

Data is useless, at least on its own.

It’s really difficult to understand the real meaning of raw data without extracting meaningful insights and information through proper visualizations.

In the [previous part of our blog series](https://www.mongodb.com/developer/products/atlas/analytics-using-atlas-graphql-api-custom-resolver/), we learned how to create custom resolvers for GraphQL that allow us to perform advanced analytics. In this part, we will learn how to create an analytics dashboard to display those insights from our database in a React app.

![Analytics Dashboard implemented in React using data fetched from Atlas GraphQL API](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/image1_ca50b6968c.png)

## Creating visualizations in React with Google Charts

To make our lives easier and instead of reinventing the wheel, we will use the React-Google-Charts library to create visualizations of the analytics data that we fetch from our Custom Resolvers for GraphQL. Run the following command to install:

``` bash
npm i react-google-charts
```

## Querying a GraphQL custom resolver

We’ll create an analytics home page where we can track all the modes and categories and see where and how we are spending money in a consolidated view. By default, we are fetching the last month’s analytics but the user can customize it as per their needs by using the custom date picker placed on top of the analytics page.

Lines 28-43 are the most important part of the analytics page. It is the GraphQL query that we are using to fetch the data from the custom resolvers we created in the previous part of this blog series.
Create a new file: *./src/pages/Analytics.page.js*

``` javascript
import { useContext, useEffect, useState } from "react";
import { Button, Grid } from "@mui/material";
import request, { gql } from "graphql-request";
import { formatISO, subMonths, endOfToday, startOfDay, endOfDay } from "date-fns";
import { UserContext } from "../contexts/user.context";
import { GRAPHQL_ENDPOINT } from "../realm/constants";
import PageContainer from "../components/PageContainer.component";
import CustomDatePicker from "../components/CustomDatePicker.component";
import ModeAnalytics from "../components/ModeAnalytics.component";
import CategoryAnalytics from "../components/CategoryAnalytics.component";

const Analytics = () => {
  // By default we would like to fetch the analytics for the last month.
  // So we will take the fromDate as today minus 1 month and
  // the toDate as today.
  const today = endOfToday();
  const oneMonthAgo = subMonths(today, 1);
  const [fromDate, setFromDate] = useState(oneMonthAgo);
  const [toDate, setToDate] = useState(today);

  const { user } = useContext(UserContext);
  const [analyticsData, setAnalyticsData] = useState(null);


  const loadAnalytics = async () => {

    // GraphQL query to fetch mode analytics as well as the category analytics.
    const getAnalyticsQuery = gql`
      query getAnalytics($query: Filter!) {
        modeAnalytics(input: $query) {
          modes {
            amount
            mode
          }
        }
        categoryAnalytics(input: $query) {
          categories {
            amount
            category
          }
        }
      }
    `;

    // Query variables that will be used to perform the analytics from a particular 
    // date to a particular date.
    const queryVariables = { query: { from: formatISO(startOfDay(fromDate)), to: formatISO(endOfDay(toDate)) } };

    const headers = { Authorization: `Bearer ${user._accessToken}` };

    try {
      const resp = await request(GRAPHQL_ENDPOINT, getAnalyticsQuery, queryVariables, headers);
      const { modeAnalytics: { modes }, categoryAnalytics: { categories } } = resp;
      setAnalyticsData({ modes, categories });
    } catch (error) {
      alert(error);
    }
  };

  useEffect(() => {
    loadAnalytics(); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <PageContainer>
      <h1>Analytics Home</h1>
      <CustomDatePicker label="From" value={fromDate} onChange={setFromDate} style={{ marginRight: "2rem" }} />
      <CustomDatePicker label="To" value={toDate} onChange={setToDate} style={{ marginRight: "2rem" }} />
      <Button onClick={loadAnalytics} variant="contained" style={{ margin: "0 auto" }} size="large">Refresh</Button>
      {analyticsData && <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <ModeAnalytics data={analyticsData.modes} />
        </Grid>
        <Grid item xs={12} md={6}>
          <CategoryAnalytics data={analyticsData.categories} />
        </Grid>
      </Grid>}
    </PageContainer>
  );
}

export default Analytics;
```

### Visualize the spent amount with a pie chart

The Mode Analytics component is used to visualize the amount we are spending using different modes of payment. Each expense in our app will have a “mode” attribute in it, like UPI, Credit Card, Cash, etc. Create a new file: *./src/components/ModeAnalytics.component.js*

``` javascript
import Chart from "react-google-charts";

const ModeAnalytics = ({ data }) => {
  const chartData = [["Mode", "Amount"]];
  data.forEach(({ mode, amount }) => {
    chartData.push([mode, amount]);
  });
  return <>
    <h3>Mode Analytics</h3>
    <Chart
      chartType="PieChart"
      data={chartData}
      width={"100%"}
      height={"400px"}
    />
  </>
}

export default ModeAnalytics;
```

### Visualize spent amount per category

The Category Analytics component is used to visualize the amount of money we are spending on different categories. Each expense in our app will have a “category” attribute in it, like Education, Travel, Entertainment, etc. Create a new file: *./src/components/CategoryAnalytics.component.js*

``` javascript
import Chart from "react-google-charts";

const CategoryAnalytics = ({ data }) => {
  const chartData = [["Category", "Amount"]];
  data.forEach(({ category, amount }) => {
    chartData.push([category, amount]);
  });
  return <>
    <h3>Category Analytics</h3>
    <Chart
      chartType="PieChart"
      data={chartData}
      width={"100%"}
      height={"400px"}
    />
  </>
}

export default CategoryAnalytics;
```

## Putting it all together in the App.js file

Now we will add our analytics page in our routes so that the user can navigate to the analytics from anywhere in the app.

``` javascript
import { BrowserRouter, Route, Routes } from "react-router-dom";
import NavBar from "./components/NavBar.component";
import { UserProvider } from "./contexts/user.context";
import Analytics from "./pages/Analytics.page";
import CreateExpense from "./pages/CreateExpense.page";
import EditExpense from "./pages/EditExpense.page";
import Home from "./pages/Home.page";
import Login from "./pages/Login.page";
import PrivateRoute from "./pages/PrivateRoute.page";
import Signup from "./pages/Signup.page";

function App() {
  return (
    <BrowserRouter>
      {/* We are wrapping our whole app with UserProvider so that */}
      {/* our user is accessible through out the app from any page*/}
      <UserProvider>
        <NavBar />
        <Routes>
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/signup" element={<Signup />} />
          {/* We are protecting our Home Page from unauthenticated */}
          {/* users by wrapping it with PrivateRoute here. */}
          <Route element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/new" element={<CreateExpense />} />
            <Route exact path="/expense/:id/edit" element={<EditExpense />} />
            <Route exact path="/analytics" element={<Analytics />} />
          </Route>
        </Routes>
      </UserProvider>
    </BrowserRouter>
  );
}

export default App;
```

## Conclusion

That’s it. We have implemented a fully functional analytics dashboard in React. We were able to utilize the custom resolvers for Atlas GraphQL API we created for fetching and performing complex calculations that were beyond regular CRUD operations.

In the next part, we will see how we can utilize [website/single-page-apps hosting provided by Atlas App Services Static Hosting](https://medium.com/@sourabhbagrecha/host-deploy-your-react-js-web-app-on-mongodb-realm-a64eda9b6993) to host our expengo app, which will make our app accessible from anywhere in the world.

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](https://www.mongodb.com/community/forums/t/build-a-full-stack-app-using-mongodb-realm-graphql-without-worrying-about-servers-at-all/156840) for this blog where we can discuss anything related to this blog series.

And before you ask, here’s the [GitHub repository (custom-resolvers branch)](https://github.com/sourabhbagrecha/expengo/tree/custom-resolvers) for this tutorial series.

Learn how to create charts to show insights based on user data in React.