Merge pull request #2308 from graphcommerce-org/feature/GCOM-1165-dra…

…ft-mode Preview mode toolbar
graphcommerce-org · Jul 4, 2024 · 61639e5 · 61639e5
2 parents 3fa00b1 + 7357ba1
commit 61639e5
Show file tree

Hide file tree

Showing 91 changed files with 872 additions and 287 deletions.
diff --git a/.changeset/sweet-tips-listen.md b/.changeset/sweet-tips-listen.md
@@ -0,0 +1,7 @@
+---
+'@graphcommerce/hygraph-dynamic-rows-ui': patch
+'@graphcommerce/graphcms-ui': patch
+'@graphcommerce/graphql': patch
+---
+
+Added Draft Mode support. When enabled it will be shown.
diff --git a/docs/framework/config.md b/docs/framework/config.md
@@ -181,6 +181,8 @@ Enable customer account deletion through the account section
 
 #### dataLayer: [DatalayerConfig](#DatalayerConfig)
 
+Datalayer config
+
 #### debug: [GraphCommerceDebugConfig](#GraphCommerceDebugConfig)
 
 Debug configuration for GraphCommerce

diff --git a/docs/framework/static-generation.md b/docs/framework/static-generation.md
@@ -43,8 +43,10 @@ data needed to render the layout (header, footer, menu etc.)
 
 export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
  ...
