@graphcommerce/graphql 8.1.0-canary.43 → 8.1.0-canary.45

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 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

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/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

@@ -5,3 +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'

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