A space to discuss GraphQL queries, mutations, troubleshooting, throttling, and best practices.
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;
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.
To learn more visit the Shopify Help Center or the Community Blog.