Updated to Apollo Client 4

.changeset/few-tips-rest.md

@@ -0,0 +1,7 @@
+---
+'@graphcommerce/graphql-codegen-markdown-docs': minor
+'@graphcommerce/graphql-codegen-relay-optimizer-plugin': minor
+'@graphcommerce/next-config': minor
+---
+
+Migrated to vitest

.changeset/quiet-vans-strive.md

@@ -0,0 +1,29 @@
+---
+'@graphcommerce/ecommerce-ui': major
+'@graphcommerce/googlerecaptcha': major
+'@graphcommerce/graphql': major
+'@graphcommerce/graphql-mesh': major
+'@graphcommerce/hygraph-cli': major
+'@graphcommerce/hygraph-dynamic-rows': major
+'@graphcommerce/hygraph-dynamic-rows-ui': major
+'@graphcommerce/hygraph-ui': major
+'@graphcommerce/magento-cart': major
+'@graphcommerce/magento-cart-payment-method': major
+'@graphcommerce/magento-category': major
+'@graphcommerce/magento-compare': major
+'@graphcommerce/magento-customer': major
+'@graphcommerce/magento-payment-braintree': major
+'@graphcommerce/magento-payment-tokens': major
+'@graphcommerce/magento-product': major
+'@graphcommerce/magento-product-configurable': major
+'@graphcommerce/magento-product-downloadable': major
+'@graphcommerce/magento-recently-viewed-products': major
+'@graphcommerce/magento-search': major
+'@graphcommerce/magento-store': major
+'@graphcommerce/magento-wishlist': major
+'@graphcommerce/next-ui': major
+'@graphcommerce/react-hook-form': major
+'@graphcommerce/next-config': major
+---
+
+Updated to Apollo Client 4

.github/workflows/pr-analysis.yml

@@ -0,0 +1,21 @@
+name: pr-analysis
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+          cache-dependency-path: package.json
+      - run: yarn install
+      - run: cd examples/magento-graphcms && yarn codegen && cd ../..
+      - run: yarn test
+      # - uses: codex-/knip-reporter@v1
+      #   with:
+      #     token: ${{ secrets.GITHUB_TOKEN }}
+      #     ignore_results: true

docs/upgrading/readme.md

@@ -74,6 +74,7 @@ packages:
 
 - `rm yarn.lock && yarn` Remove lock and install the dependencies
 - `yarn codegen` Converts all .graphql files to typescript files
+- `rm -r .next`
 - `yarn dev` Run the app
 
 ### Resolving diff issues
@@ -106,6 +107,8 @@ After resolving the diff issues, manually process upgrade instructions:
 
 - [Upgrading to GraphCommerce 5 to 6](../upgrading/graphcommerce-5-to-6.md)
 - [Upgrading to GraphCommerce 6 to 7](../upgrading/graphcommerce-6-to-7.md)
+- [Upgrading to GraphCommerce 7 to 8](../upgrading/graphcommerce-7-to-8.md)
+- [Upgrading to GraphCommerce 8 to 9](../upgrading/graphcommerce-8-to-9.md)
 - [Upgrading to GraphCommerce 9 to 10](../upgrading/graphcommerce-9-to-10.md)
 
 Run and validate your local environment:

examples/magento-graphcms/lib/graphql/graphqlSsrClient.ts

@@ -1,3 +1,4 @@
+import type { FetchPolicy, PreviewConfig } from '@graphcommerce/graphql'
 import {
   ApolloClient,
   ApolloLink,
@@ -7,14 +8,10 @@ import {
   fragments,
   graphqlConfig,
   mergeTypePolicies,
-  FetchPolicy,
-  DefaultOptions,
-  PreviewConfig,
-  NormalizedCacheObject,
 } from '@graphcommerce/graphql'
 import { MeshApolloLink, getBuiltMesh } from '@graphcommerce/graphql-mesh'
 import { storefrontConfig, storefrontConfigDefault } from '@graphcommerce/next-ui'
-import { GetStaticPropsContext } from 'next'
+import type { GetStaticPropsContext } from 'next'
 import { i18nSsrLoader } from '../i18n/I18nProvider'
 
 function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-cache') {
@@ -39,7 +36,7 @@ function client(context: GetStaticPropsContext, fetchPolicy: FetchPolicy = 'no-c
     defaultOptions: {
       preview: context as PreviewConfig,
       query: { errorPolicy: 'all', fetchPolicy },
-    } as DefaultOptions,
+    } as ApolloClient.DefaultOptions,
   })
 }
 
