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

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

GraphQL React Atlas JavaScript

Rate this tutorial

Adding the ability to perform CRUD—Create, Read, Update, and Delete—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

The graphql-request package will help us communicate through GraphQL from our app.
The @mui/lab and @mui/icons-material package will help us in adding some complex UI elements to our app, like DatePicker.
The date-fns package will help us in doing simple date- and time-related calculations easily.

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

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:

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

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

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

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

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 while following this tutorial. Also, check out the GitHub repository(graphql-crud branch) for this tutorial series.

Rate this tutorial

Tutorial

Maintaining a Geolocation Specific Game Leaderboard with Phaser and MongoDB

Feb 03, 2023

Quickstart

Creating an API with the AWS API Gateway and the Atlas Data API

Aug 26, 2022

Article

Building Service-Based Atlas Cluster Management

Sep 23, 2022