text: import ApolloClient from "apollo-boost";
  import { ApolloProvider } from "react-apollo";
  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 "@shopify/polaris/dist/styles.css";
  import translations from "@shopify/polaris/locales/en.json";
  import './styleconfig.css';
  
  function MyProvider(props) {
    const app = useAppBridge();
  
    const client = new ApolloClient({
      fetch: authenticatedFetch(app),
      fetchOptions: {
        credentials: "include",
      },
    });
  
    const Component = props.Component;
  
    return (
      <ApolloProvider client={client}>
        <Component {...props} />
      </ApolloProvider>
    );
  }
  
  class MyApp extends App {
    render() {
      const { Component, pageProps, shopOrigin } = this.props;
      return (
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: true,
            }}
          >
            <MyProvider Component={Component} {...pageProps} />
          </Provider>
        </AppProvider>
      );
    }
  }
  
  MyApp.getInitialProps = async ({ ctx }) => {
    return {
      shopOrigin: ctx.query.shop,
    };
  };
  
  export default MyApp;
  