diff --git a/CHANGELOG.md b/CHANGELOG.md index 890f11bb3..6882ff6e7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/auth/utils.ts b/src/auth/utils.ts index 4426dcc17..60475d24d 100644 --- a/src/auth/utils.ts +++ b/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 diff --git a/src/graphql/client.ts b/src/graphql/client.ts new file mode 100644 index 000000000..04b85658a --- /dev/null +++ b/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: "" +}); diff --git a/src/hooks/makeQuery.ts b/src/hooks/makeQuery.ts index 30283e3a3..2797d9e20 100644 --- a/src/hooks/makeQuery.ts +++ b/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( 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, diff --git a/src/index.tsx b/src/index.tsx index f9ad6d593..2f2e89389 100644 --- a/src/index.tsx +++ b/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 = () => ( diff --git a/src/types.ts b/src/types.ts index fc4cb6d17..eeb76ce56 100644 --- a/src/types.ts +++ b/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 }> = Array< T["edges"][0]["node"] >;