REST API Calls With React Hooks and NextJS

[XscapeCo]

How to use the the REST API using React Hooks and the example in the Shopify Dev article here https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with...

My issue is that the GraphQL API doesn't have all the endpoints I need.

I have this in my server.js 

require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const { default: Shopify, ApiVersion } = require('@shopify/shopify-api');
const Router = require('koa-router');

dotenv.config();

Shopify.Context.initialize({
    API_KEY: process.env.SHOPIFY_API_KEY,
    API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
    SCOPES: process.env.SHOPIFY_API_SCOPES.split(","),
    HOST_NAME: process.env.SHOPIFY_APP_URL.replace(/https:\/\//, ""),
    API_VERSION: ApiVersion.October20,
    IS_EMBEDDED_APP: true,
    SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const ACTIVE_SHOPIFY_SHOPS = {};

app.prepare().then(() => {
    const server = new Koa();
    const router = new Router();
    server.keys = [Shopify.Context.API_SECRET_KEY];

    server.use(
        createShopifyAuth({
            afterAuth(ctx) {
                const { shop, scope } = ctx.state.shopify;
                ACTIVE_SHOPIFY_SHOPS[shop] = scope;

                ctx.redirect(`/?shop=${shop}`);
            },
        }),
    );

    router.post("/graphql", verifyRequest({ returnHeader: true }), async(ctx, next) => {
        await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
    });

    const handleRequest = async(ctx) => {
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
    };

    router.get("/", async(ctx) => {
        const shop = ctx.query.shop;

        if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
            ctx.redirect(`/auth?shop=${shop}`);
        } else {
            await handleRequest(ctx);
        }
    });



    router.get("(/_next/static/.*)", handleRequest);
    router.get("/_next/webpack-hmr", handleRequest);
    router.get("(.*)", verifyRequest(), handleRequest);

    server.use(router.allowedMethods());
    server.use(router.routes());

    server.listen(port, () => {
        console.log(`> Ready on http://localhost:${port}`);
    });
});

I'm attempting to make a REST API call on a button click by setting the state.

import React, { useCallback, useRef, useState } from 'react';
//import { useRouter } from "next/router";
import { Caption,FormLayout, TextField, ButtonGroup, Card, Popover, OptionList, Button, Layout, Page, TextStyle } from '@shopify/polaris';
//import {HomeMajor, QuestionMarkMajor, SettingsMajor, ChatMajor} from '@shopify/polaris-icons';


import { Editor } from '@tinymce/tinymce-react';

    
   
      export default function Index () {

   (...states and state handlers are in this section)

    return ( 
    
  <Page>
( ....page layouts, forms and buttons are here)
    </Page>
        
    );

}

I've tried added endpoint from my frontend that make calls to router.get on my backend but that haven't worked.