@@ -56,7 +53,7 @@ export function graphqlSharedClient(context: GetStaticPropsContext) {
 }
 
 const ssrClient: {
-  [locale: string]: ApolloClient<NormalizedCacheObject>
+  [locale: string]: ApolloClient
 } = {}
 
 export function graphqlSsrClient(context: GetStaticPropsContext) {

examples/magento-graphcms/package.json

@@ -22,7 +22,7 @@
     "create-patch": "patch-package --exclude 'package.json$|gql.ts$|interceptor.tsx$|interceptor.ts$|generated/*'"
   },
   "dependencies": {
-    "@apollo/client": "^3.14.0",
+    "@apollo/client": "^4.0.11",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",

examples/magento-graphcms/pages/404.tsx

@@ -1,15 +1,17 @@
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { cacheFirst } from '@graphcommerce/graphql'
 import { revalidate } from '@graphcommerce/next-ui'
 import { useCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
 import { SearchLink } from '@graphcommerce/magento-search'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
-import { GetStaticProps, Separator, icon404, IconSvg } from '@graphcommerce/next-ui'
+import type { GetStaticProps } from '@graphcommerce/next-ui'
+import { Separator, icon404, IconSvg } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Box, Container, Typography, Link } from '@mui/material'
 import React from 'react'
-import { LayoutDocument, LayoutNavigation, LayoutNavigationProps } from '../components'
+import type { LayoutNavigationProps } from '../components'
+import { LayoutDocument, LayoutNavigation } from '../components'
 import { graphqlSsrClient, graphqlSharedClient } from '../lib/graphql/graphqlSsrClient'
 
 type Props = Record<string, unknown>

examples/magento-graphcms/pages/[...url].tsx

@@ -208,7 +208,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
   const productListParams = parseParams(url, query, await filterTypes)
   const filteredCategoryUid = productListParams && productListParams.filters.category_uid?.in?.[0]
 
-  const category = categoryPage.then((res) => res.data.categories?.items?.[0])
+  const category = categoryPage.then((res) => res.data?.categories?.items?.[0])
   const waitForSiblings = appendSiblingsAsChildren(category, staticClient)
   let categoryUid = filteredCategoryUid
   if (!categoryUid) {
@@ -240,12 +240,12 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
       })
     : undefined
 
-  const hasPage = filteredCategoryUid ? false : (await pages).data.pages.length > 0
+  const hasPage = filteredCategoryUid ? false : ((await pages).data?.pages?.length ?? 0) > 0
   if (!(await category)?.uid && !hasPage)
     return redirectOrNotFound(staticClient, conf, params, locale)
 