-
-  const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
 
   return {
     props: {

diff --git a/docs/getting-started/pages.md b/docs/getting-started/pages.md
@@ -93,9 +93,9 @@ AboutUs.pageOptions = pageOptions
 
 export default AboutUs
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const layout = staticClient.query({
@@ -210,9 +210,9 @@ AboutUs.pageOptions = pageOptions
 
 export default AboutUs
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const page = hygraphPageContent(staticClient, 'about/about-us')
@@ -259,12 +259,10 @@ export const getStaticPaths: GetPageStaticPaths = (context) => ({
   fallback: 'blocking',
 })
 
-export const getStaticProps: GetPageStaticProps = async ({
-  locale,
-  params,
-}) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const { params } = context
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const page = hygraphPageContent(staticClient, `about/${params?.url}`)

diff --git a/examples/magento-graphcms/.meshrc.yml b/examples/magento-graphcms/.meshrc.yml
@@ -6,6 +6,7 @@ sources:
         endpoint: '{graphCommerce.hygraphEndpoint}'
         operationHeaders:
           gcms-locales: "{context.headers['gcms-locales']}"
+          gcms-stage: "{context.headers['gcms-stage']}"
     transforms:
       - filterSchema:
           filters:
@@ -14,7 +15,7 @@ sources:
             # Remove queries: `query { node, row*, asset*, scheduled*, *Version, user* }`
             - 'Query.!{node,asset*,scheduled*,*Version,user*}'
             # Remove field arguments: `query { anyfield(after,before,last,forceParentLocale,locales) { ... } }`
-            - '*.*.!{after,before,last,forceParentLocale,locales}'
+            - '*.*.!{after,before,last,forceParentLocale,locales,stage}'
             # Remove type any input or type fields: `input MyInput {}` or `type MyType { anyfield }`
             - '*.!{localizations,scheduledIn,documentInStages*,createdAt*,updatedAt*,publishedAt*,createdBy,updatedBy,publishedBy,history,scheduledIn*}'
       - prune:
@@ -31,5 +32,6 @@ sources:
           X-ReCaptcha: "{context.headers['x-recaptcha']}"
           Preview-Version: "{context.headers['preview-version']}"
           Content-Currency: "{context.headers['content-currency']}"
+          X-Magento-Cache-Id: "{context.headers['x-magento-cache-id']}"
 serve:
   playground: true
diff --git a/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts b/examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts
@@ -1,5 +1,4 @@
 import {
-  NormalizedCacheObject,
   ApolloClient,
   ApolloLink,
   errorLink,
@@ -9,14 +8,18 @@ import {
   graphqlConfig,
   mergeTypePolicies,
   FetchPolicy,
+  DefaultOptions,
+  PreviewConfig,
 } from '@graphcommerce/graphql'
 import { MeshApolloLink, getBuiltMesh } from '@graphcommerce/graphql-mesh'
 import { storefrontConfig, storefrontConfigDefault } from '@graphcommerce/next-ui'
+import { GetStaticPropsContext } from 'next'
 import { i18nSsrLoader } from '../i18n/I18nProvider'
 
-function client(locale: string | undefined, fetchPolicy: FetchPolicy = 'no-cache') {
+function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-cache') {
   const config = graphqlConfig({
-    storefront: storefrontConfig(locale) ?? storefrontConfigDefault(),
+    storefront: storefrontConfig(context.locale) ?? storefrontConfigDefault(),
+    ...(context as PreviewConfig),
   })
 
   return new ApolloClient({
@@ -32,36 +35,22 @@ function client(locale: string | undefined, fetchPolicy: FetchPolicy = 'no-cache
     }),
     ssrMode: true,
     name: 'ssr',
-    defaultOptions: { query: { errorPolicy: 'all', fetchPolicy } },
+    defaultOptions: {
+      preview: context as PreviewConfig,
+      query: { errorPolicy: 'all', fetchPolicy },
+    } as DefaultOptions,
   })
 }
 
-const sharedClient: {
-  [locale: string]: ApolloClient<NormalizedCacheObject>
-} = {}
-
 /**
  * Any queries made with the graphqlSharedClient will be send to the browser and injected in the
  * browser's cache.
  */
-export function graphqlSharedClient(locale: string | undefined) {
-  if (!locale) return client(locale, 'cache-first')
-
-  // Create a client if it doesn't exist for the locale.
-  if (!sharedClient[locale]) sharedClient[locale] = client(locale, 'cache-first')
-  return sharedClient[locale]
+export function graphqlSharedClient(context: GetStaticPropsContext) {
+  return client(context, 'cache-first')
 }
 
-const ssrClient: {
-  [locale: string]: ApolloClient<NormalizedCacheObject>
-} = {}
-
-export function graphqlSsrClient(locale: string | undefined) {
-  i18nSsrLoader(locale)
-  if (!locale) return client(locale, 'no-cache')
-
-  // Create a client if it doesn't exist for the locale.
-  if (!ssrClient[locale]) ssrClient[locale] = client(locale, 'no-cache')
-
-  return ssrClient[locale]
+export function graphqlSsrClient(context: GetStaticPropsContext) {
+  i18nSsrLoader(context.locale)
+  return client(context, 'no-cache')
 }
diff --git a/examples/magento-graphcms/pages/404.tsx b/examples/magento-graphcms/pages/404.tsx
@@ -8,6 +8,7 @@ import { Box, Container, Typography, Link } from '@mui/material'
 import React from 'react'
 import { LayoutDocument, LayoutNavigation, LayoutNavigationProps } from '../components'
 import { graphqlSsrClient, graphqlSharedClient } from '../lib/graphql/graphqlSsrClient'
+import { cacheFirst } from '@graphcommerce/graphql'
 
 type Props = Record<string, unknown>
 type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props>
@@ -61,11 +62,14 @@ RouteNotFoundPage.pageOptions = {
 
 export default RouteNotFoundPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
   const conf = client.query({ query: StoreConfigDocument })
-  const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
 
   return {
     props: {

diff --git a/examples/magento-graphcms/pages/[...url].tsx b/examples/magento-graphcms/pages/[...url].tsx
@@ -1,6 +1,6 @@
 import { PageOptions } from '@graphcommerce/framer-next-pages'
 import { Asset, hygraphPageContent, HygraphPagesQuery } from '@graphcommerce/graphcms-ui'
-import { flushMeasurePerf } from '@graphcommerce/graphql'
+import { cacheFirst, flushMeasurePerf } from '@graphcommerce/graphql'
 import {
   appendSiblingsAsChildren,
   CategoryBreadcrumbs,
@@ -140,26 +140,30 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
   // Disable getStaticPaths while in development mode
   if (process.env.NODE_ENV === 'development') return { paths: [], fallback: 'blocking' }
 
-  const path = (loc: string) => getCategoryStaticPaths(graphqlSsrClient(loc), loc)
+  const path = (locale: string) => getCategoryStaticPaths(graphqlSsrClient({ locale }), locale)
   const paths = (await Promise.all(locales.map(path))).flat(1)
   return { paths, fallback: 'blocking' }
 }
 
-export const getStaticProps: GetPageStaticProps = async ({ params, locale }) => {
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const { params, locale } = context
   const [url, query] = extractUrlQuery(params)
   if (!url || !query) return { notFound: true }
 
-  const client = graphqlSharedClient(locale)
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
   const filterTypes = getFilterTypes(client)
 
-  const staticClient = graphqlSsrClient(locale)
+  const staticClient = graphqlSsrClient(context)
 
   const categoryPage = staticClient.query({
     query: CategoryPageDocument,
     variables: { url },
   })
-  const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
 
   const productListParams = parseParams(url, query, await filterTypes)
   const filteredCategoryUid = productListParams && productListParams.filters.category_uid?.in?.[0]

diff --git a/examples/magento-graphcms/pages/account/addresses/add.tsx b/examples/magento-graphcms/pages/account/addresses/add.tsx
@@ -59,8 +59,8 @@ AddNewAddressPage.pageOptions = pageOptions
 
 export default AddNewAddressPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/addresses/edit.tsx b/examples/magento-graphcms/pages/account/addresses/edit.tsx
@@ -74,8 +74,8 @@ EditAddressPage.pageOptions = pageOptions
 
 export default EditAddressPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/addresses/index.tsx b/examples/magento-graphcms/pages/account/addresses/index.tsx
@@ -59,9 +59,9 @@ AccountAddressesPage.pageOptions = pageOptions
 
 export default AccountAddressesPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   const countryRegions = staticClient.query({

diff --git a/examples/magento-graphcms/pages/account/authentication/index.tsx b/examples/magento-graphcms/pages/account/authentication/index.tsx
@@ -47,8 +47,8 @@ AccountAuthenticationPage.pageOptions = pageOptions
 
 export default AccountAuthenticationPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/contact/index.tsx b/examples/magento-graphcms/pages/account/contact/index.tsx
@@ -59,8 +59,8 @@ AccountContactPage.pageOptions = pageOptions
 
 export default AccountContactPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/delete/index.tsx b/examples/magento-graphcms/pages/account/delete/index.tsx
@@ -40,8 +40,8 @@ AccountDeletePage.pageOptions = pageOptions
 
 export default AccountDeletePage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
   if (
     import.meta.graphCommerce.magentoVersion < 246 ||

diff --git a/examples/magento-graphcms/pages/account/forgot-password.tsx b/examples/magento-graphcms/pages/account/forgot-password.tsx
@@ -41,8 +41,8 @@ AccountForgotPasswordPage.pageOptions = pageOptions
 
 export default AccountForgotPasswordPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/index.tsx b/examples/magento-graphcms/pages/account/index.tsx
@@ -1,5 +1,5 @@
 import { PageOptions } from '@graphcommerce/framer-next-pages'
-import { useQuery } from '@graphcommerce/graphql'
+import { cacheFirst, useQuery } from '@graphcommerce/graphql'
 import {
   AccountDashboardDocument,
   AccountMenu,
@@ -167,11 +167,14 @@ AccountIndexPage.pageOptions = pageOptions
 
 export default AccountIndexPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const staticClient = graphqlSsrClient(locale)
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const staticClient = graphqlSsrClient(context)
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
-  const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
 
   return {
     props: {

diff --git a/examples/magento-graphcms/pages/account/name/index.tsx b/examples/magento-graphcms/pages/account/name/index.tsx
@@ -66,8 +66,8 @@ AccountNamePage.pageOptions = pageOptions
 
 export default AccountNamePage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/orders/index.tsx b/examples/magento-graphcms/pages/account/orders/index.tsx
@@ -76,8 +76,8 @@ AccountOrdersPage.pageOptions = pageOptions
 
 export default AccountOrdersPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {

diff --git a/examples/magento-graphcms/pages/account/orders/view.tsx b/examples/magento-graphcms/pages/account/orders/view.tsx
@@ -90,9 +90,9 @@ OrderDetailPage.pageOptions = pageOptions
 
 export default OrderDetailPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
   const config = client.query({ query: StoreConfigDocument })
 
   const countryRegions = staticClient.query({

diff --git a/examples/magento-graphcms/pages/account/reviews/add.tsx b/examples/magento-graphcms/pages/account/reviews/add.tsx
@@ -103,8 +103,8 @@ AccountReviewsAddPage.pageOptions = pageOptions
 
 export default AccountReviewsAddPage
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
   return {