@graphcommerce/magento-product 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
 
 ### Major Changes

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,5 +1,5 @@
 import type { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
-import type { ApolloQueryResult } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { useApolloClient } from '@graphcommerce/graphql'
 import type { CrosssellsQuery } from '@graphcommerce/magento-cart'
 import { CrosssellsDocument, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
@@ -44,7 +44,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
   const { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
   const router = useRouter()
   const client = useApolloClient()
-  const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>> | undefined>(undefined)
+  const crosssellsQuery = useRef<Promise<ApolloClient.QueryResult<CrosssellsQuery>> | undefined>(
+    undefined,
+  )
 
   const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFields>(
     AddProductsToCartDocument,

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -1,4 +1,3 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
 import {
   ApolloCartErrorSnackbar,
@@ -13,12 +12,13 @@ import {
   ListFormat,
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
 import { Plural, Trans } from '@lingui/react/macro'
 
 export type AddProductsToCartSnackbarMessageProps = {
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
-  error?: ApolloError | null
+  error?: ErrorLike | null
   userErrors?: Pick<CartUserInputError, 'message'>[]
   showSuccess: boolean
   addedItems: string[]

package/components/ProductListItems/getFilterTypes.ts

@@ -1,4 +1,4 @@
-import type { ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
+import type { ApolloClient, TypedDocumentNode } from '@graphcommerce/graphql'
 import { gql } from '@graphcommerce/graphql'
 import type { AttributeFrontendInputEnum, Exact } from '@graphcommerce/graphql-mesh'
 import { magentoVersion } from '@graphcommerce/next-config/config'
@@ -32,7 +32,7 @@ const FilterInputTypesDocument = gql`
 export type FilterTypes = Partial<Record<string, AttributeFrontendInputEnum>>
 
 export async function getFilterTypes(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   isSearch: boolean = false,
 ): Promise<FilterTypes> {
   if (magentoVersion >= 247) {
@@ -44,7 +44,7 @@ export async function getFilterTypes(
     })
 
     const typeMap: FilterTypes = Object.fromEntries(
-      filterNonNullableKeys(types.data.attributesList?.items, ['frontend_input'])
+      filterNonNullableKeys(types.data?.attributesList?.items ?? [], ['frontend_input'])
         .map((i) => [i.code, i.frontend_input])
         .filter(nonNullable),
     )
@@ -55,7 +55,7 @@ export async function getFilterTypes(
   const filterInputTypes = await client.query({ query: FilterInputTypesDocument })
 
   const typeMap: FilterTypes = Object.fromEntries(
-    filterInputTypes.data?.__type.inputFields
+    (filterInputTypes.data?.__type?.inputFields ?? [])
       .map<[string, AttributeFrontendInputEnum] | undefined>((field) => {
         if (field.type.name === 'FilterEqualTypeInput') return [field.name, 'SELECT']
         if (field.type.name === 'FilterRangeTypeInput') return [field.name, 'PRICE']

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -33,7 +33,7 @@ export function useProductListApplyCategoryDefaults(
 
 export async function productListApplyCategoryDefaults(
   params: ProductListParams,
-  conf: StoreConfigQuery,
+  conf: StoreConfigQuery | undefined,
   category:
     | Promise<CategoryDefaultFragment | null | undefined>
     | CategoryDefaultFragment
@@ -42,7 +42,7 @@ export async function productListApplyCategoryDefaults(
 ): Promise<ProductListQueryVariables>
 export async function productListApplyCategoryDefaults(
   params: ProductListParams | undefined,
-  conf: StoreConfigQuery,
+  conf: StoreConfigQuery | undefined,
   category:
     | Promise<CategoryDefaultFragment | null | undefined>
     | CategoryDefaultFragment
@@ -52,11 +52,12 @@ export async function productListApplyCategoryDefaults(
   if (!params) return params
 
   const newParams = cloneDeep(params)
-  if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
+  if (!newParams.pageSize) newParams.pageSize = conf?.storeConfig?.grid_per_page ?? 12
 
   if (Object.keys(params.sort).length === 0) {
     const categorySort = (await category)?.default_sort_by as keyof ProductListParams['sort']
-    const defaultSort = conf.storeConfig?.catalog_default_sort_by as keyof ProductListParams['sort']
+    const defaultSort = conf?.storeConfig
+      ?.catalog_default_sort_by as keyof ProductListParams['sort']
     if (categorySort) newParams.sort = { [categorySort]: 'ASC' }
     else if (defaultSort) newParams.sort = { [defaultSort]: 'ASC' }
   }

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -1,17 +1,22 @@
-import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { limitSsg } from '@graphcommerce/next-config/config'
 import type { GetStaticPathsResult } from 'next'
-import type { ProductStaticPathsQuery } from './ProductStaticPaths.gql'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
 type Return = GetStaticPathsResult<{ url: string }>
 
 export type ProductTypenames = NonNullable<
-  NonNullable<NonNullable<ProductStaticPathsQuery['products']>['items']>[0]
->['__typename']
+  NonNullable<
+    NonNullable<
+      Awaited<ReturnType<typeof getProductStaticPaths>> extends Return
+        ? Return['paths'][number]
+        : never
+    >
+  >
+>
 
 export async function getProductStaticPaths(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   locale: string,
   options: { limit?: boolean } = { limit: limitSsg || false },
 ) {
@@ -19,10 +24,11 @@ export async function getProductStaticPaths(
     query: ProductStaticPathsDocument,
     variables: { currentPage: 1, pageSize: 100 },
   })
-  const pages: Promise<ApolloQueryResult<ProductStaticPathsQuery>>[] = [query]
 
   const { data } = await query
-  const totalPages = data.products?.page_info?.total_pages ?? 1
+  const totalPages = data?.products?.page_info?.total_pages ?? 1
+
+  const pages = [query]
 
   if (totalPages > 1 && options.limit !== true) {
     for (let i = 2; i <= totalPages; i++) {
@@ -36,7 +42,7 @@ export async function getProductStaticPaths(
   }
 
   const paths: Return['paths'] = (await Promise.all(pages))
-    .map((q) => q.data.products?.items)
+    .map((q) => q.data?.products?.items ?? [])
     .flat(1)
     .map((p) => ({ params: { url: `${p?.url_key}` }, locale }))
 

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -1,4 +1,4 @@
-import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { ApolloClient } from '@graphcommerce/graphql'
 import { canonicalize, nonNullable } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
@@ -8,7 +8,7 @@ import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
  * @public
  */
 export async function getSitemapPaths(
-  client: ApolloClient<NormalizedCacheObject>,
+  client: ApolloClient,
   ctx: { locale?: string; defaultLocale?: string },
   pageSize: number,
 ) {
@@ -16,11 +16,11 @@ export async function getSitemapPaths(
   const query = ProductStaticPathsDocument
 
   const pageInfo = client.query({ query, variables: { currentPage: 1, pageSize } })
-  const total = (await pageInfo).data.products?.page_info?.total_pages || 0
+  const total = (await pageInfo).data?.products?.page_info?.total_pages || 0
 
   const result = Array.from(Array(total).keys()).map(async (currentPage) => {
     const res = await client.query({ query, variables: { currentPage: currentPage + 1, pageSize } })
-    return res.data.products?.items
+    return res.data?.products?.items
   })
 
   const options = { locale, defaultLocale, pathname: '/', isLocaleDomain: false }

package/hooks/useProductList.ts

@@ -34,7 +34,7 @@ export const prefetchProductList = debounce(
     variables: ProductListQueryVariables,
     filtersVariables: ProductFiltersQueryVariables,
     next: Next,
-    client: ApolloClient<unknown>,
+    client: ApolloClient,
     shallow: boolean,
   ) => {
     if (!shallow) return next(shallow)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "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": {
@@ -18,18 +18,18 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.68",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
-    "@graphcommerce/image": "^10.0.0-canary.68",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.68",
-    "@graphcommerce/magento-store": "^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/framer-next-pages": "^10.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^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",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",