@graphcommerce/graphcms-ui 8.1.0-canary.41 → 8.1.0-canary.43

package/CHANGELOG.md

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

package/index.ts

@@ -1,4 +1,3 @@
 export * from './components'
 export * from './graphql'
 export * from './lib'
-export * from './links/createHygraphLink'

package/lib/getAllHygraphPages.ts

@@ -1,4 +1,5 @@
 import type { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
+import { cacheFirst } from '@graphcommerce/graphql'
 import { HygraphAllPagesDocument, HygraphAllPagesQuery } from '../graphql'
 
 type Urls = { url: string }
@@ -8,10 +9,11 @@ export async function getAllHygraphPages(
   options: { pageSize?: number } = {},
 ) {
   const { pageSize = 100 } = options
+
   const query = client.query({
     query: HygraphAllPagesDocument,
     variables: { first: pageSize },
-    fetchPolicy: process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined,
+    fetchPolicy: cacheFirst(client),
   })
   const pages: Promise<ApolloQueryResult<HygraphAllPagesQuery>>[] = [query]
 
@@ -24,7 +26,7 @@ export async function getAllHygraphPages(
         client.query({
           query: HygraphAllPagesDocument,
           variables: { first: pageSize, skip: pageSize * (i - 1) },
-          fetchPolicy: process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined,
+          fetchPolicy: cacheFirst(client),
         }),
       )
     }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.41",
+  "version": "8.1.0-canary.43",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.41",
-    "@graphcommerce/graphql": "^8.1.0-canary.41",
-    "@graphcommerce/image": "^8.1.0-canary.41",
-    "@graphcommerce/next-ui": "^8.1.0-canary.41",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.41",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.41",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.43",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.43",
+    "@graphcommerce/graphql": "^8.1.0-canary.43",
+    "@graphcommerce/image": "^8.1.0-canary.43",
+    "@graphcommerce/next-ui": "^8.1.0-canary.43",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.43",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.43",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/plugins/HygraphPreviewModeToolbar.tsx

@@ -0,0 +1,80 @@
+import {
+  usePreviewModeForm,
+  type PreviewModeToolbarProps,
+  SelectElement,
+  previewModeDefaults,
+} from '@graphcommerce/ecommerce-ui'
+import { TypedDocumentNode, gql, useQuery } from '@graphcommerce/graphql'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import React, { useMemo } from 'react'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/ecommerce-ui',
+}
+
+const ContentStages = gql`
+  query {
+    __type(name: "Stage") {
+      name
+      enumValues {
+        name
+        description
+      }
+    }
+  }
+` as TypedDocumentNode<{
+  __type: {
+    name: 'Stage'
+    enumValues: {
+      name: string
+      description: string
+    }[]
+  }
+}>
+
+const HygraphConfig = React.memo(() => {
+  const form = usePreviewModeForm()
+  const { control } = form
+
+  const contentStages = useQuery(ContentStages)
+
+  const defaultValue = previewModeDefaults().hygraphStage ?? 'PUBLISHED'
+
+  return useMemo(
+    () => (
+      <SelectElement
+        control={control}
+        name='previewData.hygraphStage'
+        defaultValue={defaultValue}
+        color='secondary'
+        select
+        label='Hygraph Stage'
+        size='small'
+        sx={{ width: '150px' }}
+        SelectProps={{ MenuProps: { style: { zIndex: 20000 } } }}
+        onChange={() => {}}
+        options={
+          contentStages.loading
+            ? [{ id: defaultValue, label: defaultValue }]
+            : filterNonNullableKeys(contentStages.data?.__type.enumValues).map(({ name }) => ({
+                id: name,
+                label: name,
+              }))
+        }
+      />
+    ),
+    [contentStages.data?.__type.enumValues, contentStages.loading, control],
+  )
+})
+
+export const PreviewModeToolbar = (props: PluginProps<PreviewModeToolbarProps>) => {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <HygraphConfig />
+    </>
+  )
+}

package/plugins/hygraphGraphqlConfig.ts

@@ -4,6 +4,12 @@ import type { FunctionPlugin } from '@graphcommerce/next-config'
 export const func = 'graphqlConfig'
 export const exported = '@graphcommerce/graphql'
 
+declare module '@graphcommerce/graphql/config' {
+  interface PreviewData {
+    hygraphStage?: string
+  }
+}
+
 const hygraphGraphqlConfig: FunctionPlugin<typeof graphqlConfig> = (prev, config) => {
   const results = prev(config)
 
@@ -14,6 +20,12 @@ const hygraphGraphqlConfig: FunctionPlugin<typeof graphqlConfig> = (prev, config
   const hygraphLink = setContext((_, context) => {
     if (!context.headers) context.headers = {}
     context.headers['gcms-locales'] = locales.join(',')
+
+    const stage = config.previewData?.hygraphStage ?? 'DRAFT'
+    if (config.preview) {
+      context.headers['gcms-stage'] = stage
+    }
+
     return context
   })
 

package/plugins/hygraphPreviewModeDefaults.ts

@@ -0,0 +1,12 @@
+import { previewModeDefaults as base } from '@graphcommerce/ecommerce-ui'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/ecommerce-ui',
+}
+
+export const previewModeDefaults: FunctionPlugin<typeof base> = (prev, ...args) => ({
+  ...prev(...args),
+  hygraphStage: 'DRAFT',
+})

package/links/createHygraphLink.ts

@@ -1,13 +0,0 @@
-import { setContext } from '@graphcommerce/graphql'
-import { storefrontConfig } from '@graphcommerce/next-ui'
-
-/** Add a gcms-locales header to make sure queries return in a certain language. */
-export const createHygraphLink = (locale?: string) =>
-  setContext((_, context) => {
-    if (!context.headers) context.headers = {}
-
-    const locales = storefrontConfig(locale)?.hygraphLocales
-    if (locales) context.headers['gcms-locales'] = locales.join(',')
-
-    return context
-  })