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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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

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.68",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,13 +12,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/image": "^10.0.0-canary.68",
-    "@graphcommerce/next-ui": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@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",

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] }