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 { Redirect } from "@shopify/app-bridge/actions";
  import "@shopify/polaris/dist/styles.css";
  import translations from "@shopify/polaris/locales/en.json";
  
  import './Components/Toolbar/Toolbar.css';
  import './Components/Toolbar/ContributorToolbar.css';
  import './Components/Toolbar/NgoToolbar.css';
  import './Components/Toolbar/MerchantToolbar.css';
  
  import './Components/PageHeader/PageHeader.css';
  import './Components/PageHeader/ContributorPageHeader.css';
  import './Components/DrawerToggleButton/DrawerToggleButton.css';
  
  import './Components/SideDrawer/SideDrawer.css';
  import './Components/SideDrawer/ContributorSideDrawer.css';
  import './Components/SideDrawer/NgoSideDrawer.css';
  import './Components/SideDrawer/MerchantSideDrawer.css';
  
  import './Components/Backdrop/Backdrop.css';
  
  import './Components/CssFiles/drawingBlock.css';
  
  import './Components/CssFiles/Index.css';
  import './Components/CssFiles/Beneficiary.css';
  import './Components/CssFiles/Contributor.css';
  import './Components/CssFiles/ContributorInfo.css';
  import './Components/CssFiles/Ngo.css';
  import './Components/CssFiles/NgoInfo.css';
  import './Components/CssFiles/Merchant.css';
  import './Components/CssFiles/MerchantInfo.css';
  
  function userLoggedInFetch(app) {
    const fetchFunction = authenticatedFetch(app);
  
    return async (uri, options) => {
      const response = await fetchFunction(uri, options);
  
      if (
        response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1"
      ) {
        const authUrlHeader = response.headers.get(
          "X-Shopify-API-Request-Failure-Reauthorize-Url"
        );
  
        const redirect = Redirect.create(app);
        redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
        return null;
      }
  
      return response;
    };
  }
  
  function MyProvider(props) {
    const app = useAppBridge();
  
    const client = new ApolloClient({
      fetch: userLoggedInFetch(app),
      fetchOptions: {
        credentials: "include",
      },
    });
  
    const Component = props.Component;
  
    return (
      <ApolloProvider client={client}>
        <Component {...props} />
      </ApolloProvider>
    );
  }
  
  class MyApp extends App {
    render() {
      const { Component, pageProps, host } = this.props;
      return (
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              host: host,
              forceRedirect: true,
            }}
          >
            <MyProvider Component={Component} {...pageProps} />
          </Provider>
        </AppProvider>
      );
    }
  }
  
  MyApp.getInitialProps = async ({ ctx }) => {
    return {
      host: ctx.query.host,
    };
  };
  
  export default MyApp;
  