Upgrading from GraphCommerce 5 to 6

Upgrading from GraphCommerce 5 to 6 is a major upgrade. Please follow the regular upgrade steps first.

1. Migrating to graphcommerce.config.js
2. Product routing changes
3. Hygraph schema changes
4. Replace next/link with GraphCommerce's new Link behavior

Migrating to graphcommerce.config.js

GraphCommerce 6 uses a new configuration file called graphcommerce.config.js this replaces the current configuration. When starting a dev server, GraphCommerce will notify you how to migrate your env variables to graphcommerce.config.js.

Product routing changes

The route for the product has changed from /product/[url], /product/configurable/[url], etc. to /p/[url] by default. This is a singlular product page for all product types.

You can keep using the old behavior by setting legacyProductRoute to true. The legacy routing has been removed in GraphCommerce 8.

You can also change the product route from /p/[url] to something else by configuring productRoute

Hygraph schema changes

Create an enumeration in Hygraph RowLinksVariants:

Create a RowLinks model:

Display name: Row Links

API ID: RowLinks

Plural API ID: RowLinksMultiple

Add RowLinks to be included in the content of the Page Model:

After this step you should be able to run yarn codegen.

Replace next/link with GraphCommerce's new Link behavior

Before GraphCommerce 6 (before Next.js 13), the next/link component needed to wrap a Material-UI Link component; With GraphCommerce 6 we've integrated Next.js 13's new Link behavior, see links documentation.

import PageLink from 'next/link'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <PageLink href='/about' passHref>
      <Link>About</Link>
    </PageLink>
  )
}

To upgrade this component to Next.js 13, you can remove the PageLink component.

import { Link } from '@mui/material'

function MyComponent() {
  return <Link href='/about'>About</Link>
}

Upgrading a Link that uses next/link props

import PageLink from 'next/link'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <PageLink href='/about' passHref prefetch={false}>
      <Link>Link without prefetch</Link>
    </PageLink>
  )
}

import { NextLink } from '@graphcommerce/next-ui'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <Link href='/about' component={NextLink} prefetch={false}>
      Link without prefetch
    </Link>
  )
}

Upgrading a Button that uses component='a'

import PageLink from 'next/link'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <PageLink href='/about' passHref>
      <Button component='a'>Link with component='a'</Link>
    </PageLink>
  )
}

import { Link } from '@mui/material'

function MyComponent() {
  return (
    <Button href='/about' prefetch={false}>
      component='a' isn't needed
    </Button>
  )
}

Note: If there is a case where this is required, make sure you use component={NextLink} instead of component='a'. A global search through the codebase will show you where this is used.

import { NextLink } from '@graphcommerce/next-ui'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <Button href='/about' component={NextLink} prefetch={false}>
      component='a' isn't needed
    </Button>
  )
}

Upgrading a non button components like Chip, Box, etc.

import PageLink from 'next/link'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <PageLink href='/about' passHref>
      <Chip>Chip</Link>
    </PageLink>
  )
}

import { NextLink } from '@graphcommerce/next-ui'
import { Link } from '@mui/material'

function MyComponent() {
  return (
    <Chip href="/about" component={NextLink}>Chip</Link>
  )
}

Further reading

• Upgrading