Is there a good tutorial or examples of "Approve fees" page again?

[ken001]

I'd like to check the app subscription status on the front page.
If the app subscription status isn't "ACTIVE", I'd like to show a modal to go to the billing page.

However, I could not get the subscription status of the app in "_app.js" using GraphQL.
The data retrieved by GraphQL is "undefined".

 

How can I check the app subscription status on the front page?

my code "_app.js"

import React from 'react';
import {render} from 'react-dom';
import {ApolloClient, createHttpLink, InMemoryCache, useQuery} from '@apollo/client';
import gql from 'graphql-tag';
import {ApolloProvider} from '@shopify/react-graphql';
import App from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider, useAppBridge } from "@shopify/app-bridge-react";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { Redirect } from "@shopify/app-bridge/actions";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import { useEffect, useState } from "react";
import SubscriptionRedirectModal from "../components/core/SubscriptionRedirectModal";
import { useAxios } from "../hooks/useAxios";


function MyProvider(props) {
  const app = useAppBridge();

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: createHttpLink({
      credentials: "include",
      headers: {
        "Content-Type": "application/graphql",
      },
      fetch: authenticatedFetch(app),
    }),
  });

  const GET_SUBSCRIPTION_STATUS = gql`
  query {
    currentAppInstallation {
      activeSubscriptions {
        status
      }
    }
  }
  `;
  const { data, loading } = useQuery(GET_SUBSCRIPTION_STATUS, { client: client });
  console.log("useQuery data: " + data +" loading: " + loading);
  

  const [subscriptionStatus, setSubscriptionStatus] = useState(false);
  const [showUi, setShowUi] = useState(false);
  const [subscriptionUrl, setSubscriptionUrl] = useState("");

  const Component = props.Component;
  return <ApolloProvider client={client}>
      <Component {...props} showUi={showUi} />
    </ApolloProvider>
  /*const [axios] = useAxios();
  async function getAppSubscriptionStatus() {
    const { data } = await axios.get(`${HOST}/api/subscription/status`);
     
     if (!data) {
       const { data } = await axios.get(`${HOST}/api/subscription/url`);
       setSubscriptionUrl(data);
        setSubscriptionStatus(true);
       setShowUi(false);
       console.log("setShowUI false ");
     } else {
      console.log("setShowUI true");
       setShowUi(true);
     }
   }
   useEffect(() => {
      getAppSubscriptionStatus();
      console.log("getAppSubscriptionStatus");
   }, []);
   
  const Component = props.Component;

   return subscriptionStatus ? (
   <SubscriptionRedirectModal
   subscriptionStatus={subscriptionStatus}
   subscriptionUrl={subscriptionUrl}
   app={app}
   />
   ) : showUi ? (
    <ApolloProvider client={client}>
      <Component {...props} showUi={showUi} />
    </ApolloProvider>
   ) : (
   ""
   );*/
}


class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin, host } = this.props;
    const config = { apiKey: API_KEY, shopOrigin, host, forceRedirect: true };

    return (
      <AppProvider i18n={translations}>
        <Provider config={config}>
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

MyApp.getInitialProps = async ({ ctx }) => {
  return { shopOrigin: ctx.query.shop, host: ctx.query.host };
};

export default MyApp;

I referred to the following Github and other sources.

1. https://github.com/arunjithrs/Shopify-Admin-Control-Bar/blob/main/pages/_app.js
2. https://github.com/Shopify/quilt/blob/main/packages/react-graphql/README.md
3. https://github.com/Shopify/shopify-app-node/issues/628
4. https://community.shopify.com/c/shopify-apis-and-sdks/if-the-user-hasn-t-accepted-the-charge-yet-or-...