@graphcommerce/graphql 10.0.0-canary.68 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+### Minor Changes
+
+- [#2537](https://github.com/graphcommerce-org/graphcommerce/pull/2537) [`958dcb6`](https://github.com/graphcommerce-org/graphcommerce/commit/958dcb62d5abb3427a38e2a4583897f3e2043cc4) - Introduce a new Product-`uid` to solve an issue where cache normalization was not working properly on the frontend when viewing products with a differen curreny, etc.
+
+  Products now have a more detailed `uid` which will include the scope the product is retrieved from. For example: `NDg5MDM=?store=nl_NL&currencyCode=EUR`. This results in a better cache normalization in Apollo Client and allows for switching between scopes (store/currency/price views/accounts) without creating a broken cache state.
+
+  We have implemented this with a new resolver that rewrites the `uid` passed from Magento to the Mesh Resolver, and additing additonal data to the `uid` based on the headers passed from the client. This also requires each package to implement the `getPrivateQueryContextMesh` method to retrieve the current PrivateQuery context from the GraphQL request headers. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`c52604f`](https://github.com/graphcommerce-org/graphcommerce/commit/c52604f89e1776fc1f0913f016b8b24fa194c6b7) - Solve issue where the persistenceMapper didn't use the same typePolicies and other configuration from the cache, causing potential issues. ([@paales](https://github.com/paales))
+
+- [#2496](https://github.com/graphcommerce-org/graphcommerce/pull/2496) [`a261149`](https://github.com/graphcommerce-org/graphcommerce/commit/a261149b6b32ad6a35606da2d530b8e41bfa10a0) - ReCaptcha now using the `recaptchaV3Config` query and add a fallback for Magento 2.4.6 and earlier to still use the configuration. Magento 2.4.7 doesn't need that configuration anymore. ([@paales](https://github.com/paales))
+
+- [#2525](https://github.com/graphcommerce-org/graphcommerce/pull/2525) [`e1e132d`](https://github.com/graphcommerce-org/graphcommerce/commit/e1e132d076fbc6b3a081a245e51cb2bc91b0c707) - usePrivateQuery now disables masking when an error occurs. ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`529d7a8`](https://github.com/graphcommerce-org/graphcommerce/commit/529d7a88a4e010cb3e50c1358e2ac43e80e0bf38) - Solve issue where the ApolloClient cache wasn't scoped properly causing the wrong currency to be shown when switching currency. ([@paales](https://github.com/paales))
+
+- [`62b71d5`](https://github.com/graphcommerce-org/graphcommerce/commit/62b71d5ed1d482fdb5b76dc19ac4d55fc41fb191) - Solve issue: TypeError: InMemoryLRUCache is not a constructor ([@paales](https://github.com/paales))
+
+- [#2477](https://github.com/graphcommerce-org/graphcommerce/pull/2477) [`8015eab`](https://github.com/graphcommerce-org/graphcommerce/commit/8015eabc130dacf1f2703980cd5f0ad2c550aa4d) - Upgraded to @apollo/client 3.12.3 without impacting typescript compilation performance. ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
 ## 10.0.0-canary.68
 
 ## 10.0.0-canary.67

package/__playwright__/apolloClient.fixture.ts

@@ -3,28 +3,29 @@
 /* eslint-disable no-empty-pattern */
 import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import type { FetchResult, NormalizedCacheObject, TypedDocumentNode } from '../apollo'
+import type { ApolloLink, TypedDocumentNode } from '../apollo'
 import { ApolloClient, getOperationName, InMemoryCache } from '../apollo'
 
 type ApolloClientTest = {
-  apolloClient: ApolloClient<NormalizedCacheObject>
+  apolloClient: ApolloClient
 }
 
 export async function waitForGraphQlResponse<Q, V>(
   page: Page,
   docOrName: string | TypedDocumentNode<Q, V>,
-): Promise<FetchResult<Q>> {
+): Promise<ApolloLink.Result<Q>> {
   const name = typeof docOrName === 'string' ? docOrName : getOperationName(docOrName)
 
   const response = await page.waitForResponse((r) => {
     try {
       return r.request().postDataJSON()?.operationName === name
     } catch (e) {
+      console.error(e)
       return false
     }
   })
 
-  return (await response?.json()) as FetchResult<Q>
+  return (await response?.json()) as ApolloLink.Result<Q>
 }
 
 /** @public */

package/apollo.ts

@@ -1,13 +1,34 @@
-export { cloneDeep, mergeDeep } from '@apollo/client/utilities'
+export { cloneDeep, mergeDeep, getOperationName } from '@apollo/client/utilities/internal'
 
+// Core Apollo Client exports
 export * from '@apollo/client'
+
+// React hooks - exported explicitly
+export {
+  ApolloProvider,
+  useApolloClient,
+  useQuery,
+  useLazyQuery,
+  useMutation,
+  useSubscription,
+  useFragment,
+  useSuspenseQuery,
+  useBackgroundQuery,
+  useReadQuery,
+  useLoadableQuery,
+  useSuspenseFragment,
+  useQueryRefHandlers,
+  useReactiveVar,
+  skipToken,
+  getApolloContext,
+  createQueryPreloader,
+} from '@apollo/client/react'
+
 export * from '@apollo/client/link/schema'
 export * from '@apollo/client/link/context'
 export * from '@apollo/client/link/error'
 export * from '@apollo/client/utilities'
 
-export { getOperationName } from '@apollo/client/utilities'
-
 declare module '@apollo/client' {
   interface DataMasking {
     enabled: true

package/components/GraphQLProvider/GraphQLProvider.tsx

@@ -1,7 +1,9 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useStorefrontConfig } from '@graphcommerce/next-ui/hooks/useStorefrontConfig'
-import type { DefaultOptions, NormalizedCacheObject } from '@apollo/client'
-import { ApolloClient, ApolloLink, ApolloProvider, HttpLink, InMemoryCache } from '@apollo/client'
+import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from '@apollo/client'
+import type { NormalizedCacheObject } from '@apollo/client'
+import { LocalState } from '@apollo/client/local-state'
+import { ApolloProvider } from '@apollo/client/react'
 import type { AppProps } from 'next/app'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { ApolloClientConfig, ApolloClientConfigInput, PreviewConfig } from '../../config'
@@ -12,7 +14,7 @@ import { errorLink } from './errorLink'
 import { measurePerformanceLink } from './measurePerformanceLink'
 import { mergeTypePolicies } from './typePolicies'
 
-export const globalApolloClient: { current: ApolloClient<NormalizedCacheObject> | null } = {
+export const globalApolloClient: { current: ApolloClient | null } = {
   current: null,
 }
 
@@ -27,7 +29,7 @@ export type GraphQLProviderProps = AppProps &
  */
 export function GraphQLProvider(props: GraphQLProviderProps) {
   const { children, links, migrations, policies, pageProps, router } = props
-  const state = (pageProps as { apolloState?: NormalizedCacheObject }).apolloState
+  const state = (pageProps as { apolloState?: unknown }).apolloState
 
   const stateRef = useRef(state)
 
@@ -60,7 +62,7 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
     ])
 
     const cache = createCache()
-    if (stateRef.current) cache.restore(stateRef.current)
+    if (stateRef.current) cache.restore(stateRef.current as unknown as NormalizedCacheObject)
 
     const ssrMode = typeof window === 'undefined'
     return new ApolloClient({
@@ -68,11 +70,13 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
       cache,
       clientAwareness: { name: 'web' },
       ssrMode,
+
       defaultOptions: {
         preview: {
           preview: router.isPreview,
         } as PreviewConfig,
-      } as DefaultOptions,
+      } as ApolloClient.DefaultOptions,
+      localState: new LocalState({}),
     })
   })
 

package/components/GraphQLProvider/createCacheReviver.ts

@@ -9,14 +9,14 @@ import { getTypePoliciesVersion } from './typePolicies'
 const APOLLO_CACHE_PERSIST = 'apollo-cache-persist'
 const APOLLO_CACHE_VERSION = 'apollo-cache-version'
 
-let persistor: CachePersistor<NormalizedCacheObject> | null = null
+let persistor: CachePersistor<unknown> | null = null
 
 /** Revives the cache from the localStorage if it is available. */
 export async function createCacheReviver(
-  client: ApolloClient<NormalizedCacheObject>,
-  createCache: () => ApolloCache<NormalizedCacheObject>,
+  client: ApolloClient,
+  createCache: () => ApolloCache,
   config: ApolloClientConfig,
-  incomingState: NormalizedCacheObject = {},
+  incomingState: unknown = {},
 ) {
   let state = incomingState
   const typePoliciesVersion = getTypePoliciesVersion(config.policies)

package/components/GraphQLProvider/errorLink.ts

@@ -1,17 +1,18 @@
-import { onError } from '@apollo/client/link/error'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import { ErrorLink } from '@apollo/client/link/error'
 
-export const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
-  if (graphQLErrors)
+export const errorLink = new ErrorLink(({ error, operation }) => {
+  if (CombinedGraphQLErrors.is(error)) {
     console.error(
-      `[GraphQL errors]: ${graphQLErrors
+      `[GraphQL errors]: ${error.errors
         .map(({ message, path }) => `${message} ${path?.join(',')}`)
         .join(', ')}`,
     )
+  } else if (error) {
+    console.error(`[Graphql error]: ${error}`)
+  }
 
-  if (networkError)
-    console.error(`[Graphql error]: ${networkError}`)
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   ;(async () => {
     const graphql = await import('graphql')
 

package/components/GraphQLProvider/measurePerformanceLink.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { map } from '@graphcommerce/graphql/rxjs'
 import { canonicalBaseUrl } from '@graphcommerce/next-config/config'
 import { ApolloLink } from '@apollo/client'
 import { print } from '@apollo/client/utilities'
 import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
 import { responsePathAsArray, stripIgnoredCharacters } from 'graphql'
-import { cliHyperlink } from '../../lib/hyperlinker'
 
 const running = new Map<
   string,
@@ -147,88 +147,93 @@ export const measurePerformanceLink = new ApolloLink((operation, forward) => {
     operation.setContext({ measurePerformanceLinkStart: new Date() })
     const vars =
       Object.keys(operation.variables).length > 0 ? `(${JSON.stringify(operation.variables)})` : ''
-    const operationString = `${operation.operationName}${vars}`
+    const operationString = `${operation.operationName ?? 'anonymous'}${vars}`
 
     running.set(operationString, {
       start: new Date(),
-      operationName: [operation.operationName, operation.operationName],
+      operationName: [
+        operation.operationName ?? 'anonymous',
+        operation.operationName ?? 'anonymous',
+      ],
     })
     markTimeout()
 
-    return forward(operation).map((data) => {
-      const httpDetails: MeshFetchHTTPInformation[] | undefined = data.extensions?.httpDetails
-
-      const additional = ['', ''] as [string, string]
-
-      // Called after server responds
-      const query = [
-        `# Variables: ${JSON.stringify(operation.variables)}`,
-        `# Headers: ${JSON.stringify(operation.getContext().headers)}`,
-        stripIgnoredCharacters(print(operation.query)),
-      ].join('\n')
-
-      const meshUrl = new URL(
-        process.env.NODE_ENV === 'production'
-          ? `${canonicalBaseUrl}/api/graphql`
-          : 'http://localhost:3000/api/graphql',
-      )
-
-      meshUrl.searchParams.set('query', query)
-
-      running.delete(operationString)
-      running.set(operationString, {
-        start: operation.getContext().measurePerformanceLinkStart as Date,
-        end: new Date(),
-        operationName: [
-          operation.operationName,
-          operation.operationName,
-          // cliHyperlink(operation.operationName, meshUrl.toString()),
-        ],
-        additional,
-        idx: 0,
-      })
-
-      if (httpDetails) {
-        running.forEach((_, key) => {
-          if (key.startsWith(operationString)) running.delete(key)
+    return forward(operation).pipe(
+      map((data) => {
+        const httpDetails: MeshFetchHTTPInformation[] | undefined = data.extensions?.httpDetails
+
+        const additional = ['', ''] as [string, string]
+
+        // Called after server responds
+        const query = [
+          `# Variables: ${JSON.stringify(operation.variables)}`,
+          `# Headers: ${JSON.stringify(operation.getContext().headers)}`,
+          stripIgnoredCharacters(print(operation.query)),
+        ].join('\n')
+
+        const meshUrl = new URL(
+          process.env.NODE_ENV === 'production'
+            ? `${canonicalBaseUrl}/api/graphql`
+            : 'http://localhost:3000/api/graphql',
+        )
+
+        meshUrl.searchParams.set('query', query)
+
+        running.delete(operationString)
+        running.set(operationString, {
+          start: operation.getContext().measurePerformanceLinkStart as Date,
+          end: new Date(),
+          operationName: [
+            operation.operationName ?? 'anonymous',
+            operation.operationName ?? 'anonymous',
+            // cliHyperlink(operation.operationName, meshUrl.toString()),
+          ],
+          additional,
+          idx: 0,
         })
 
-        httpDetails.forEach((d) => {
-          const requestUrl = new URL(d.request.url)
-          requestUrl.searchParams.delete('extensions')
-
-          const sourceName =
-            !d.sourceName && URL.canParse(d.request.url)
-              ? new URL(d.request.url).hostname
-              : d.sourceName
-
-          const key = `${operationString}.${responsePathAsArray(d.path).join('.')}`
-          const name = `${operation.operationName}.${responsePathAsArray(d.path).join('.')} (${sourceName})`
-
-          let start = new Date(d.request.timestamp)
-          let end = new Date(d.response.timestamp)
-          let operationName: [string, string] = [name, name]
-          let idx = 0
-
-          if (running.has(key)) {
-            // Get the earliest start time and latest end time.
-            const existing = running.get(key)
-            if (existing) {
-              idx = (existing.idx ?? 0) + 1
-              start = existing.start < start ? existing.start : start
-              end = existing?.end ? (existing.end > end ? existing.end : end) : end
-              operationName = [`${name} ⨉ ${idx}`, `${name} ⨉ ${idx}`]
+        if (httpDetails) {
+          running.forEach((_, key) => {
+            if (key.startsWith(operationString)) running.delete(key)
+          })
+
+          httpDetails.forEach((d) => {
+            const requestUrl = new URL(d.request.url)
+            requestUrl.searchParams.delete('extensions')
+
+            const sourceName =
+              !d.sourceName && URL.canParse(d.request.url)
+                ? new URL(d.request.url).hostname
+                : d.sourceName
+
+            const key = `${operationString}.${responsePathAsArray(d.path).join('.')}`
+            const name = `${operation.operationName ?? 'anonymous'}.${responsePathAsArray(d.path).join('.')} (${sourceName})`
+
+            let start = new Date(d.request.timestamp)
+            let end = new Date(d.response.timestamp)
+            let operationName: [string, string] = [name, name]
+            let idx = 0
+
+            if (running.has(key)) {
+              // Get the earliest start time and latest end time.
+              const existing = running.get(key)
+              if (existing) {
+                idx = (existing.idx ?? 0) + 1
+                start = existing.start < start ? existing.start : start
+                end = existing?.end ? (existing.end > end ? existing.end : end) : end
+                operationName = [`${name} ⨉ ${idx}`, `${name} ⨉ ${idx}`]
+              }
             }
-          }
 
-          running.set(key, { start, end, operationName, idx })
-        })
-      }
+            running.set(key, { start, end, operationName, idx })
+          })
+        }
 
-      markTimeout()
+        markTimeout()
 
-      return data
-    })
+        return data
+      }),
+    )
   }
   return forward(operation)
 })

package/components/GraphQLProvider/migrateCache.ts

@@ -1,13 +1,10 @@
-import type { ApolloCache, NormalizedCacheObject } from '../../apollo'
+import type { ApolloCache } from '../../apollo'
 
-export type MigrateCache = (
-  oldCache: ApolloCache<NormalizedCacheObject>,
-  newCache: ApolloCache<NormalizedCacheObject>,
-) => void
+export type MigrateCache = (oldCache: ApolloCache, newCache: ApolloCache) => void
 
 export const migrateCacheHandler = (
-  oldCache: ApolloCache<NormalizedCacheObject>,
-  newCache: ApolloCache<NormalizedCacheObject>,
+  oldCache: ApolloCache,
+  newCache: ApolloCache,
   migrations: MigrateCache[],
 ) => {
   migrations.forEach((migration) => migration(oldCache, newCache))

package/components/GraphQLProvider/persistenceMapper.ts

@@ -22,7 +22,7 @@ function pruneCache(cacheObject: object, patterns: string[]) {
 }
 
 export const createPersistenceMapper =
-  (createCache: () => ApolloCache<NormalizedCacheObject>) =>
+  (createCache: () => ApolloCache) =>
   (data: string): Promise<string> => {
     const parsedCache = JSON.parse(data) as NormalizedCacheObject
 

package/components/GraphQLProvider/typePolicies.ts

@@ -1,5 +1,4 @@
 import type { StrictTypedTypePolicies } from '@graphcommerce/graphql'
-import type { KeyFieldsFunction } from '@apollo/client/cache/inmemory/policies'
 import { mergeDeep } from '../../apollo'
 
 export const mergeTypePolicies = (policies: StrictTypedTypePolicies[]): StrictTypedTypePolicies =>

package/hooks/usePrivateQuery.ts

@@ -4,8 +4,8 @@ import { useIsSSR } from '@graphcommerce/next-ui/hooks/useIsSsr'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { getCssFlag, removeCssFlag, setCssFlag } from '@graphcommerce/next-ui/utils/cssFlags'
 import { useContext, useEffect } from 'react'
-import type { MaybeMasked, QueryHookOptions, QueryResult, TypedDocumentNode } from '../apollo'
-import { useQuery } from '../apollo'
+import type { MaybeMasked, TypedDocumentNode, useQuery } from '../apollo'
+import { useQuery as useQueryHook } from '../apollo'
 import { PrivateQueryMaskContext } from '../components/PrivateQueryMask/PrivateQueryMask'
 import { usePrivateQueryContext } from './usePrivateQueryContext'
 
@@ -30,9 +30,9 @@ export function usePrivateQuery<
   V extends { context?: InputMaybe<PrivateContext>; [index: string]: unknown },
 >(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, V>,
+  options: useQuery.Options<Q, V>,
   unscopedResult: Q,
-): Omit<QueryResult<Q, V>, 'data'> & { data: Q | NonNullable<MaybeMasked<Q>>; mask: boolean } {
+): Omit<useQuery.Result<Q, V>, 'data'> & { data: Q | NonNullable<MaybeMasked<Q>>; mask: boolean } {
   const { skip = true } = options
   const context = usePrivateQueryContext()
   const isSsr = useIsSSR()
@@ -45,7 +45,7 @@ export function usePrivateQuery<
     else if (!context && getCssFlag('private-query')) removeCssFlag('private-query')
   }, [context, isSsr])
 
-  const clientQuery = useQuery<Q, V>(document, {
+  const clientQuery = useQueryHook<Q, V>(document, {
     ...options,
     variables: { ...options.variables, context } as V,
     skip: !!privateContext || (skip && !context),

package/hooks/usePrivateQueryContext.ts

@@ -10,7 +10,7 @@ export function getPrivateQueryContextMesh(
 }
 
 /** Get the private context from the apollo client. */
-export function getPrivateQueryContext(_client: ApolloClient<any>): PrivateContext | null {
+export function getPrivateQueryContext(_client: ApolloClient): PrivateContext | null {
   return null
 }
 

package/link/RemovePrivateContextDirectivesLink.ts

@@ -1,9 +1,38 @@
-import type { NextLink, Operation } from '../apollo'
-import { ApolloLink, removeArgumentsFromDocument, removeDirectivesFromDocument } from '../apollo'
+import type { ApolloLink as ApolloLinkType } from '@apollo/client'
+import { removeDirectivesFromDocument } from '@apollo/client/utilities/internal'
+import type { DocumentNode } from 'graphql'
+import { visit } from 'graphql'
+import { ApolloLink } from '../apollo'
+
+/**
+ * Remove arguments from a GraphQL document. This is a replacement for the removed
+ * removeArgumentsFromDocument from Apollo Client.
+ */
+function removeArgumentsFromDocument(
+  args: Array<{ name: string }>,
+  doc: DocumentNode,
+): DocumentNode | null {
+  const argNames = new Set(args.map((a) => a.name))
+
+  return visit(doc, {
+    Argument(node) {
+      if (argNames.has(node.name.value)) {
+        return null
+      }
+      return undefined
+    },
+    VariableDefinition(node) {
+      if (argNames.has(node.variable.name.value)) {
+        return null
+      }
+      return undefined
+    },
+  })
+}
 
 export class RemovePrivateContextDirectivesLink extends ApolloLink {
   // eslint-disable-next-line class-methods-use-this
-  request(operation: Operation, forward?: NextLink) {
+  request(operation: ApolloLinkType.Operation, forward?: ApolloLinkType.ForwardFunction) {
     if (!forward) throw new Error('This is not a terminal link!')
 
     let modifiedQuery = operation.query

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.68",
+  "version": "10.0.0",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,25 +13,27 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "^3.14.0",
+    "@apollo/client": "^4.0.11",
     "@graphql-codegen/add": "6.0.0",
     "@graphql-codegen/fragment-matcher": "6.0.0",
     "@graphql-codegen/introspection": "5.0.0",
     "@graphql-codegen/schema-ast": "5.0.0",
-    "@graphql-codegen/typed-document-node": "6.1.4",
-    "@graphql-codegen/typescript": "5.0.6",
+    "@graphql-codegen/typed-document-node": "6.1.5",
+    "@graphql-codegen/typescript": "5.0.7",
     "@graphql-codegen/typescript-apollo-client-helpers": "3.0.1",
-    "@graphql-codegen/typescript-document-nodes": "5.0.6",
-    "@graphql-codegen/typescript-operations": "5.0.6",
+    "@graphql-codegen/typescript-document-nodes": "5.0.7",
+    "@graphql-codegen/typescript-operations": "5.0.7",
     "apollo3-cache-persist": "^0.15.0",
-    "graphql": "^16.12.0"
+    "graphql": "^16.12.0",
+    "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/graphql-codegen-near-operation-file": "10.0.0-canary.68",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0",
+    "@graphcommerce/graphql-codegen-near-operation-file": "10.0.0",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.0.0",
+    "@graphcommerce/next-config": "^10.0.0",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0",
     "@graphql-mesh/plugin-http-details-extensions": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
@@ -40,6 +42,7 @@
     ".": "./index.ts",
     "./apollo": "./apollo.ts",
     "./config": "./config.ts",
+    "./rxjs": "./rxjs.ts",
     "./generated/fragments.json": "./generated/fragments.json"
   }
 }

package/rxjs.ts

@@ -0,0 +1 @@
+export * from 'rxjs'

package/utils/cachePolicy.ts

@@ -1,15 +1,12 @@
 import type { ApolloClient, FetchPolicy } from '@apollo/client'
 import { getPreviewData } from './getPreviewData'
 
-export function cachePolicy(
-  client: ApolloClient<object>,
-  requestedCachePolicy: FetchPolicy,
-): FetchPolicy {
+export function cachePolicy(client: ApolloClient, requestedCachePolicy: FetchPolicy): FetchPolicy {
   return process.env.NODE_ENV !== 'development' && !getPreviewData(client)?.preview
     ? requestedCachePolicy
     : 'network-only'
 }
 
-export function cacheFirst(client: ApolloClient<object>) {
+export function cacheFirst(client: ApolloClient) {
   return cachePolicy(client, 'cache-first')
 }

package/utils/getPreviewData.ts

@@ -1,7 +1,7 @@
 import type { ApolloClient } from '@apollo/client'
 import type { PreviewConfig } from '../config'
 
-export function getPreviewData(client: ApolloClient<object>): PreviewConfig | undefined {
+export function getPreviewData(client: ApolloClient): PreviewConfig | undefined {
   if ('preview' in client.defaultOptions) return client.defaultOptions.preview as PreviewConfig
   return undefined
 }