@graphcommerce/graphql 9.0.0-canary.114 → 9.0.0-canary.116

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.116
+
+### Patch Changes
+
+- [#2452](https://github.com/graphcommerce-org/graphcommerce/pull/2452) [`5dfd3b2`](https://github.com/graphcommerce-org/graphcommerce/commit/5dfd3b201255ef35263485d04153d37bb7e4fe67) - Renamed useInContextQuery to usePrivateQuery ([@paales](https://github.com/paales))
+
+## 9.0.0-canary.115
+
 ## 9.0.0-canary.114
 
 ## 9.0.0-canary.113

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

@@ -4,7 +4,7 @@
 import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import type { FetchResult, NormalizedCacheObject, TypedDocumentNode } from '../apollo'
-import { ApolloClient, InMemoryCache, getOperationName } from '../apollo'
+import { ApolloClient, getOperationName, InMemoryCache } from '../apollo'
 
 type ApolloClientTest = {
   apolloClient: ApolloClient<NormalizedCacheObject>
@@ -27,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',
@@ -37,5 +38,3 @@ const test = base.extend<ApolloClientTest>({
     await use(client)
   },
 })
-
-export { test }

package/components/{InContextMask/InContextMask.tsx → PrivateQueryMask/PrivateQueryMask.tsx}

@@ -7,7 +7,7 @@ import React, { createContext, useContext, useMemo } from 'react'
 
 type MaskProp = { skeleton?: SkeletonProps }
 
-interface InContextMaskTypeMap<
+interface PrivateQueryMaskTypeMap<
   AdditionalProps = MaskProp,
   RootComponent extends React.ElementType = 'div',
 > {
@@ -15,19 +15,21 @@ interface InContextMaskTypeMap<
   defaultComponent: RootComponent
 }
 
-export type InContextMaskProps<
-  RootComponent extends React.ElementType = InContextMaskTypeMap['defaultComponent'],
+export type PrivateQueryMaskProps<
+  RootComponent extends React.ElementType = PrivateQueryMaskTypeMap['defaultComponent'],
   AdditionalProps = MaskProp,
-> = OverrideProps<InContextMaskTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+> = OverrideProps<PrivateQueryMaskTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
   component?: React.ElementType
 }
 
-type InContextMaskContextType = { mask: boolean }
+type PrivateQueryMaskContextType = { mask: boolean }
 
-export const InContextMaskContext = createContext<InContextMaskContextType | undefined>(undefined)
+export const PrivateQueryMaskContext = createContext<PrivateQueryMaskContextType | undefined>(
+  undefined,
+)
 
-export function useInContextInputMask(): InContextMaskContextType {
-  const context = useContext(InContextMaskContext)
+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
@@ -35,7 +37,7 @@ export function useInContextInputMask(): InContextMaskContextType {
   if (!context) {
     if (isSSR)
       console.warn(
-        "useInContextInputMask was used without a InContextMaskProvider, this means that customer specific pricing probably isn't working.",
+        "usePrivateQueryMask was used without a PrivateQueryMaskProvider, this means that customer specific pricing probably isn't working.",
       )
 
     return { mask: false }
@@ -43,31 +45,31 @@ export function useInContextInputMask(): InContextMaskContextType {
   return context
 }
 
-export function InContextMaskProvider(props: { mask: boolean; children: React.ReactNode }) {
+export function PrivateQueryMaskProvider(props: { mask: boolean; children: React.ReactNode }) {
   const { mask = false, children } = props
   return (
-    <InContextMaskContext.Provider value={useMemo(() => ({ mask }), [mask])}>
+    <PrivateQueryMaskContext.Provider value={useMemo(() => ({ mask }), [mask])}>
       {children}
-    </InContextMaskContext.Provider>
+    </PrivateQueryMaskContext.Provider>
   )
 }
 
-export function useInContextInputMaskSx(props: { sx?: SxProps<Theme>; skeleton?: SkeletonProps }) {
+export function usePrivateQueryMaskSx(props: { sx?: SxProps<Theme>; skeleton?: SkeletonProps }) {
   const { sx = [], skeleton } = props
-  const { mask } = useInContextInputMask()
+  const { mask } = usePrivateQueryMask()
 
   return {
     mask,
     componentSx: [
       mask && {
-        [cssFlag('in-context')]: { display: 'none' },
+        [cssFlag('private-query')]: { display: 'none' },
       },
       ...(Array.isArray(sx) ? sx : [sx]),
     ],
     maskSx: [
       {
         display: 'inline-block',
-        [cssNotFlag('in-context')]: { display: 'none' },
+        [cssNotFlag('private-query')]: { display: 'none' },
       },
       ...(Array.isArray(sx) ? sx : [sx]),
       ...(Array.isArray(skeleton?.sx) ? skeleton.sx : [skeleton?.sx]),
@@ -75,12 +77,10 @@ export function useInContextInputMaskSx(props: { sx?: SxProps<Theme>; skeleton?:
   }
 }
 
-/**
- * A component that renders a skeleton mask when the user is signed in.
- */
-export function InContextMask(props: InContextMaskProps) {
+/** 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 } = useInContextInputMaskSx(props)
+  const { mask, componentSx, maskSx } = usePrivateQueryMaskSx(props)
 
   return (
     <>

package/config.ts

@@ -2,6 +2,7 @@ import type { GraphCommerceStorefrontConfig } from '@graphcommerce/next-config'
 import type { ApolloLink, TypePolicies } from '@apollo/client'
 import type { SetRequired } from 'type-fest'
 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,51 +1,54 @@
-import type { InContextInput, InputMaybe } 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 type { QueryHookOptions, QueryResult, TypedDocumentNode } from '../apollo'
+import type { MaybeMasked, QueryHookOptions, QueryResult, TypedDocumentNode } from '../apollo'
 import { useQuery } from '../apollo'
-import { InContextMaskContext } from '../components/InContextMask/InContextMask'
-import { useInContextInput } from './useInContextInput'
+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
@@ -57,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/{useInContextInput.ts → usePrivateQueryContext.ts}

@@ -1,10 +1,10 @@
-import type { InContextInput } from '@graphcommerce/graphql-mesh'
+import type { PrivateContext } from '@graphcommerce/graphql-mesh'
 import type { ApolloClient } from '@apollo/client'
 
-export function getInContextInput(
+export function getPrivateQueryContext(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
   client: ApolloClient<any>,
-): InContextInput | null {
+): PrivateContext | null {
   return null
 }
 
@@ -15,6 +15,6 @@ export function getInContextInput(
  *
  * @see @graphcommerce/magento-customer/plugins/magentoCustomerGetInContext.ts
  *
- * Note: ONLY return a value if the frontend should use the inContext directive.
+ * Note: ONLY return a value if the frontend should use the privateContext directive.
  */
-export const useInContextInput = (): InContextInput | null => null
+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.114",
+  "version": "9.0.0-canary.116",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,7 +13,7 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "~3.11.10",
+    "@apollo/client": "~3.12.3",
     "@graphql-codegen/add": "5.0.3",
     "@graphql-codegen/fragment-matcher": "5.0.2",
     "@graphql-codegen/introspection": "4.0.3",
@@ -24,14 +24,15 @@
     "@graphql-codegen/typescript-document-nodes": "4.0.12",
     "@graphql-codegen/typescript-operations": "4.4.0",
     "apollo3-cache-persist": "^0.15.0",
-    "graphql": "^16.9.0"
+    "graphql": "^16.10.0"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.114",
-    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.114",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.114",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.114",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.114",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.116",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.116",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.116",
+    "@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