@graphcommerce/hygraph-ui 9.0.0-canary.103

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+## 9.0.0-canary.103
+
+### Patch Changes
+
+- [#2421](https://github.com/graphcommerce-org/graphcommerce/pull/2421) [`f71b4e2`](https://github.com/graphcommerce-org/graphcommerce/commit/f71b4e2d13e54dd311eb1465a49df41703b6fef5) - Renamed from `@graphcommerce/graphcms-ui` to `@graphcommerce/hygraph-ui`. See [CHANGELOG.md](../graphcms-ui/CHANGELOG.md) for details. ([@paales](https://github.com/paales))

package/Config.graphqls

@@ -0,0 +1,17 @@
+extend input GraphCommerceConfig {
+  """
+  The HyGraph endpoint.
+
+  > Read-only endpoint that allows low latency and high read-throughput content delivery.
+
+  Project settings -> API Access -> High Performance Read-only Content API
+  """
+  hygraphEndpoint: String!
+}
+
+extend input GraphCommerceStorefrontConfig {
+  """
+  Add a gcms-locales header to make sure queries return in a certain language, can be an array to define fallbacks.
+  """
+  hygraphLocales: [String!]
+}

package/README.md

@@ -0,0 +1,4 @@
+## Configuration
+
+Configure the following ([configuration values](./Config.graphqls)) in your
+graphcommerce.config.js

package/components/Asset/Asset.graphql

@@ -0,0 +1,7 @@
+fragment Asset on Asset {
+  url
+  width
+  height
+  mimeType
+  size
+}

package/components/Asset/Asset.tsx

@@ -0,0 +1,61 @@
+import type { ImageProps } from '@graphcommerce/image'
+import { Image } from '@graphcommerce/image'
+import type { SxProps, Theme } from '@mui/material'
+import { styled } from '@mui/material'
+import { memo } from 'react'
+import type { AssetFragment } from './Asset.gql'
+
+export type { AssetFragment } from './Asset.gql'
+
+type ImageAsset = Omit<AssetFragment, 'width' | 'height'> & {
+  width: number
+  height: number
+}
+
+function isImage(asset: AssetFragment): asset is ImageAsset {
+  return !!(asset.width && asset.height)
+}
+
+type AssetProps = {
+  asset: AssetFragment
+  sx?: SxProps<Theme>
+} & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>
+
+export const Asset = memo<AssetProps>((props) => {
+  const { asset, sx = [], ...imgProps } = props
+
+  if (isImage(asset)) {
+    const { url, height, mimeType, size, width, alt, ...assetProps } = asset
+    return (
+      <Image
+        src={url}
+        height={height}
+        width={width}
+        alt={alt ?? undefined}
+        {...imgProps}
+        {...assetProps}
+        unoptimized={mimeType === 'image/svg+xml'}
+        sx={[...(Array.isArray(sx) ? sx : [sx])]}
+      />
+    )
+  }
+
+  if (asset.mimeType === 'video/mp4') {
+    const Video = styled('video')({})
+
+    return (
+      <Video
+        src={asset.url}
+        autoPlay
+        muted
+        loop
+        playsInline
+        disableRemotePlayback
+        sx={[...(Array.isArray(sx) ? sx : [sx])]}
+      />
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
+  return null
+})

package/components/RichText/RichText.tsx

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import type { SxProps, Theme } from '@mui/material'
+import React from 'react'
+import { defaultRenderers } from './defaultRenderers'
+import { defaultSxRenderer } from './defaultSxRenderer'
+import type {
+  AdditionalProps,
+  Renderers,
+  Renderer,
+  SxRenderer,
+  TextNode,
+  ElementOrTextNode,
+  ElementNode,
+  SimpleElement,
+} from './types'
+
+const sxArr = (sxAny?: SxProps<Theme> | false) => {
+  if (!sxAny) return []
+  return Array.isArray(sxAny) ? sxAny : [sxAny]
+}
+
+function useRenderProps(
+  { first, last, sxRenderer }: Pick<AdditionalProps, 'first' | 'last' | 'sxRenderer'>,
+  type?: ElementNode['type'],
+) {
+  if (!type) return []
+  const sx: SxProps<Theme> = sxRenderer?.[type] ?? []
+
+  return [
+    ...sxArr(sxRenderer.all),
+    ...sxArr(sx),
+    ...sxArr(first && sxRenderer.first),
+    ...sxArr(last && sxRenderer.last),
+  ]
+}
+
+function LineBreakToBr(props: { text: string }) {
+  const { text } = props
+
+  const textA = text.split('\n')
+  const textArray: React.ReactNode[] = []
+  textA.forEach((val, index) => {
+    textArray.push(val)
+    if (index < textA.length - 1) textArray.push(<br />)
+  })
+
+  // eslint-disable-next-line react/no-array-index-key
+  return textArray.map((val, idx) => <React.Fragment key={idx}>{val}</React.Fragment>)
+}
+
+function RenderText({
+  text,
+  renderers,
+  sxRenderer,
+  first,
+  last,
+  ...textProps
+}: TextNode & AdditionalProps) {
+  let type: 'bold' | 'italic' | 'underlined' | undefined
+
+  if (textProps.bold) type = 'bold'
+  if (textProps.italic) type = 'italic'
+  if (textProps.underlined) type = 'underlined'
+
+  const sx = useRenderProps({ first, last, sxRenderer }, type)
+
+  if (!type) return <LineBreakToBr text={text} />
+  const Component: Renderer<SimpleElement> = renderers[type]
+  return (
+    <Component sx={sx}>
+      <LineBreakToBr text={text} />
+    </Component>
+  )
+}
+
+export function isTextNode(node: ElementOrTextNode): node is TextNode {
+  return (node as TextNode).text !== undefined
+}
+
+export function isElementNode(node: ElementOrTextNode): node is ElementNode {
+  return (node as ElementNode).children !== undefined
+}
+
+function RenderNode(node: ElementOrTextNode & AdditionalProps) {
+  if (isTextNode(node)) {
+    return <RenderText {...node} />
+  }
+  if (isElementNode(node)) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return <RenderElement {...node} />
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.error(node)
+    throw Error('RichText: Node not recognized')
+  }
+
+  return null
+}
+
+function RenderChildren({
+  childNodes,
+  noMargin,
+  ...props
+}: { childNodes: ElementNode['children']; noMargin?: boolean } & AdditionalProps) {
+  return (
+    <>
+      {childNodes.map((node, key) => (
+        <RenderNode
+          {...node}
+          {...props}
+          // Since we don't know any unique identifiers of the element and since this doesn't rerender often this is fine.
+          // eslint-disable-next-line react/no-array-index-key
+          key={key}
+          first={noMargin && key === 0}
+          last={noMargin && key === childNodes.length - 1}
+        />
+      ))}
+    </>
+  )
+}
+
+function RenderElement(element: ElementNode & AdditionalProps) {
+  const { type, children, sxRenderer, renderers, first, last, ...props } = element
+
+  // todo: this has the any type, could be improved
+  const Component: Renderer<SimpleElement> = renderers[type]
+  const sx = useRenderProps({ first, last, sxRenderer }, type)
+
+  if (Component) {
+    return (
+      <Component {...props} sx={sx}>
+        <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
+      </Component>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.error(element)
+    throw Error(`RichText: Unknown Element: ${type}`)
+  }
+  return <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
+}
+
+function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
+  if (!sxRenderer) return base
+
+  return Object.fromEntries(
+    Object.entries<SxProps<Theme>>(base).map(([key, sx]) => {
+      const sxOverride: SxProps<Theme> = sxRenderer?.[key]
+
+      return sxOverride
+        ? [
+            key,
+            [
+              ...(Array.isArray(sx) ? sx : [sx]),
+              ...(Array.isArray(sxOverride) ? sxOverride : [sxOverride]),
+            ],
+          ]
+        : [key, sx]
+    }),
+  ) as SxRenderer
+}
+
+export type RichTextProps = { raw: ElementNode } & {
+  renderers?: Partial<Renderers>
+  /**
+   * Allows you to theme all the types of components
+   *
+   * ```tsx
+   * function MyComponent()f {
+   *   return <RichText
+   *     sxRenderer={{
+   *       paragraph: (theme) => ({
+   *         columnCount: { xs: 1, md: getColumnCount(props, 2) },
+   *         columnGap: theme.spacings.md,
+   *       }),
+   *       //other props here
+   *     }}
+   *   />
+   * }
+   * ```
+   */
+  sxRenderer?: SxRenderer
+
+  /** By default the component will render the first and last element without any margins */
+  withMargin?: boolean
+}
+
+export function RichText({ raw, sxRenderer, renderers, withMargin = false }: RichTextProps) {
+  return (
+    <RenderChildren
+      childNodes={raw.children}
+      sxRenderer={mergeSxRenderer(defaultSxRenderer, sxRenderer)}
+      renderers={{ ...defaultRenderers, ...renderers }}
+      noMargin={!withMargin}
+    />
+  )
+}

package/components/RichText/defaultRenderers.tsx

@@ -0,0 +1,58 @@
+import { Box, Typography, Link } from '@mui/material'
+import { Asset } from '../Asset/Asset'
+import type { Renderers } from './types'
+
+export const defaultRenderers: Renderers = {
+  'heading-one': (props) => <Typography variant='h1' {...props} />,
+  'heading-two': (props) => <Typography variant='h2' {...props} />,
+  'heading-three': (props) => <Typography variant='h3' {...props} />,
+  'heading-four': (props) => <Typography variant='h4' {...props} />,
+  'heading-five': (props) => <Typography variant='h5' {...props} />,
+  'heading-six': (props) => <Typography variant='h6' {...props} />,
+  paragraph: (props) => <Typography variant='body1' gutterBottom {...props} />,
+  'bulleted-list': (props) => <Box component='ul' {...props} />,
+  'numbered-list': (props) => <Box component='ol' {...props} />,
+  'list-item': (props) => <Box component='li' {...props} />,
+  'list-item-child': (props) => <Box component='span' {...props} />,
+  'block-quote': (props) => <Box component='blockquote' {...props} />,
+  iframe: (props) => {
+    const { url, width, height, sx = [] } = props
+    return (
+      // todo add security attributes to iframe
+      // todo make iframe responsive (generic IFrame component?)
+      <Box
+        component='iframe'
+        src={url}
+        loading='lazy'
+        sx={[
+          { aspectRatio: `${width} / ${height}`, width: '100%' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    )
+  },
+  image: ({ src, width, height, title, altText, mimeType, sx }) => (
+    <Box sx={sx}>
+      <Asset asset={{ url: src, alt: altText ?? title, width, height, mimeType }} />
+    </Box>
+  ),
+  video: ({ src, width, height, title, mimeType, sx }) => (
+    <Box sx={sx}>
+      <Asset asset={{ url: src, alt: title, width, height, mimeType }} />
+    </Box>
+  ),
+  link: ({ href, openInNewTab, ...props }) => (
+    <Link href={href} underline='hover' {...props} target={openInNewTab ? '_blank' : undefined} />
+  ),
+  table: (props) => <Box component='table' {...props} />,
+  table_head: (props) => <Box component='thead' {...props} />,
+  table_header_cell: (props) => <Box component='th' {...props} />,
+  table_body: (props) => <Box component='tbody' {...props} />,
+  table_row: (props) => <Box component='tr' {...props} />,
+  table_cell: (props) => <Box component='td' {...props} />,
+  code: (props) => <Box component='code' {...props} />,
+  bold: (props) => <Box component='strong' fontWeight='bold' {...props} />,
+  italic: (props) => <Box component='em' fontStyle='italic' {...props} />,
+  underlined: (props) => <Box component='span' {...props} />,
+  class: (props) => <Box component='div' {...props} />,
+}

package/components/RichText/defaultSxRenderer.ts

@@ -0,0 +1,108 @@
+import type { SxRenderer } from './types'
+
+export const defaultSxRenderer: SxRenderer = {
+  all: {
+    '&:empty:not(iframe)': {
+      display: 'none',
+    },
+  },
+  first: {
+    marginTop: 0,
+  },
+  last: {
+    marginBottom: 0,
+  },
+  paragraph: {
+    marginBottom: '1em',
+    wordBreak: 'break-word',
+  },
+  'heading-one': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  'heading-two': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  'heading-three': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  'heading-four': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  'heading-five': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  image: {
+    width: '100%',
+    height: 'auto',
+  },
+  video: {
+    width: '100%',
+    height: 'auto',
+  },
+  'block-quote': (theme) => ({
+    paddingLeft: theme.spacings.sm,
+    margin: `${theme.spacings.md} 0`,
+  }),
+  'bulleted-list': {
+    marginBottom: '1em',
+  },
+  'numbered-list': {
+    marginBottom: '1em',
+  },
+  code: {
+    width: 'fit-content',
+    maxWidth: '100%',
+    padding: 5,
+    overflow: 'scroll',
+  },
+  table: (theme) => ({
+    display: 'table',
+    width: '100%',
+    borderSpacing: '2px',
+    borderCollapse: 'collapse',
+    marginTop: theme.spacings.md,
+    marginBottom: theme.spacings.sm,
+    '& thead, tbody': {
+      '& td': {
+        padding: '10px 20px',
+      },
+    },
+    '& thead': {
+      '& tr': {
+        '& td': {
+          '& p': {
+            fontWeight: theme.typography.fontWeightBold,
+          },
+        },
+      },
+    },
+    '& tbody': {
+      display: 'table-row-group',
+      verticalAlign: 'center',
+      borderColor: 'inherit',
+      '& tr': {
+        '&:nth-of-type(odd)': {
+          background: theme.palette.background.paper,
+        },
+      },
+      '& td': {
+        [theme.breakpoints.up('sm')]: {
+          minWidth: '150px',
+        },
+        '& p': {},
+      },
+    },
+  }),
+  link: {
+    wordBreak: 'break-word',
+  },
+  underlined: {
+    textDecoration: 'underline',
+  },
+  iframe: {},
+}

package/components/RichText/getNodeLength.tsx

@@ -0,0 +1,11 @@
+import { isElementNode, isTextNode } from './RichText'
+import type { ElementOrTextNode } from './types'
+
+export function getNodeLength(node: ElementOrTextNode): number {
+  if (isElementNode(node))
+    return node.children.map(getNodeLength).reduce<number>((prev, curr) => prev + curr, 0)
+
+  if (isTextNode(node)) return node.text.length
+
+  return 0
+}

package/components/RichText/index.ts

@@ -0,0 +1,2 @@
+export * from './RichText'
+export * from './getNodeLength'

package/components/RichText/types.ts

@@ -0,0 +1,117 @@
+import type { SxProps, Theme } from '@mui/material'
+import type { LiteralUnion } from 'type-fest'
+
+type BaseElementTypes =
+  | 'heading-one'
+  | 'heading-two'
+  | 'heading-three'
+  | 'heading-four'
+  | 'heading-five'
+  | 'heading-six'
+  | 'paragraph'
+  | 'numbered-list'
+  | 'bulleted-list'
+  | 'block-quote'
+  | 'list-item'
+  | 'list-item-child'
+  | 'table'
+  | 'table_head'
+  | 'table_header_cell'
+  | 'table_body'
+  | 'table_row'
+  | 'table_cell'
+  | 'code'
+  | 'bold'
+  | 'italic'
+  | 'underlined'
+
+export type SimpleElement = {
+  children: ElementOrTextNode[]
+  type: LiteralUnion<BaseElementTypes, string>
+}
+
+export type TextNode = {
+  text: string
+  bold?: true
+  italic?: true
+  underlined?: true
+  [key: string]: unknown
+}
+
+type LinkElement = {
+  type: 'link'
+  children: ElementOrTextNode[]
+  href: string
+  openInNewTab?: boolean
+}
+
+type ClassElement = {
+  type: 'class'
+  children: ElementOrTextNode[]
+  className: string
+}
+
+type ImageElement = {
+  type: 'image'
+  children: ElementOrTextNode[]
+  src: string
+  title: string
+  altText: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+type VideoElement = {
+  type: 'image'
+  children: ElementOrTextNode[]
+  src: string
+  title: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+type IframeElement = {
+  type: 'iframe'
+  children: ElementOrTextNode[]
+  url: string
+  width?: number
+  height?: number
+}
+
+export type ElementNode =
+  | SimpleElement
+  | LinkElement
+  | ImageElement
+  | VideoElement
+  | IframeElement
+  | ClassElement
+export type ElementOrTextNode = ElementNode | TextNode
+
+type RendererBase = { sx?: SxProps<Theme>; children?: React.ReactNode }
+export type Renderer<P extends ElementNode> = (
+  props: Omit<P, 'children' | 'type'> & RendererBase,
+) => React.ReactElement | null
+
+export type Renderers = {
+  [k in BaseElementTypes]: Renderer<SimpleElement>
+} & {
+  link: Renderer<LinkElement>
+  image: Renderer<ImageElement>
+  video: Renderer<VideoElement>
+  iframe: Renderer<IframeElement>
+  class: Renderer<ClassElement>
+}
+
+export type SxRenderer = {
+  [k in keyof Renderers | 'all' | 'first' | 'last']?: SxProps<Theme>
+}
+
+export type AdditionalProps = {
+  renderers: Renderers
+  sxRenderer: SxRenderer
+  first?: boolean
+  last?: boolean
+  className?: string
+}

package/components/index.ts

@@ -0,0 +1,2 @@
+export * from './RichText'
+export * from './Asset/Asset'

package/graphql/HygraphAllPages.graphql

@@ -0,0 +1,11 @@
+query HygraphAllPages($first: Int = 100, $skip: Int) {
+  pages(first: $first, skip: $skip) {
+    url
+  }
+
+  pagesConnection {
+    aggregate {
+      count
+    }
+  }
+}

package/graphql/HygraphPage.graphql

@@ -0,0 +1,16 @@
+fragment HygraphPage on Page {
+  title
+  metaTitle
+  metaDescription
+  metaRobots
+  url
+  author
+  date
+  relatedPages {
+    title
+    url
+  }
+  asset {
+    ...Asset
+  }
+}

package/graphql/HygraphPages.graphql

@@ -0,0 +1,7 @@
+query HygraphPages($url: String!) {
+  pages(where: { url: $url }) {
+    id
+    __typename
+    ...HygraphPage
+  }
+}

package/graphql/HygraphStaticPaths.graphql

@@ -0,0 +1,11 @@
+query HygraphStaticPaths($pageSize: Int!, $skip: Int, $where: PageWhereInput) {
+  pages(first: $pageSize, skip: $skip, where: $where) {
+    url
+  }
+
+  pagesConnection {
+    aggregate {
+      count
+    }
+  }
+}

package/graphql/PageLink.graphql

@@ -0,0 +1,10 @@
+fragment PageLink on PageLink {
+  title
+  url
+  description {
+    raw
+  }
+  asset {
+    ...Asset
+  }
+}

package/graphql/PagesStaticPaths.graphql

@@ -0,0 +1,6 @@
+query PagesStaticPaths($urlStartsWith: String!, $first: Int = 1000) {
+  pages(where: { url_starts_with: $urlStartsWith }, first: $first) {
+    url
+    metaRobots
+  }
+}

package/graphql/index.ts

@@ -0,0 +1,5 @@
+export * from './HygraphAllPages.gql'
+export * from './HygraphPage.gql'
+export * from './HygraphPages.gql'
+export * from './PageLink.gql'
+export * from './PagesStaticPaths.gql'

package/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './graphql'
+export * from './lib'

package/lib/getAllHygraphPages.ts

@@ -0,0 +1,44 @@
+import type { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
+import { cacheFirst } from '@graphcommerce/graphql'
+import type { HygraphAllPagesQuery } from '../graphql'
+import { HygraphAllPagesDocument } from '../graphql'
+
+type Urls = { url: string }
+
+export async function getAllHygraphPages(
+  client: ApolloClient<NormalizedCacheObject>,
+  options: { pageSize?: number } = {},
+) {
+  const { pageSize = 100 } = options
+
+  const query = client.query({
+    query: HygraphAllPagesDocument,
+    variables: { first: pageSize },
+    fetchPolicy: cacheFirst(client),
+  })
+  const pages: Promise<ApolloQueryResult<HygraphAllPagesQuery>>[] = [query]
+
+  const { data } = await query
+  const totalPages = Math.ceil(data.pagesConnection.aggregate.count / pageSize) ?? 1
+
+  if (totalPages > 1) {
+    for (let i = 2; i <= totalPages; i++) {
+      pages.push(
+        client.query({
+          query: HygraphAllPagesDocument,
+          variables: { first: pageSize, skip: pageSize * (i - 1) },
+          fetchPolicy: cacheFirst(client),
+        }),
+      )
+    }
+  }
+
+  const paths: Urls[] = (await Promise.all(pages))
+    .map((q) => q.data.pages)
+    .flat(1)
+    .map((page) => ({
+      url: page.url,
+    }))
+
+  return paths
+}

package/lib/getHygraphPaths.ts

@@ -0,0 +1,41 @@
+import type { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
+import type { PageWhereInput } from '@graphcommerce/graphql-mesh'
+import type { GetStaticPathsResult } from 'next'
+import type { HygraphStaticPathsQuery } from '../graphql/HygraphStaticPaths.gql'
+import { HygraphStaticPathsDocument } from '../graphql/HygraphStaticPaths.gql'
+
+type Return = GetStaticPathsResult<{ url: string }>
+
+export async function getHygraphStaticPaths(
+  client: ApolloClient<NormalizedCacheObject>,
+  locale: string,
+  options: { pageSize?: number; filter?: PageWhereInput } = {},
+) {
+  const { pageSize = 100, filter = {} } = options
+  const query = client.query({
+    query: HygraphStaticPathsDocument,
+    variables: { pageSize, where: filter },
+  })
+  const pages: Promise<ApolloQueryResult<HygraphStaticPathsQuery>>[] = [query]
+
+  const { data } = await query
+  const totalPages = Math.ceil(data.pagesConnection.aggregate.count / pageSize) ?? 1
+
+  if (totalPages > 1) {
+    for (let i = 2; i <= totalPages; i++) {
+      pages.push(
+        client.query({
+          query: HygraphStaticPathsDocument,
+          variables: { pageSize, skip: pageSize * (i - 1), where: filter },
+        }),
+      )
+    }
+  }
+
+  const paths: Return['paths'] = (await Promise.all(pages))
+    .map((q) => q.data.pages)
+    .flat(1)
+    .map((page) => ({ params: page, locale }))
+
+  return paths
+}

package/lib/hygraphPageContent.ts

@@ -0,0 +1,49 @@
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { HygraphPagesQuery } from '../graphql'
+import { HygraphPagesDocument } from '../graphql'
+import { getAllHygraphPages } from './getAllHygraphPages'
+
+/**
+ * Fetch the page content for the given urls.
+ *
+ * - Uses an early bailout to check to reduce hygraph calls.
+ * - Implements an alias sytem to merge the content of multiple pages.
+ */
+async function pageContent(
+  client: ApolloClient<NormalizedCacheObject>,
+  url: string,
+  cached: boolean,
+): Promise<{ data: HygraphPagesQuery }> {
+  /**
+   * Some routes are very generic and wil be requested very often, like 'product/global'. To reduce
+   * the amount of requests to Hygraph we can cache the result of the query if requested.
+   *
+   * This only works in a persistent nodejs environment and doesn't work in a serverless
+   * environment, because those instances get discarded.
+   *
+   * This comes with a downside, if the page is updated the cache will not be invalidated, resulting
+   * in stale data.
+   *
+   * Todo: Implement next.js 13 fetch revalidation:
+   * https://beta.nextjs.org/docs/data-fetching/fetching#revalidating-data
+   */
+  const alwaysCache = process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined
+  const fetchPolicy = cached ? alwaysCache : undefined
+
+  const allRoutes = await getAllHygraphPages(client)
+  // Only do the query when there the page is found in the allRoutes
+  const found = allRoutes.some((page) => page.url === url)
+
+  return found
+    ? client.query({ query: HygraphPagesDocument, variables: { url }, fetchPolicy })
+    : Promise.resolve({ data: { pages: [] } })
+}
+
+export async function hygraphPageContent(
+  client: ApolloClient<NormalizedCacheObject>,
+  url: string,
+  additionalProperties?: Promise<object> | object,
+  cached = false,
+): Promise<{ data: HygraphPagesQuery }> {
+  return pageContent(client, url, cached)
+}

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './hygraphPageContent'
+export * from './getHygraphPaths'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@graphcommerce/hygraph-ui",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "9.0.0-canary.103",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.103",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/graphql": "^9.0.0-canary.103",
+    "@graphcommerce/image": "^9.0.0-canary.103",
+    "@graphcommerce/next-ui": "^9.0.0-canary.103",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.103",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.103",
+    "@mui/material": "^5.10.16",
+    "next": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/HygraphPreviewModeToolbar.tsx

@@ -0,0 +1,84 @@
+import {
+  usePreviewModeForm,
+  type PreviewModeToolbarProps,
+  SelectElement,
+  previewModeDefaults,
+  useWatch,
+} from '@graphcommerce/ecommerce-ui'
+import type { TypedDocumentNode } from '@graphcommerce/graphql'
+import { 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 =
+    useWatch({ control, name: 'previewData.hygraphStage' }) ??
+    previewModeDefaults().hygraphStage ??
+    'PUBLISHED'
+
+  return useMemo(
+    () => (
+      <SelectElement
+        control={control}
+        name='previewData.hygraphStage'
+        color='secondary'
+        defaultValue={defaultValue}
+        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, defaultValue],
+  )
+})
+
+export function PreviewModeToolbar(props: PluginProps<PreviewModeToolbarProps>) {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <HygraphConfig />
+    </>
+  )
+}

package/plugins/hygraphGraphqlConfig.ts

@@ -0,0 +1,36 @@
+import type { graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
+import { setContext } from '@graphcommerce/graphql'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/graphql',
+}
+
+declare module '@graphcommerce/graphql/config' {
+  interface PreviewData {
+    hygraphStage?: string
+  }
+}
+
+export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, conf) => {
+  const results = prev(conf)
+
+  const locales = conf.storefront.hygraphLocales
+
+  if (!locales) return prev(conf)
+
+  const hygraphLink = setContext((_, context) => {
+    if (!context.headers) context.headers = {}
+    context.headers['gcms-locales'] = locales.join(',')
+
+    const stage = conf.previewData?.hygraphStage ?? 'DRAFT'
+    if (conf.preview) {
+      context.headers['gcms-stage'] = stage
+    }
+
+    return context
+  })
+
+  return { ...results, links: [...results.links, hygraphLink] }
+}

package/plugins/hygraphPreviewModeDefaults.ts

@@ -0,0 +1,12 @@
+import type { 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/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}