@graphcommerce/magento-customer 9.0.0-canary.57 → 9.0.0-canary.58

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.58
+
+### Minor Changes
+
+- [#2330](https://github.com/graphcommerce-org/graphcommerce/pull/2330) [`8de9c13`](https://github.com/graphcommerce-org/graphcommerce/commit/8de9c13b977633104ab81ce04def1dd6d1d4411b) - Added support X-Magento-Cache-Id to allow Varnish to cache requests that are made in the browser while users are logged in. For example the products query can now be cached for logged in users. Functionality can be disabled by setting `customerXMagentoCacheIdDisable: true` in your configuration. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.57
 
 ## 9.0.0-canary.56

package/Config.graphqls

@@ -14,6 +14,13 @@ extend input GraphCommerceConfig {
   Enable customer account deletion through the account section
   """
   customerDeleteEnabled: Boolean
+
+  """
+  X-Magento-Cache-Id allows Varnish to cache requests that are made in the browser while users are logged in. For example the products query can now be cached for logged in users.
+
+  This can be disabled when Varnish is running out of available memory.
+  """
+  customerXMagentoCacheIdDisable: Boolean
 }
 
 extend input GraphCommerceDebugConfig {

package/hooks/CustomerToken.graphql

@@ -1,7 +1,9 @@
 query CustomerToken {
   customerToken @client {
+    __typename
     ...CustomerTokenFragment
     createdAt
     valid
+    xMagentoCacheId
   }
 }

package/link/customerLink.ts

@@ -1,5 +1,11 @@
 import { globalApolloClient } from '@graphcommerce/graphql'
-import { ApolloLink, fromPromise, onError, setContext } from '@graphcommerce/graphql/apollo'
+import {
+  ApolloCache,
+  ApolloLink,
+  fromPromise,
+  onError,
+  setContext,
+} from '@graphcommerce/graphql/apollo'
 import { ErrorCategory } from '@graphcommerce/magento-graphql'
 import type { GraphQLError } from 'graphql'
 import { NextRouter } from 'next/router'
@@ -8,6 +14,13 @@ import { CustomerTokenDocument } from '../hooks'
 
 export type PushRouter = Pick<NextRouter, 'push' | 'events'>
 
+declare module '@apollo/client' {
+  interface DefaultContext {
+    cache?: ApolloCache<unknown>
+    headers?: Record<string, string>
+  }
+}
+
 async function pushWithPromise(router: Pick<NextRouter, 'push' | 'events'>, url: string) {
   try {
     await router.push(url)
@@ -45,7 +58,7 @@ const addTokenHeader = setContext((_, context) => {
   if (!context.headers) context.headers = {}
 
   try {
-    const query = context.cache.readQuery({ query: CustomerTokenDocument })
+    const query = context.cache?.readQuery({ query: CustomerTokenDocument })
 
     if (query?.customerToken?.token) {
       context.headers.authorization = `Bearer ${query?.customerToken?.token}`
@@ -73,7 +86,7 @@ const customerErrorLink = (router: PushRouter) =>
     /** If the error we're dealing with is not an authorization error, we're done. */
     if (!authError) return undefined
 
-    if (!oldHeaders.authorization) {
+    if (!oldHeaders?.authorization) {
       // console.error(
       //   'No authorization header found in request, but an authorization error was returned, this is a bug. This is the operation:',
       //   operation,

package/link/xMagentoCacheIdHeader.ts

@@ -0,0 +1,35 @@
+import { ApolloLink, DefaultContext } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '../hooks'
+
+export const xMagentoCacheIdHeader = new ApolloLink((operation, forward) => {
+  operation.setContext((context: DefaultContext) => {
+    const xMagentoCacheId = context.cache?.readQuery({ query: CustomerTokenDocument })
+      ?.customerToken?.xMagentoCacheId
+    if (!xMagentoCacheId) return context
+
+    return { ...context, headers: { ...context.headers, 'x-magento-cache-id': xMagentoCacheId } }
+  })
+
+  return forward(operation).map((data) => {
+    const cache = operation.getContext().cache
+    if (!cache) return data
+
+    const xMagentoCacheId = (data.extensions as { forwardedHeaders: Record<string, string> })
+      .forwardedHeaders['x-magento-cache-id']
+    if (!xMagentoCacheId) return data
+
+    const tokenResult = cache.readQuery({ query: CustomerTokenDocument })
+
+    if (
+      !tokenResult?.customerToken ||
+      tokenResult.customerToken?.xMagentoCacheId === xMagentoCacheId
+    )
+      return data
+
+    cache.writeQuery({
+      query: CustomerTokenDocument,
+      data: { customerToken: { ...tokenResult.customerToken, xMagentoCacheId } },
+    })
+    return data
+  })
+})

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.57",
+  "version": "9.0.0-canary.58",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.57",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.57",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.57",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.57",
-    "@graphcommerce/graphql": "^9.0.0-canary.57",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.57",
-    "@graphcommerce/image": "^9.0.0-canary.57",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.57",
-    "@graphcommerce/magento-store": "^9.0.0-canary.57",
-    "@graphcommerce/next-ui": "^9.0.0-canary.57",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.57",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.57",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.57",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.58",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.58",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.58",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.58",
+    "@graphcommerce/graphql": "^9.0.0-canary.58",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.58",
+    "@graphcommerce/image": "^9.0.0-canary.58",
+    "@graphcommerce/magento-graphql": "^9.0.0-canary.58",
+    "@graphcommerce/magento-store": "^9.0.0-canary.58",
+    "@graphcommerce/next-ui": "^9.0.0-canary.58",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.58",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.58",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.58",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/XMagentoCacheIdGraphQLProvider.tsx

@@ -0,0 +1,14 @@
+import { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { xMagentoCacheIdHeader } from '../link/xMagentoCacheIdHeader'
+import { GraphQLProviderProps } from '@graphcommerce/graphql'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/graphql',
+  ifConfig: ['customerXMagentoCacheIdDisable', false],
+}
+
+export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
+  const { Prev, links = [], ...rest } = props
+  return <Prev {...rest} links={[...links, xMagentoCacheIdHeader]} />
+}

package/schema/CustomerToken.graphqls

@@ -5,4 +5,5 @@ extend type Query {
 extend type CustomerToken {
   createdAt: String @deprecated(reason: "Value is not used in GraphCommerce, but still filled in.")
   valid: Boolean
+  xMagentoCacheId: String
 }

package/typePolicies.ts

@@ -16,6 +16,7 @@ const generateCustomerToken: FieldPolicy<Mutation['generateCustomerToken']> = {
           token: options.readField('token', incoming) as string,
           createdAt: new Date().toUTCString(),
           valid: true,
+          xMagentoCacheId: null,
         },
       },
     })