Disable query batching (#1922)

* Remove query batching

* Fix imports

* Update changelog

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Click & Collect - #1292 by @kuchichan
 - Add swatch attributes - #1301 by @piotrgrundas
 - Limit quantity per checkout - #1536 by @kuchichan
+- Disable query batching - #1922 by @dominik-zeglen
 
 ## 3.0
 

src/auth/utils.ts

@@ -1,9 +1,8 @@
-import { ApolloError } from "@apollo/client/core";
+import { ApolloError, ServerError } from "@apollo/client/core";
 import { IMessage, IMessageContext } from "@saleor/components/messages";
 import { UseNotifierResult } from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import { getMutationErrors, parseLogMessage } from "@saleor/misc";
-import { ServerErrorWithName } from "@saleor/types";
 import { IntlShape } from "react-intl";
 
 import { isJwtError, isTokenExpired } from "./errors";
@@ -18,7 +17,7 @@ export const displayDemoMessage = (
 };
 
 const getNetworkErrors = (error: ApolloError): string[] => {
-  const networkErrors = error.networkError as ServerErrorWithName;
+  const networkErrors = error.networkError as ServerError;
 
   if (networkErrors) {
     // Apparently network errors can be an object or an array

src/graphql/client.ts

@@ -0,0 +1,44 @@
+// DON'T TOUCH THIS
+// These are separate clients and do not share configs between themselves
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { createFetch, createSaleorClient } from "@saleor/sdk";
+import { createUploadLink } from "apollo-upload-client";
+
+import { API_URI } from "../config";
+import introspectionQueryResultData from "./fragmentTypes.generated";
+import { TypedTypePolicies } from "./typePolicies.generated";
+
+export const link = createUploadLink({
+  credentials: "include",
+  uri: API_URI,
+  fetch: createFetch()
+});
+
+export const apolloClient = new ApolloClient({
+  cache: new InMemoryCache({
+    possibleTypes: introspectionQueryResultData.possibleTypes,
+    typePolicies: {
+      CountryDisplay: {
+        keyFields: ["code"]
+      },
+      Money: {
+        merge: false
+      },
+      TaxedMoney: {
+        merge: false
+      },
+      Weight: {
+        merge: false
+      },
+      Shop: {
+        keyFields: []
+      }
+    } as TypedTypePolicies
+  }),
+  link
+});
+
+export const saleorClient = createSaleorClient({
+  apiUrl: API_URI,
+  channel: ""
+});

src/hooks/makeQuery.ts

@@ -12,8 +12,7 @@ import {
   UserPermissionFragment
 } from "@saleor/graphql/types.generated";
 import { RequireAtLeastOne } from "@saleor/misc";
-import { ServerErrorWithName } from "@saleor/types";
-import { DocumentNode, getOperationAST } from "graphql";
+import { DocumentNode } from "graphql";
 import { useEffect } from "react";
 import { useIntl } from "react-intl";
 
@@ -96,16 +95,10 @@ export function useQuery<TData, TVariables>(
     errorPolicy: "all",
     fetchPolicy: fetchPolicy ?? "cache-and-network",
     onError: error => {
-      // TO-INVESTIGATE-BATCHING
-      if (
-        (error.networkError as ServerErrorWithName).operationName ===
-        getOperationAST(query).name.value
-      ) {
-        if (!!handleError) {
-          handleError(error);
-        } else {
-          handleQueryAuthError(error, notify, user.logout, intl);
-        }
+      if (!!handleError) {
+        handleError(error);
+      } else {
+        handleQueryAuthError(error, notify, user.logout, intl);
       }
     },
     skip,

src/index.tsx

@@ -1,17 +1,9 @@
-import {
-  ApolloClient,
-  ApolloLink,
-  ApolloProvider,
-  InMemoryCache
-} from "@apollo/client";
-import { BatchHttpLink } from "@apollo/client/link/batch-http";
-import { onError } from "@apollo/client/link/error";
+import { ApolloProvider } from "@apollo/client";
 import DemoBanner from "@saleor/components/DemoBanner";
 import { PermissionEnum } from "@saleor/graphql";
 import useAppState from "@saleor/hooks/useAppState";
 import { ThemeProvider } from "@saleor/macaw-ui";
-import { createFetch, createSaleorClient, SaleorProvider } from "@saleor/sdk";
-import { createUploadLink } from "apollo-upload-client";
+import { SaleorProvider } from "@saleor/sdk";
 import React from "react";
 import { render } from "react-dom";
 import ErrorBoundary from "react-error-boundary";
@@ -42,7 +34,7 @@ import { LocaleProvider } from "./components/Locale";
 import MessageManagerProvider from "./components/messages";
 import { ShopProvider } from "./components/Shop";
 import { WindowTitle } from "./components/WindowTitle";
-import { API_URI, APP_MOUNT_URI, DEMO_MODE, GTM_ID } from "./config";
+import { APP_MOUNT_URI, DEMO_MODE, GTM_ID } from "./config";
 import ConfigurationSection from "./configuration";
 import { getConfigMenuItemsPermissions } from "./configuration/utils";
 import AppStateProvider from "./containers/AppState";
@@ -52,7 +44,7 @@ import { CustomerSection } from "./customers";
 import DiscountSection from "./discounts";
 import GiftCardSection from "./giftCards";
 import { giftCardsSectionUrlName } from "./giftCards/urls";
-import { introspectionQueryResultData, TypedTypePolicies } from "./graphql";
+import { apolloClient, saleorClient } from "./graphql/client";
 import HomePage from "./home";
 import { commonMessages } from "./intl";
 import NavigationSection from "./navigation";
@@ -72,7 +64,6 @@ import StaffSection from "./staff";
 import TaxesSection from "./taxes";
 import themeOverrides from "./themeOverrides";
 import TranslationsSection from "./translations";
-import { ServerErrorWithName } from "./types";
 import WarehouseSection from "./warehouses";
 import { warehouseSection } from "./warehouses/urls";
 
@@ -82,58 +73,6 @@ if (process.env.GTM_ID) {
 
 errorTracker.init();
 
-// DON'T TOUCH THIS
-// These are separate clients and do not share configs between themselves
-// so we need to explicitly set them
-const linkOptions = {
-  credentials: "include",
-  uri: API_URI,
-  fetch: createFetch()
-};
-const uploadLink = createUploadLink(linkOptions);
-const batchLink = new BatchHttpLink({
-  batchInterval: 100,
-  ...linkOptions
-});
-
-const link = ApolloLink.split(
-  operation => operation.getContext().useBatching,
-  // TO-INVESTIGATE-BATCHING
-  onError(err => {
-    (err.networkError as ServerErrorWithName).operationName =
-      err.operation.operationName;
-  }).concat(batchLink),
-  uploadLink
-);
-const apolloClient = new ApolloClient({
-  cache: new InMemoryCache({
-    possibleTypes: introspectionQueryResultData.possibleTypes,
-    typePolicies: {
-      CountryDisplay: {
-        keyFields: ["code"]
-      },
-      Money: {
-        merge: false
-      },
-      TaxedMoney: {
-        merge: false
-      },
-      Weight: {
-        merge: false
-      },
-      Shop: {
-        keyFields: []
-      }
-    } as TypedTypePolicies
-  }),
-  link
-});
-
-const saleorClient = createSaleorClient({
-  apiUrl: API_URI,
-  channel: ""
-});
-
 const App: React.FC = () => (
   <SaleorProvider client={saleorClient}>
     <ApolloProvider client={apolloClient}>

src/types.ts

@@ -1,4 +1,4 @@
-import { FetchResult, MutationResult, ServerError } from "@apollo/client";
+import { FetchResult, MutationResult } from "@apollo/client";
 import { UserPermissionFragment } from "@saleor/graphql";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 
@@ -225,8 +225,6 @@ export enum StatusType {
   SUCCESS = "success"
 }
 
-export type ServerErrorWithName = ServerError & { operationName: string };
-
 export type RelayToFlat<T extends { edges: Array<{ node: any }> }> = Array<
   T["edges"][0]["node"]
 >;