@graphcommerce/graphql 9.0.0-canary.99 → 9.0.1-canary.0

package/{test → __playwright__}/apolloClient.fixture.ts

@@ -1,14 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
+
 /* eslint-disable no-empty-pattern */
-import { test as base, Page } from '@playwright/test'
-import {
-  ApolloClient,
-  FetchResult,
-  getOperationName,
-  InMemoryCache,
-  NormalizedCacheObject,
-  TypedDocumentNode,
-} from '../apollo'
+import type { Page } from '@playwright/test'
+import { test as base } from '@playwright/test'
+import type { FetchResult, NormalizedCacheObject, TypedDocumentNode } from '../apollo'
+import { ApolloClient, getOperationName, InMemoryCache } from '../apollo'
 
 type ApolloClientTest = {
   apolloClient: ApolloClient<NormalizedCacheObject>
@@ -31,7 +27,8 @@ export async function waitForGraphQlResponse<Q, V>(
   return (await response?.json()) as FetchResult<Q>
 }
 
-const test = base.extend<ApolloClientTest>({
+/** @public */
+export const test = base.extend<ApolloClientTest>({
   apolloClient: async ({}, use) => {
     const client = new ApolloClient({
       uri: 'http://localhost:3000/api/graphql',
@@ -41,5 +38,3 @@ const test = base.extend<ApolloClientTest>({
     await use(client)
   },
 })
-
-export { test }

package/apollo.ts

@@ -4,5 +4,6 @@ export * from '@apollo/client'
 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'

package/components/GraphQLProvider/GraphQLProvider.tsx

@@ -1,22 +1,11 @@
-import {
-  ApolloClient,
-  NormalizedCacheObject,
-  ApolloLink,
-  InMemoryCache,
-  ApolloProvider,
-  HttpLink,
-  DefaultOptions,
-} from '@apollo/client'
 // 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 type { AppProps } from 'next/app'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  ApolloClientConfig,
-  graphqlConfig,
-  ApolloClientConfigInput,
-  PreviewConfig,
-} from '../../config'
+import type { ApolloClientConfig, ApolloClientConfigInput, PreviewConfig } from '../../config'
+import { graphqlConfig } from '../../config'
 import fragments from '../../generated/fragments.json'
 import { createCacheReviver } from './createCacheReviver'
 import { errorLink } from './errorLink'

package/components/GraphQLProvider/createCacheReviver.ts

@@ -1,6 +1,7 @@
-import { LocalStorageWrapper, CachePersistor } from 'apollo3-cache-persist'
-import { mergeDeep, ApolloCache, ApolloClient, NormalizedCacheObject } from '../../apollo'
-import { ApolloClientConfig } from '../../config'
+import { CachePersistor, LocalStorageWrapper } from 'apollo3-cache-persist'
+import type { ApolloCache, ApolloClient, NormalizedCacheObject } from '../../apollo'
+import { mergeDeep } from '../../apollo'
+import type { ApolloClientConfig } from '../../config'
 import { migrateCacheHandler } from './migrateCache'
 import { persistenceMapper } from './persistenceMapper'
 import { getTypePoliciesVersion } from './typePolicies'

package/components/GraphQLProvider/measurePerformanceLink.ts

@@ -1,7 +1,9 @@
 /* eslint-disable no-console */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { ApolloLink } from '@apollo/client'
-import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
 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<
@@ -12,6 +14,7 @@ const running = new Map<
     internalStart?: Date
     operationName: [string, string]
     additional?: [string, string]
+    idx?: number
   }
 >()
 
@@ -87,13 +90,13 @@ export const flushMeasurePerf = () => {
   })
 
   const items = [
-    ['Operation', 'Mesh', ' Source', 'Timeline'],
+    ['Operation', 'Mesh', '', 'Timeline'],
     ...lines,
     renderLine({
       serverStart: 0,
       requestStart: 0,
       requestEnd: end,
-      additional: [`Total time`, `${end}ms`, ''],
+      additional: ['Total time', `${end}ms`, ''],
       colDivider,
     }),
   ]
@@ -109,22 +112,20 @@ export const flushMeasurePerf = () => {
   // padd the items to the max length
   items.forEach((item) => {
     item.forEach((_, index) => {
-      const [str] = (Array.isArray(item[index]) ? item[index] : [item[index], item[index]]) as [
-        string,
-        string,
-      ]
+      const [str] = Array.isArray(item[index]) ? item[index] : [item[index], item[index]]
 
-      const val = (Array.isArray(item[index]) ? item[index][1] : item[index]) as string
+      const val = Array.isArray(item[index]) ? item[index][1] : item[index]
 
       const padLength = colWidths[index] + (val.length - str.length)
 
-      item[index] = `${val.padEnd(padLength, ' ')}${index !== item.length - 1 ? `` : ''}`
+      item[index] = `${val.padEnd(padLength, ' ')}${index !== item.length - 1 ? '' : ''}`
     })
   })
-
-  // render the items to a string
-  const output = [[''], ...items].map((item) => item.join(' ')).join('\n')
-  console.log(output)
+  ;[[''], ...items]
+    .map((item) => item.join(' '))
+    .forEach((item) => {
+      console.log(item)
+    })
 
   running.clear()
 }
@@ -156,44 +157,73 @@ export const measurePerformanceLink = new ApolloLink((operation, forward) => {
     return forward(operation).map((data) => {
       const httpDetails: MeshFetchHTTPInformation[] | undefined = data.extensions?.httpDetails
 
-      let additional = [``, ``] as [string, string]
-      if (httpDetails) {
-        httpDetails.forEach((d) => {
-          const requestUrl = new URL(d.request.url)
-          requestUrl.searchParams.delete('extensions')
-          const title = `${d.sourceName} ${d.responseTime}ms`
-          additional = [
-            `${additional[0]} ${title}`,
-            `${additional[1]} ${cliHyperlink(title, requestUrl.toString().replace(/\+/g, '%20'))}`,
-          ]
-        })
-      }
+      const additional = ['', ''] as [string, string]
 
       // Called after server responds
       const query = [
         `# Variables: ${JSON.stringify(operation.variables)}`,
         `# Headers: ${JSON.stringify(operation.getContext().headers)}`,
-        print(operation.query),
+        stripIgnoredCharacters(print(operation.query)),
       ].join('\n')
 
-      const meshUrl = new URL(`${import.meta.graphCommerce.canonicalBaseUrl}/api/graphql`)
+      const meshUrl = new URL(
+        process.env.NODE_ENV === 'production'
+          ? `${import.meta.graphCommerce.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],
+        operationName: [
+          operation.operationName,
+          operation.operationName,
+          // cliHyperlink(operation.operationName, meshUrl.toString()),
+        ],
         additional,
-        // [
-        //   operation.operationName,
-        //   cliHyperlink(operation.operationName, meshUrl.toString()),
-        // ],
-        // additional: [
-        //   `🔗 ${additional[0]}`,
-        //   `${cliHyperlink('🔗', meshUrl.toString())} ${additional[1]}`,
-        // ],
+        idx: 0,
       })
 
+      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}.${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 })
+        })
+      }
+
       markTimeout()
 
       return data

package/components/GraphQLProvider/migrateCache.ts

@@ -1,4 +1,4 @@
-import { ApolloCache, NormalizedCacheObject } from '../../apollo'
+import type { ApolloCache, NormalizedCacheObject } from '../../apollo'
 
 export type MigrateCache = (
   oldCache: ApolloCache<NormalizedCacheObject>,

package/components/GraphQLProvider/persistenceMapper.ts

@@ -1,4 +1,5 @@
-import { InMemoryCache, NormalizedCacheObject } from '@apollo/client'
+import type { NormalizedCacheObject } from '@apollo/client'
+import { InMemoryCache } from '@apollo/client'
 
 function pruneKey(cacheValue: unknown, path: string[]) {
   if (typeof cacheValue !== 'object' || cacheValue === null) return
@@ -26,6 +27,8 @@ export const persistenceMapper = (data: string): Promise<string> => {
 
   pruneCache(parsedCache, [
     'ROOT_MUTATION',
+    'ROOT_QUERY.attributesList',
+    'ROOT_QUERY.categories*',
     'ROOT_QUERY.products*',
     'ROOT_QUERY.countries',
     'ROOT_QUERY.checkoutAgreements',

package/components/PrivateQueryMask/PrivateQueryMask.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { cssFlag, cssNotFlag, 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'
+import React, { createContext, useContext, useMemo } from 'react'
+
+type MaskProp = { skeleton?: SkeletonProps }
+
+interface PrivateQueryMaskTypeMap<
+  AdditionalProps = MaskProp,
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & SkeletonOwnProps
+  defaultComponent: RootComponent
+}
+
+export type PrivateQueryMaskProps<
+  RootComponent extends React.ElementType = PrivateQueryMaskTypeMap['defaultComponent'],
+  AdditionalProps = MaskProp,
+> = OverrideProps<PrivateQueryMaskTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType
+}
+
+type PrivateQueryMaskContextType = { mask: boolean }
+
+export const PrivateQueryMaskContext = createContext<PrivateQueryMaskContextType | undefined>(
+  undefined,
+)
+
+export function usePrivateQueryMask(): PrivateQueryMaskContextType {
+  const context = useContext(PrivateQueryMaskContext)
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSSR = process.env.NODE_ENV === 'development' ? useIsSSR() : false
+
+  if (!context) {
+    if (isSSR)
+      console.warn(
+        "usePrivateQueryMask was used without a PrivateQueryMaskProvider, this means that customer specific pricing probably isn't working.",
+      )
+
+    return { mask: false }
+  }
+  return context
+}
+
+export function PrivateQueryMaskProvider(props: { mask: boolean; children: React.ReactNode }) {
+  const { mask = false, children } = props
+  return (
+    <PrivateQueryMaskContext.Provider value={useMemo(() => ({ mask }), [mask])}>
+      {children}
+    </PrivateQueryMaskContext.Provider>
+  )
+}
+
+export function usePrivateQueryMaskSx(props: { sx?: SxProps<Theme>; skeleton?: SkeletonProps }) {
+  const { sx = [], skeleton } = props
+  const { mask } = usePrivateQueryMask()
+
+  return {
+    mask,
+    componentSx: [
+      mask && {
+        [cssFlag('private-query')]: { display: 'none' },
+      },
+      ...(Array.isArray(sx) ? sx : [sx]),
+    ],
+    maskSx: [
+      {
+        display: 'inline-block',
+        [cssNotFlag('private-query')]: { display: 'none' },
+      },
+      ...(Array.isArray(sx) ? sx : [sx]),
+      ...(Array.isArray(skeleton?.sx) ? skeleton.sx : [skeleton?.sx]),
+    ],
+  }
+}
+
+/** A component that renders a skeleton mask when the user is signed in. */
+export function PrivateQueryMask(props: PrivateQueryMaskProps) {
+  const { skeleton, children, ...rest } = props
+  const { mask, componentSx, maskSx } = usePrivateQueryMaskSx(props)
+
+  return (
+    <>
+      <Box {...rest} sx={componentSx}>
+        {children}
+      </Box>
+      {mask && <Skeleton {...rest} {...skeleton} sx={maskSx} />}
+    </>
+  )
+}

package/config.ts

@@ -1,7 +1,8 @@
-import { ApolloLink, TypePolicies } from '@apollo/client'
 import type { GraphCommerceStorefrontConfig } from '@graphcommerce/next-config'
+import type { ApolloLink, TypePolicies } from '@apollo/client'
 import type { SetRequired } from 'type-fest'
-import { MigrateCache } from './components/GraphQLProvider/migrateCache'
+import type { MigrateCache } from './components/GraphQLProvider/migrateCache'
+import { RemovePrivateContextDirectivesLink } from './link/RemovePrivateContextDirectivesLink'
 
 export interface PreviewData {}
 
@@ -34,5 +35,11 @@ export type ApolloClientConfig = SetRequired<
 
 export function graphqlConfig(config: ApolloClientConfigInput): ApolloClientConfig {
   const { storefront, links = [], policies = [], migrations = [], ...rest } = config
-  return { storefront, links, policies, migrations, ...rest }
+  return {
+    storefront,
+    links: [...links, new RemovePrivateContextDirectivesLink()],
+    policies,
+    migrations,
+    ...rest,
+  }
 }

package/hooks/{useInContextQuery.ts → usePrivateQuery.ts}

@@ -1,50 +1,54 @@
-import type { InputMaybe, InContextInput } from '@graphcommerce/graphql-mesh'
+import type { InputMaybe, PrivateContext } from '@graphcommerce/graphql-mesh'
 // eslint-disable-next-line import/no-extraneous-dependencies
 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 { QueryHookOptions, QueryResult, TypedDocumentNode, useQuery } from '../apollo'
-import { InContextMaskContext } from '../components/InContextMask/InContextMask'
-import { useInContextInput } from './useInContextInput'
+import type { MaybeMasked, QueryHookOptions, QueryResult, TypedDocumentNode } from '../apollo'
+import { useQuery } from '../apollo'
+import { PrivateQueryMaskContext } from '../components/PrivateQueryMask/PrivateQueryMask'
+import { usePrivateQueryContext } from './usePrivateQueryContext'
 
 /**
- * Creates a query that allows fetching data for logged in customers, but have
- * a fallback for guest users.
+ * Creates a query that allows fetching data for logged in customers (or other private contexts),
+ * but have a fallback for guest users.
  *
  * - Shows a global pageload indicator when loading customer specific information.
  *
  * When not to use this?
- * - When a query is always scoped. This method specifically targets queries that can resolve unscoped (guest) and both scoped (customer) data.
+ *
+ * - When a query is always scoped. This method specifically targets queries that can resolve unscoped
+ *   (guest) and both scoped (customer) data.
  *
  * Usage:
- * - Define a `@inContext(context: $context)` directive in your query
- * - Use the useInContextQuery
+ *
+ * - Define a `@privateContext(context: $context)` directive in your query
+ * - Use the usePrivateQuery
  */
-export function useInContextQuery<
+export function usePrivateQuery<
   Q,
-  V extends { context?: InputMaybe<InContextInput>; [index: string]: unknown },
+  V extends { context?: InputMaybe<PrivateContext>; [index: string]: unknown },
 >(
   document: TypedDocumentNode<Q, V>,
   options: QueryHookOptions<Q, V>,
   unscopedResult: Q,
-): Omit<QueryResult<Q, V>, 'data'> & { data: Q; mask: boolean } {
+): Omit<QueryResult<Q, V>, 'data'> & { data: Q | NonNullable<MaybeMasked<Q>>; mask: boolean } {
   const { skip = true } = options
-  const context = useInContextInput()
+  const context = usePrivateQueryContext()
   const isSsr = useIsSSR()
 
-  const inContext = useContext(InContextMaskContext)
+  const privateContext = useContext(PrivateQueryMaskContext)
 
   useEffect(() => {
     if (isSsr) return
-    if (context && !getCssFlag('in-context')) setCssFlag('in-context', true)
-    else if (!context && getCssFlag('in-context')) removeCssFlag('in-context')
+    if (context && !getCssFlag('private-query')) setCssFlag('private-query', true)
+    else if (!context && getCssFlag('private-query')) removeCssFlag('private-query')
   }, [context, isSsr])
 
   const clientQuery = useQuery<Q, V>(document, {
     ...options,
     variables: { ...options.variables, context } as V,
-    skip: !!inContext || (skip && !context),
+    skip: !!privateContext || (skip && !context),
   })
 
   let { data } = clientQuery
@@ -56,9 +60,9 @@ export function useInContextQuery<
     mask = !skip ? !clientQuery.data && !clientQuery.previousData : !clientQuery.data
   }
 
-  // If this method is called within an InContextMask, we skip this complete functionality so we show the parent mask.
-  if (inContext) {
-    mask = inContext.mask
+  // If this method is called within an PrivateQueryMask, we skip this complete functionality so we show the parent mask.
+  if (privateContext) {
+    mask = privateContext.mask
   }
 
   return { ...clientQuery, data: data ?? unscopedResult, mask }

package/hooks/usePrivateQueryContext.ts

@@ -0,0 +1,20 @@
+import type { PrivateContext } from '@graphcommerce/graphql-mesh'
+import type { ApolloClient } from '@apollo/client'
+
+export function getPrivateQueryContext(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  client: ApolloClient<any>,
+): PrivateContext | null {
+  return null
+}
+
+/**
+ * Defines a method to handle the current context for the query.
+ *
+ * Other plugins should be able to define their own scopes and create a plugin on this method to augment the specific scope.
+ *
+ * @see @graphcommerce/magento-customer/plugins/magentoCustomerGetInContext.ts
+ *
+ * Note: ONLY return a value if the frontend should use the privateContext directive.
+ */
+export const usePrivateQueryContext = (): PrivateContext | null => null

package/index.ts

@@ -5,6 +5,6 @@ export * from './generated/types'
 export * from './config'
 export * from './utils/getPreviewData'
 export * from './utils/cachePolicy'
-export * from './components/InContextMask/InContextMask'
-export * from './hooks/useInContextInput'
-export * from './hooks/useInContextQuery'
+export * from './components/PrivateQueryMask/PrivateQueryMask'
+export * from './hooks/usePrivateQueryContext'
+export * from './hooks/usePrivateQuery'

package/link/RemovePrivateContextDirectivesLink.ts

@@ -0,0 +1,19 @@
+import type { NextLink, Operation } from '../apollo'
+import { ApolloLink, removeArgumentsFromDocument, removeDirectivesFromDocument } from '../apollo'
+
+export class RemovePrivateContextDirectivesLink extends ApolloLink {
+  // eslint-disable-next-line class-methods-use-this
+  request(operation: Operation, forward?: NextLink) {
+    if (!forward) throw new Error('This is not a terminal link!')
+
+    let modifiedQuery = operation.query
+
+    modifiedQuery =
+      removeDirectivesFromDocument([{ name: 'privateContext' }], modifiedQuery) ?? modifiedQuery
+    modifiedQuery =
+      removeArgumentsFromDocument([{ name: 'context' }], modifiedQuery) ?? modifiedQuery
+
+    operation.query = modifiedQuery
+    return forward(operation)
+  }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.1-canary.0",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,25 +13,26 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.99",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.99",
+    "@apollo/client": "~3.12.3",
     "@graphql-codegen/add": "5.0.3",
     "@graphql-codegen/fragment-matcher": "5.0.2",
     "@graphql-codegen/introspection": "4.0.3",
     "@graphql-codegen/schema-ast": "4.1.0",
-    "@graphql-codegen/typed-document-node": "5.0.9",
-    "@graphql-codegen/typescript": "4.0.9",
-    "@graphql-codegen/typescript-apollo-client-helpers": "2.2.6",
-    "@graphql-codegen/typescript-document-nodes": "4.0.9",
-    "@graphql-codegen/typescript-operations": "4.2.3",
-    "apollo3-cache-persist": "^0.15.0"
+    "@graphql-codegen/typed-document-node": "5.0.12",
+    "@graphql-codegen/typescript": "4.1.2",
+    "@graphql-codegen/typescript-apollo-client-helpers": "3.0.0",
+    "@graphql-codegen/typescript-document-nodes": "4.0.12",
+    "@graphql-codegen/typescript-operations": "4.4.0",
+    "apollo3-cache-persist": "^0.15.0",
+    "graphql": "^16.10.0"
   },
   "peerDependencies": {
-    "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
-    "graphql": "^16.7.1",
+    "@graphcommerce/eslint-config-pwa": "^9.0.1-canary.0",
+    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.1-canary.0",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.1-canary.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.1-canary.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.1-canary.0",
+    "@graphql-mesh/plugin-http-details-extensions": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

package/schema/InContext.graphqls

@@ -1,9 +1,9 @@
 """
 By providing these values the Apollo Client cache will automatically scope the cache to these specific values.
 
-If a InContext is provided
+If a PrivateContext is provided
 """
-input InContextInput {
+input PrivateContext {
   loggedIn: Boolean
 
   # storeCode: String
@@ -13,4 +13,4 @@ input InContextInput {
 """
 Certain values are only available in the context of a session and need to have the cache scoped to these values.
 """
-directive @inContext(context: InContextInput) on FIELD
+directive @privateContext(context: PrivateContext) on FIELD

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
 }

package/utils/cachePolicy.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, FetchPolicy } from '@apollo/client'
+import type { ApolloClient, FetchPolicy } from '@apollo/client'
 import { getPreviewData } from './getPreviewData'
 
 export function cachePolicy(

package/utils/getPreviewData.ts

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