Remove temporary ApolloClientInvalidTokenLinkAdapter

src/@sdk/auth.ts

@@ -1,4 +1,3 @@
-import { ApolloClient } from "apollo-client";
 import { ApolloLink } from "apollo-link";
 import { setContext } from "apollo-link-context";
 import { ErrorResponse, onError } from "apollo-link-error";
@@ -18,21 +17,6 @@ export function setAuthToken(token: string) {
   dispatchEvent(authEvent);
 }
 
-export function clearStorage(): void {
-  localStorage.clear();
-  dispatchEvent(authEvent);
-}
-
-export function fireSignOut(client?: ApolloClient<any>): void {
-  clearStorage();
-  if (navigator.credentials && navigator.credentials.preventSilentAccess) {
-    navigator.credentials.preventSilentAccess();
-  }
-  if (client) {
-    client.resetStore();
-  }
-}
-
 interface ResponseError extends ErrorResponse {
   networkError?: Error & {
     statusCode?: number;

src/@sdk/react/components/SaleorProvider/SaleorProvider.tsx

@@ -1,24 +1,46 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { SaleorManager } from "../../../";
 import { SaleorAPI } from "../../../api";
 import { SaleorContext } from "../../context";
 import { IProps } from "./types";
 
+import { invalidTokenLinkWithTokenHandler } from "@sdk/auth";
+
 export function SaleorProvider<TCacheShape = any>({
-  client,
   config,
   children,
+  attachApolloClient,
 }: IProps<TCacheShape>): React.ReactElement<IProps<TCacheShape>> {
   const [context, setContext] = useState<SaleorAPI | null>(null);
+  const [tokenExpired, setTokenExpired] = useState(false);
+
+  const tokenExpirationCallback = () => {
+    setTokenExpired(true);
+  };
+
+  const apolloClient = React.useMemo(() => {
+    const { link: invalidTokenLink } = invalidTokenLinkWithTokenHandler(
+      tokenExpirationCallback
+    );
+
+    return attachApolloClient(invalidTokenLink);
+  }, []);
+
+  useEffect(() => {
+    if (tokenExpired) {
+      context?.auth.signOut();
+      setTokenExpired(false);
+    }
+  }, [tokenExpired, context]);
 
   useMemo(() => {
-    const manager = new SaleorManager(client, config);
+    const manager = new SaleorManager(apolloClient, config);
 
     manager.connect(saleorAPI => setContext({ ...saleorAPI }));
 
     return manager;
-  }, [client]);
+  }, [apolloClient]);
 
   return (
     <SaleorContext.Provider value={context}>

src/@sdk/react/components/SaleorProvider/types.ts

@@ -1,9 +1,12 @@
 import ApolloClient from "apollo-client";
+import { ApolloLink } from "apollo-link";
 
 import { Config } from "@sdk/types";
 
 export interface IProps<TCacheShape> {
   children: React.ReactElement;
   config?: Config;
-  client: ApolloClient<TCacheShape>;
+  attachApolloClient: (
+    invalidTokenLink: ApolloLink
+  ) => ApolloClient<TCacheShape>;
 }

src/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "apollo-cache-inmemory";
 import { persistCache } from "apollo-cache-persist";
 import { ApolloClient } from "apollo-client";
+import { ApolloLink } from "apollo-link";
 import * as React from "react";
 import { positions, Provider as AlertProvider, useAlert } from "react-alert";
 import { ApolloProvider } from "react-apollo";
@@ -36,11 +37,7 @@ import {
 import { history } from "./history";
 
 import { createSaleorClient } from "./@sdk";
-import {
-  authLink,
-  fireSignOut,
-  invalidTokenLinkWithTokenHandler,
-} from "./@sdk/auth";
+import { authLink } from "./@sdk/auth";
 
 const cache = new InMemoryCache({
   dataIdFromObject: obj => {
@@ -70,27 +67,6 @@ const startApp = async () => {
     timeout: 2500,
   };
 
-  /**
-   * This is temporary adapter for queries and mutations not included in SDK to handle invalid token error for them.
-   * Note, that after all GraphQL queries and mutations will be replaced by SDK methods, this adapter is going to be removed.
-   */
-  const ApolloClientInvalidTokenLinkAdapter = ({ children }) => {
-    const tokenExpirationCallback = () => {
-      fireSignOut(apolloClient);
-    };
-
-    const { link: invalidTokenLink } = invalidTokenLinkWithTokenHandler(
-      tokenExpirationCallback
-    );
-
-    const apolloClient = React.useMemo(
-      () => createSaleorClient(apiUrl, invalidTokenLink, authLink, cache),
-      []
-    );
-
-    return children(apolloClient);
-  };
-
   const Root = hot(module)(() => {
     const Notifications = () => {
       const alert = useAlert();
@@ -148,25 +124,37 @@ const startApp = async () => {
       return null;
     };
 
+    const [apolloClient, setApolloClient] = React.useState<
+      ApolloClient<NormalizedCacheObject>
+    >();
+
+    const attachApolloClientToSaleor = (invalidTokenLink: ApolloLink) => {
+      const client = createSaleorClient(
+        apiUrl,
+        invalidTokenLink,
+        authLink,
+        cache
+      );
+      setApolloClient(client);
+
+      return client;
+    };
+
     return (
       <Router history={history}>
         <QueryParamProvider ReactRouterRoute={Route}>
-          <ApolloClientInvalidTokenLinkAdapter>
-            {(apolloClient: ApolloClient<NormalizedCacheObject>) =>
-              apolloClient && (
-                <ApolloProvider client={apolloClient}>
-                  <SaleorProvider client={apolloClient}>
-                    <ShopProvider>
-                      <OverlayProvider>
-                        <App />
-                        <Notifications />
-                      </OverlayProvider>
-                    </ShopProvider>
-                  </SaleorProvider>
-                </ApolloProvider>
-              )
-            }
-          </ApolloClientInvalidTokenLinkAdapter>
+          <SaleorProvider attachApolloClient={attachApolloClientToSaleor}>
+            {apolloClient && (
+              <ApolloProvider client={apolloClient}>
+                <ShopProvider>
+                  <OverlayProvider>
+                    <App />
+                    <Notifications />
+                  </OverlayProvider>
+                </ShopProvider>
+              </ApolloProvider>
+            )}
+          </SaleorProvider>
         </QueryParamProvider>
       </Router>
     );