- Create a new route
- Add the page GraphQL queries required to render the layout (header, footer)
- Create a new file, /pages/about/about-us.tsx:
export default function AboutUs() {
return <>About Us</>
}
Add GraphQL query
In /about/about-us.tsx, replace the previous code with the following:
import { PageOptions } from ‘@graphcommerce/framer-next-pages’
import { StoreConfigDocument } from ‘@graphcommerce/magento-store’
import { GetStaticProps } from ‘@graphcommerce/next-ui’
import { Container } from ‘@mui/material’
import { GetStaticPaths } from ‘next’
import { LayoutFull, LayoutFullProps } from ‘../../components’
import {
DefaultPageDocument,
DefaultPageQuery,
} from ‘../../graphql/DefaultPage.gql’
import { PagesStaticPathsDocument } from ‘../../graphql/PagesStaticPaths.gql’
import {
graphqlSsrClient,
graphqlSharedClient,
} from ‘../../lib/graphql/graphqlSsrClient’
type Props = DefaultPageQuery
type RouteProps = { url: string }
type GetPageStaticPaths = GetStaticPaths<RouteProps>
type GetPageStaticProps = GetStaticProps<LayoutFullProps, Props, RouteProps>
function AboutUs() {
return <Container>About Us</Container>
}
AboutUs.pageOptions = {
Layout: LayoutFull,
} as PageOptions
export default AboutUs
export const getStaticProps: GetPageStaticProps = async (context) => {
const { locale } = context
const client = graphqlSharedClient(locale)
const staticClient = graphqlSsrClient(locale)
const conf = client.query({ query: StoreConfigDocument })
const page = staticClient.query({
query: DefaultPageDocument,
variables: {
url: ”,
rootCategory: (await conf).data.storeConfig?.root_category_uid ?? ”,
},
})
// if (!(await page).data.pages?.[0]) return { notFound: true }
return {
props: {
…(await page).data,
apolloState: await conf.then(() => client.cache.extract()),
},
}
}
