@graphcommerce/hygraph-ui 10.0.0-canary.67 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+## 10.0.0-canary.68
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/components/Asset/Asset.tsx

@@ -1,5 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { memo } from 'react'
@@ -35,27 +36,14 @@ export const Asset = memo<AssetProps>((props) => {
         {...imgProps}
         {...assetProps}
         unoptimized={typeof unoptimized === 'boolean' ? unoptimized : mimeType === 'image/svg+xml'}
-        sx={[...(Array.isArray(sx) ? sx : [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])]}
-      />
-    )
+    return <Video src={asset.url} autoPlay muted loop playsInline disableRemotePlayback sx={sx} />
   }
-
   if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
   return null
 })

package/components/RichText/RichText.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { defaultRenderers } from './defaultRenderers'
@@ -150,15 +151,7 @@ function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
     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]
+      return sxOverride ? [key, [sx, sxOverride]] : [key, sx]
     }),
   ) as SxRenderer
 }

package/components/RichText/defaultRenderers.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Box, Link, Typography } from '@mui/material'
 import { Asset } from '../Asset/Asset'
 import type { Renderers } from './types'
@@ -24,10 +25,7 @@ export const defaultRenderers: Renderers = {
         component='iframe'
         src={url}
         loading='lazy'
-        sx={[
-          { aspectRatio: `${width} / ${height}`, width: '100%' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={sxx({ aspectRatio: `${width} / ${height}`, width: '100%' }, sx)}
       />
     )
   },
@@ -51,8 +49,8 @@ export const defaultRenderers: Renderers = {
   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} />,
+  bold: (props) => <Box component='strong' {...props} sx={sxx({ fontWeight: 'bold' }, props.sx)} />,
+  italic: (props) => <Box component='em' {...props} sx={sxx({ fontStyle: 'italic' }, props.sx)} />,
   underlined: (props) => <Box component='span' {...props} />,
   class: (props) => <Box component='div' {...props} />,
   'code-block': (props) => (

package/components/RichText/defaultSxRenderer.ts

@@ -87,7 +87,7 @@ export const defaultSxRenderer: SxRenderer = {
       borderColor: 'inherit',
       '& tr': {
         '&:nth-of-type(odd)': {
-          background: theme.palette.background.paper,
+          background: theme.vars.palette.background.paper,
         },
       },
       '& td': {

package/lib/getAllHygraphPages.ts

@@ -1,12 +1,12 @@
 import { cacheFirst } from '@graphcommerce/graphql'
-import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@apollo/client'
+import type { ApolloClient } from '@apollo/client'
 import type { HygraphAllPagesQuery } from '../graphql'
 import { HygraphAllPagesDocument } from '../graphql'
 
 type Urls = { url: string }
 
 export async function getAllHygraphPages(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   options: { pageSize?: number } = {},
 ) {
   const { pageSize = 100 } = options
@@ -16,10 +16,11 @@ export async function getAllHygraphPages(
     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
+  const totalPages = data ? Math.ceil(data.pagesConnection.aggregate.count / pageSize) : 1
+
+  const pages = [query]
 
   if (totalPages > 1) {
     for (let i = 2; i <= totalPages; i++) {
@@ -34,8 +35,9 @@ export async function getAllHygraphPages(
   }
 
   const paths: Urls[] = (await Promise.all(pages))
-    .map((q) => q.data.pages)
+    .map((q) => q.data?.pages ?? [])
     .flat(1)
+    .filter((page): page is NonNullable<typeof page> & { url: string } => !!page?.url)
     .map((page) => ({
       url: page.url,
     }))

package/lib/getHygraphPaths.ts

@@ -1,13 +1,12 @@
 import type { PageWhereInput } from '@graphcommerce/graphql-mesh'
-import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@apollo/client'
+import type { ApolloClient } from '@apollo/client'
 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>,
+  client: ApolloClient,
   locale: string,
   options: { pageSize?: number; filter?: PageWhereInput } = {},
 ) {
@@ -16,10 +15,11 @@ export async function getHygraphStaticPaths(
     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
+  const totalPages = data ? Math.ceil(data.pagesConnection.aggregate.count / pageSize) : 1
+
+  const pages = [query]
 
   if (totalPages > 1) {
     for (let i = 2; i <= totalPages; i++) {
@@ -33,9 +33,10 @@ export async function getHygraphStaticPaths(
   }
 
   const paths: Return['paths'] = (await Promise.all(pages))
-    .map((q) => q.data.pages)
+    .map((q) => q.data?.pages ?? [])
     .flat(1)
-    .map((page) => ({ params: page, locale }))
+    .filter((page): page is NonNullable<typeof page> & { url: string } => !!page?.url)
+    .map((page) => ({ params: { url: page.url }, locale }))
 
   return paths
 }

package/lib/hygraphPageContent.ts

@@ -1,4 +1,4 @@
-import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import type { HygraphPagesQuery } from '../graphql'
 import { HygraphPagesDocument } from '../graphql'
 import { getAllHygraphPages } from './getAllHygraphPages'
@@ -10,7 +10,7 @@ import { getAllHygraphPages } from './getAllHygraphPages'
  * - Implements an alias sytem to merge the content of multiple pages.
  */
 async function pageContent(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   url: string,
   cached: boolean,
 ): Promise<{ data: HygraphPagesQuery }> {
@@ -34,13 +34,20 @@ async function pageContent(
   // 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: [] } })
+  if (found) {
+    const result = await client.query({
+      query: HygraphPagesDocument,
+      variables: { url },
+      fetchPolicy,
+    })
+    return { data: result.data ?? { pages: [] } }
+  }
+
+  return { data: { pages: [] } }
 }
 
 export async function hygraphPageContent(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   url: string,
   additionalProperties?: Promise<object> | object,
   cached = false,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/hygraph-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
-    "@mui/material": "^5.10.16",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
+    "@mui/material": "^7.0.0",
     "next": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

package/plugins/hygraphGraphqlConfig.ts

@@ -1,5 +1,5 @@
 import type { graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
-import { setContext } from '@graphcommerce/graphql'
+import { SetContextLink } from '@graphcommerce/graphql'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 
 export const config: PluginConfig = {
@@ -18,16 +18,16 @@ export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, co
 
   const locales = conf.storefront.hygraphLocales
 
-  const hygraphLink = setContext((_, context) => {
-    if (!context.headers) context.headers = {}
-    if (locales) context.headers['gcms-locales'] = locales.join(',')
+  const hygraphLink = new SetContextLink((prevContext) => {
+    const headers: Record<string, string> = { ...prevContext.headers }
+    if (locales) headers['gcms-locales'] = locales.join(',')
 
     const stage = conf.previewData?.hygraphStage ?? 'DRAFT'
     if (conf.preview) {
-      context.headers['gcms-stage'] = stage
+      headers['gcms-stage'] = stage
     }
 
-    return context
+    return { headers }
   })
 
   return { ...results, links: [...results.links, hygraphLink] }