@graphcommerce/graphql 10.0.0-canary.67 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 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
 
 ## 10.0.0-canary.66

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/components/PrivateQueryMask/PrivateQueryMask.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { cssFlag, cssNotFlag, useIsSSR } from '@graphcommerce/next-ui'
+import { cssFlag, cssNotFlag, sxx, useIsSSR } from '@graphcommerce/next-ui'
 import type { SkeletonOwnProps, SkeletonProps, SxProps, Theme } from '@mui/material'
 import { Box, Skeleton } from '@mui/material'
 import type { OverrideProps } from '@mui/material/OverridableComponent'
@@ -60,20 +60,20 @@ export function usePrivateQueryMaskSx(props: { sx?: SxProps<Theme>; skeleton?: S
 
   return {
     mask,
-    componentSx: [
+    componentSx: sxx(
       mask && {
         [cssFlag('private-query')]: { display: 'none' },
       },
-      ...(Array.isArray(sx) ? sx : [sx]),
-    ],
-    maskSx: [
+      sx,
+    ),
+    maskSx: sxx(
       {
         display: 'inline-block',
         [cssNotFlag('private-query')]: { display: 'none' },
       },
-      ...(Array.isArray(sx) ? sx : [sx]),
-      ...(Array.isArray(skeleton?.sx) ? skeleton.sx : [skeleton?.sx]),
-    ],
+      sx,
+      skeleton?.sx,
+    ),
   }
 }
 

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.67",
+  "version": "10.0.0-canary.72",
   "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.67",
-    "@graphcommerce/graphql-codegen-near-operation-file": "10.0.0-canary.67",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql-codegen-near-operation-file": "10.0.0-canary.72",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.0.0-canary.72",
+    "@graphcommerce/next-config": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@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
 }