How to get "activeSubscriptions status" (React & GraphQL)

[ken001]

How to get "activeSubscriptions status"?

I couldn't get "activeSubscriptions status" by GraphQL.

I tried to use @Shopify/react-graphql package.
https://www.npmjs.com/package/@shopify/react-graphql

 

_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, refetch } = 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>
}


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;

[alanthai]

Hi ken001,

I'm not sure if this'll solve your issues, but you I noticed you're re-instantiating your ApolloClient on every render. Try instantiating the client outside of your component, or wrapping it in a useMemo. Your app might be trying to re-fetch the query every time it sees a new client.