Getting real-time updates with Subscriptions with ReactJS

In this section, we will show you how to use Subscriptions in GraphQL. Subscriptions are used to query the database and listen to changes in the data to provide instant updates when that happens. They do this by maintaining an active connection with the database. Subscriptions are useful for tasks such as producing real-time notifications when something has changed in the database.

Let's open the App.jsx file and add the following code:

1. Import the autogenerated subscriptions library at the top of the App.jsx file, as follows:

   import React, { useEffect, useState, SetStateAction } from "react";
   import "./App.css";
   import Amplify, { API, graphqlOperation } from "aws-amplify";
   import * as mutations from "./graphql/mutations";
   import * as queries from "./graphql/queries";
   import * as subscriptions from "./graphql/subscriptions";
   import awsExports from "...