-  if ((await products)?.errors) {
-    const totalPages = (await filters)?.data.filters?.page_info?.total_pages ?? 0
+  if ((await products)?.error) {
+    const totalPages = (await filters)?.data?.filters?.page_info?.total_pages ?? 0
     if (productListParams?.currentPage && productListParams.currentPage > totalPages) {
       const to = productListLink({ ...productListParams, currentPage: totalPages })
       return redirectTo(to, false, locale)

examples/magento-graphcms/pages/blog/[...url].tsx

@@ -93,8 +93,8 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
   const responses = locales.map(async (locale) => {
     const staticClient = graphqlSsrClient({ locale })
     const BlogPostPaths = staticClient.query({ query: BlogPostPathsDocument })
-    const { pages } = (await BlogPostPaths).data
-    return pages.map((page) => ({ params: { url: page.url.split('/').slice(1) }, locale })) ?? []
+    const pages = (await BlogPostPaths).data?.pages ?? []
+    return pages.map((page) => ({ params: { url: page.url.split('/').slice(1) }, locale }))
   })
   const paths = (await Promise.all(responses)).flat(1)
   return { paths, fallback: 'blocking' }
@@ -120,13 +120,16 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
     variables: { currentUrl: [`blog/${urlKey}`], first: limit },
   })
 
-  if (!(await page).data.pages?.[0])
+  const pageData = (await page).data
+  const blogPostsData = (await blogPosts).data
+
+  if (!pageData?.pages?.[0] || !blogPostsData)
     return redirectOrNotFound(staticClient, conf, { url: `blog/${urlKey}` }, locale)
 
   return {
     props: {
-      ...(await page).data,
-      ...(await blogPosts).data,
+      ...pageData,
+      ...blogPostsData,
       ...(await layout).data,
       up: { href: '/blog', title: t`Blog` },
       apolloState: await conf.then(() => client.cache.extract()),

examples/magento-graphcms/pages/blog/page/[page].tsx

@@ -87,7 +87,9 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
   const responses = locales.map(async (locale) => {
     const staticClient = graphqlSsrClient({ locale })
     const blogPosts = staticClient.query({ query: BlogPathsDocument })
-    const total = Math.ceil((await blogPosts).data.pagesConnection.aggregate.count / pageSize)
+    const total = Math.ceil(
+      ((await blogPosts).data?.pagesConnection?.aggregate?.count ?? 0) / pageSize,
+    )
     const pages: string[] = []
     for (let i = 1; i < total - 1; i++) {
       pages.push(String(i + 1))
@@ -117,15 +119,20 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
   })
   const blogPaths = staticClient.query({ query: BlogPathsDocument })
 
-  if (!(await defaultPage).data.pages?.[0]) return { notFound: true, revalidate: revalidate() }
-  if (!(await blogPosts).data.blogPosts.length) return { notFound: true, revalidate: revalidate() }
+  const defaultPageData = (await defaultPage).data
+  const blogPostsData = (await blogPosts).data
+  const blogPathsData = (await blogPaths).data
+
+  if (!defaultPageData?.pages?.[0]) return { notFound: true, revalidate: revalidate() }
+  if (!blogPostsData?.blogPosts?.length) return { notFound: true, revalidate: revalidate() }
+  if (!blogPathsData) return { notFound: true, revalidate: revalidate() }
   if (Number(params?.page) <= 0) return { notFound: true, revalidate: revalidate() }
 
   return {
     props: {
-      ...(await defaultPage).data,
-      ...(await blogPosts).data,
-      ...(await blogPaths).data,
+      ...defaultPageData,
+      ...blogPostsData,
+      ...blogPathsData,
       ...(await layout).data,
       urlEntity: { relative_url: 'blog' },
       apolloState: await conf.then(() => client.cache.extract()),

examples/magento-graphcms/pages/blog/tagged/[url].tsx

@@ -68,13 +68,11 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
   const responses = locales.map(async (locale) => {
     const staticClient = graphqlSsrClient({ locale })
     const BlogPostPaths = staticClient.query({ query: BlogPostTaggedPathsDocument })
-    const { pages } = (await BlogPostPaths).data
-    return (
-      pages.map((page) => ({
-        params: { url: `${page?.url}`.replace('blog/tagged/', '') },
-        locale,
-      })) ?? []
-    )
+    const pages = (await BlogPostPaths).data?.pages ?? []
+    return pages.map((page) => ({
+      params: { url: `${page?.url}`.replace('blog/tagged/', '') },
+      locale,
+    }))
   })
   const paths = (await Promise.all(responses)).flat(1)
   return { paths, fallback: 'blocking' }
@@ -98,13 +96,15 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
     variables: { currentUrl: [`blog/tagged/${urlKey}`], first: limit, tagged: params?.url },
   })
 
-  if (!(await page).data.pages?.[0])
+  const pageData = await page
+  const posts = await blogPosts
+  if (!pageData.data.pages?.[0] || !posts.data)
     return redirectOrNotFound(staticClient, conf, { url: `blog/${urlKey}` }, locale)
 
   return {
     props: {
-      ...(await page).data,
-      ...(await blogPosts).data,
+      ...pageData.data,
+      ...posts.data,
       ...(await layout).data,
       up: { href: '/blog', title: t`Blog` },
       apolloState: await conf.then(() => client.cache.extract()),

examples/magento-graphcms/pages/checkout/customer/addresses/edit.tsx

@@ -28,13 +28,13 @@ type GetPageStaticProps = GetStaticProps<LayoutOverlayProps>
 
 function CheckoutCustomerAddressesEdit() {
   const router = useRouter()
-  const { data, loading, error, called } = useCustomerQuery(AccountDashboardAddressesDocument, {
+  const { data, loading, error } = useCustomerQuery(AccountDashboardAddressesDocument, {
     fetchPolicy: 'cache-and-network',
   })
 
   const address = data?.customer?.addresses?.find((a) => a?.id === Number(router.query.addressId))
 
-  if (loading || !called)
+  if (loading)
     return (
       <FullPageMessage icon={<CircularProgress />} title={<Trans>Loading your account</Trans>}>
         <Trans>This may take a second</Trans>

examples/magento-graphcms/pages/checkout/terms/[url].tsx

@@ -61,7 +61,7 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
   const path = async (locale: string) => {
     const client = graphqlSsrClient({ locale })
     const { data } = await client.query({ query: CartAgreementsDocument })
-    return (data.checkoutAgreements ?? []).map((agreement) => ({
+    return (data?.checkoutAgreements ?? []).map((agreement) => ({
       locale,
       params: { url: agreement?.name.toLowerCase().replace(/\s+/g, '-') ?? '' },
     }))
@@ -82,7 +82,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
 
   const agreements = await staticClient.query({ query: CartAgreementsDocument })
 
-  const agreement = agreements.data.checkoutAgreements?.find(
+  const agreement = agreements.data?.checkoutAgreements?.find(
     (ca) => ca?.name?.toLowerCase().replace(/\s+/g, '-') === params?.url,
   )
 

examples/magento-graphcms/pages/customer/account/confirm.tsx

@@ -43,7 +43,7 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
   const client = graphqlSharedClient(context)
   const conf = client.query({ query: StoreConfigDocument })
 
-  if (!(await conf).data.storeConfig?.create_account_confirmation)
+  if (!(await conf).data?.storeConfig?.create_account_confirmation)
     return { notFound: true, revalidate: revalidate() }
 
   return {