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

Sourabh BagrechaPublished Nov 01, 2022 • Updated Nov 01, 2022

React Atlas JavaScript

Rate this tutorial

In the previous part of this tutorial series, we learned how to implement Create and Read operations in a React app 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

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

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

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

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.

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 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) to see it.

Rate this tutorial

Tutorial

WhatsApp Business API Webhook Integration with Data API

Apr 05, 2023

Tutorial

Visualize MongoDB Atlas Database Audit Logs

Oct 06, 2022

Article

Conference Transcription and Replay - Build a Serverless GraphQL API with MongoDB Realm

Mar 21, 2023

Article

Exact Matches in Atlas Search: Beginners Guide

Aug 30, 2022

What does Atlas GraphQL API provide?
Edit Expense Page
Reusable expense form component
Reusable custom date picker component
Navigation bar
Putting it all together in App.js
Conclusion

Atlas