@graphcommerce/graphql 8.1.0-canary.9 → 9.0.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+### Minor Changes
+
+- [#2315](https://github.com/graphcommerce-org/graphcommerce/pull/2315) [`fb9118e`](https://github.com/graphcommerce-org/graphcommerce/commit/fb9118ec819d1b507d4fbde04f2ca34ec01ecf49) - Add guestOrder functionality, remove `size: 'max'` from getStaticProps
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.46
+
+### Patch Changes
+
+- [#2314](https://github.com/graphcommerce-org/graphcommerce/pull/2314) [`fe8fce7`](https://github.com/graphcommerce-org/graphcommerce/commit/fe8fce7f5a82e227ed4a1992415af73fa7d0bb79) - Importing \*.interceptor is NOT allowed
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.45
+
+### Patch Changes
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`d066e6f`](https://github.com/graphcommerce-org/graphcommerce/commit/d066e6f904ca68a8771ab73ce30aa06d11fc71b6) - When loading a page, always create a new graphql client, so that cache isn't shared for each request, causing an unnecessary large page size.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+### Patch Changes
+
+- [#2308](https://github.com/graphcommerce-org/graphcommerce/pull/2308) [`8faa5ac`](https://github.com/graphcommerce-org/graphcommerce/commit/8faa5ac618ecfdacd6d5eb751b4110c423aef97f) - Added Draft Mode support. When enabled it will be shown.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8

package/components/GraphQLProvider/GraphQLProvider.tsx

@@ -5,12 +5,18 @@ import {
   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 { AppProps } from 'next/app'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ApolloClientConfig, graphqlConfig, ApolloClientConfigInput } from '../../config'
+import {
+  ApolloClientConfig,
+  graphqlConfig,
+  ApolloClientConfigInput,
+  PreviewConfig,
+} from '../../config'
 import fragments from '../../generated/fragments.json'
 import { createCacheReviver } from './createCacheReviver'
 import { errorLink } from './errorLink'
@@ -31,13 +37,19 @@ export type GraphQLProviderProps = AppProps &
  * Take a look at the props to see possible customization options.
  */
 export function GraphQLProvider(props: GraphQLProviderProps) {
-  const { children, links, migrations, policies, pageProps } = props
+  const { children, links, migrations, policies, pageProps, router } = props
   const state = (pageProps as { apolloState?: NormalizedCacheObject }).apolloState
 
   const stateRef = useRef(state)
 
   const storefront = useStorefrontConfig()
-  const conf = graphqlConfig({ links, migrations, policies, storefront })
+  const conf = graphqlConfig({
+    links,
+    migrations,
+    policies,
+    storefront,
+    preview: router.isPreview,
+  })
   const config = useRef<ApolloClientConfig>(conf)
   config.current = conf
 
@@ -62,7 +74,17 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
     if (stateRef.current) cache.restore(stateRef.current)
 
     const ssrMode = typeof window === 'undefined'
-    return new ApolloClient({ link, cache, name: 'web', ssrMode })
+    return new ApolloClient({
+      link,
+      cache,
+      name: 'web',
+      ssrMode,
+      defaultOptions: {
+        preview: {
+          preview: router.isPreview,
+        } as PreviewConfig,
+      } as DefaultOptions,
+    })
   })
 
   useEffect(() => {

package/components/GraphQLProvider/persistenceMapper.ts

@@ -30,6 +30,7 @@ export const persistenceMapper = (data: string): Promise<string> => {
     'ROOT_QUERY.countries',
     'ROOT_QUERY.checkoutAgreements',
     'ROOT_QUERY.storeConfig',
+    'ROOT_QUERY.guestOrder',
     'ROOT_QUERY.__type*',
     '*Product:{"uid":"*"}.crosssell_products',
   ])

package/components/InContextMask/InContextMask.tsx

@@ -0,0 +1,85 @@
+import { cssFlag, cssNotFlag } from '@graphcommerce/next-ui'
+import { Box, Skeleton, SkeletonOwnProps, SkeletonProps, SxProps, Theme } from '@mui/material'
+import type { OverrideProps } from '@mui/material/OverridableComponent'
+import React, { createContext, useContext, useMemo } from 'react'
+
+type MaskProp = { skeleton?: SkeletonProps }
+
+interface InContextMaskTypeMap<
+  AdditionalProps = MaskProp,
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & SkeletonOwnProps
+  defaultComponent: RootComponent
+}
+
+export type InContextMaskProps<
+  RootComponent extends React.ElementType = InContextMaskTypeMap['defaultComponent'],
+  AdditionalProps = MaskProp,
+> = OverrideProps<InContextMaskTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType
+}
+
+type InContextMaskContextType = { mask: boolean }
+
+const InContextMaskContext = createContext<InContextMaskContextType | null>(null)
+
+export function useInContextInputMask() {
+  const context = useContext(InContextMaskContext)
+  if (!context) {
+    console.warn(
+      "useInContextInputMask was used without a InContextMaskProvider, this means that customer specific pricing probably isn't working.",
+    )
+    return { mask: false }
+  }
+  return context
+}
+
+export function InContextMaskProvider(props: { mask: boolean; children: React.ReactNode }) {
+  const { mask = false, children } = props
+  return (
+    <InContextMaskContext.Provider value={useMemo(() => ({ mask }), [mask])}>
+      {children}
+    </InContextMaskContext.Provider>
+  )
+}
+
+export function useInContextInputMaskSx(props: { sx?: SxProps<Theme>; skeleton?: SkeletonProps }) {
+  const { sx = [], skeleton } = props
+  const { mask } = useInContextInputMask()
+
+  return {
+    mask,
+    componentSx: [
+      mask && {
+        [cssFlag('in-context')]: { display: 'none' },
+      },
+      ...(Array.isArray(sx) ? sx : [sx]),
+    ],
+    maskSx: [
+      {
+        display: 'inline-block',
+        [cssNotFlag('in-context')]: { 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 InContextMask(props: InContextMaskProps) {
+  const { skeleton, children, ...rest } = props
+  const { mask, componentSx, maskSx } = useInContextInputMaskSx(props)
+
+  return (
+    <>
+      <Box {...rest} sx={componentSx}>
+        {children}
+      </Box>
+      {mask && <Skeleton {...rest} {...skeleton} sx={maskSx} />}
+    </>
+  )
+}

package/config.ts

@@ -1,7 +1,15 @@
 import { ApolloLink, TypePolicies } from '@apollo/client'
 import type { GraphCommerceStorefrontConfig } from '@graphcommerce/next-config'
+import type { SetRequired } from 'type-fest'
 import { MigrateCache } from './components/GraphQLProvider/migrateCache'
 
+export interface PreviewData {}
+
+export type PreviewConfig = {
+  preview?: boolean
+  previewData?: PreviewData & Record<string, unknown>
+}
+
 export type ApolloClientConfigInput = {
   storefront: GraphCommerceStorefrontConfig
 
@@ -17,11 +25,14 @@ export type ApolloClientConfigInput = {
    * yet, we run these migrations.
    */
   migrations?: MigrateCache[]
-}
+} & PreviewConfig
 
-export type ApolloClientConfig = Required<ApolloClientConfigInput>
+export type ApolloClientConfig = SetRequired<
+  ApolloClientConfigInput,
+  'links' | 'policies' | 'migrations'
+>
 
 export function graphqlConfig(config: ApolloClientConfigInput): ApolloClientConfig {
-  const { storefront, links = [], policies = [], migrations = [] } = config
-  return { storefront, links, policies, migrations }
+  const { storefront, links = [], policies = [], migrations = [], ...rest } = config
+  return { storefront, links, policies, migrations, ...rest }
 }

package/hooks/useInContextInput.ts

@@ -0,0 +1,17 @@
+import { ApolloClient } from '@apollo/client'
+import type { InContextInput } from '@graphcommerce/graphql-mesh'
+
+export function getInContextInput(client: ApolloClient<any>): InContextInput | undefined {
+  return {}
+}
+
+/**
+ * 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 inContext directive.
+ */
+export const useInContextInput = (): InContextInput | undefined => undefined

package/hooks/useInContextQuery.ts

@@ -0,0 +1,57 @@
+import type { InputMaybe, InContextInput } 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 { useEffect } from 'react'
+import { QueryHookOptions, QueryResult, TypedDocumentNode, useQuery } from '../apollo'
+import { useInContextInput } from './useInContextInput'
+
+/**
+ * Creates a query that allows fetching data for logged in customers, 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.
+ *
+ * Usage:
+ * - Define a `@inContext(context: $context)` directive in your query
+ * - Use the useInContextQuery
+ */
+export function useInContextQuery<
+  Q,
+  V extends { context?: InputMaybe<InContextInput>; [index: string]: unknown },
+>(
+  document: TypedDocumentNode<Q, V>,
+  options: QueryHookOptions<Q, V>,
+  unscopedResult: Q,
+): Omit<QueryResult<Q, V>, 'data'> & { data: Q; mask: boolean } {
+  const { skip = true } = options
+  const context = useInContextInput()
+  const isSsr = useIsSSR()
+
+  useEffect(() => {
+    if (isSsr) return
+    if (context && !getCssFlag('in-context')) setCssFlag('in-context', true)
+    else if (!context && getCssFlag('in-context')) removeCssFlag('in-context')
+  }, [context, isSsr])
+
+  const clientQuery = useQuery<Q, V>(document, {
+    ...options,
+    variables: { ...options.variables, context } as V,
+    skip: skip && !context,
+  })
+
+  let { data } = clientQuery
+  if (!skip) data ??= clientQuery.previousData
+
+  // If the user is logged in we might need to show a skeleton:
+  let mask = isSsr
+  if (!isSsr && context) {
+    mask = !skip ? !clientQuery.data && !clientQuery.previousData : !clientQuery.data
+  }
+
+  return { ...clientQuery, data: data ?? unscopedResult, mask }
+}

package/index.ts

@@ -3,3 +3,8 @@ export * from './components/GraphQLProvider'
 export { default as fragments } from './generated/fragments.json'
 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'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,8 +13,8 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-codegen-near-operation-file": "8.1.0-canary.9",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "8.1.0-canary.9",
+    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.55",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.55",
     "@graphql-codegen/add": "5.0.1",
     "@graphql-codegen/fragment-matcher": "5.0.1",
     "@graphql-codegen/introspection": "4.0.1",
@@ -28,9 +28,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.55",
     "graphql": "^16.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/schema/InContext.graphqls

@@ -0,0 +1,16 @@
+"""
+By providing these values the Apollo Client cache will automatically scope the cache to these specific values.
+
+If a InContext is provided
+"""
+input InContextInput {
+  loggedIn: Boolean
+
+  # storeCode: String
+  # contentCurrency: String
+}
+
+"""
+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

package/utils/cachePolicy.ts

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

package/utils/getPreviewData.ts

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