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

package/CHANGELOG.md

@@ -1,5 +1,107 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+- [#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))
+
+### Patch Changes
+
+- [#2537](https://github.com/graphcommerce-org/graphcommerce/pull/2537) [`6e2714c`](https://github.com/graphcommerce-org/graphcommerce/commit/6e2714ccae22b806792891928a7ec9a14c272e66) - Solve issue where cached data was stale ([@paales](https://github.com/paales))
+
+- [#2487](https://github.com/graphcommerce-org/graphcommerce/pull/2487) [`cf9eafb`](https://github.com/graphcommerce-org/graphcommerce/commit/cf9eafb9d71991852510f632c692679810b9e76f) - Prepare the RichTex for embed and code-block ([@paales](https://github.com/paales))
+
+- [#2487](https://github.com/graphcommerce-org/graphcommerce/pull/2487) [`2085f0b`](https://github.com/graphcommerce-org/graphcommerce/commit/2085f0b30dfadd9ab589fde962f59e87b3f30b34) - Forward `<Asset unoptimized />` component to `<Image />` ([@paales](https://github.com/paales))
+
+## 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",
   "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",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0",
+    "@graphcommerce/graphql": "^10.0.0",
+    "@graphcommerce/image": "^10.0.0",
+    "@graphcommerce/next-ui": "^10.0.0",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0",
     "@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] }