Upgrading from GraphCommerce 5 to 6 is a major upgrade. Please follow the regular upgrade steps first.
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.
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. This legacy routing will be removed in a future version.
You can also change the product route from /p/[url]
to something else by
configuring productRoute
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
.
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>
}
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>
)
}
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>
)
}
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>
)
}