forked from crowetic/commerce
Add blocking fallback to pages (#357)
* Update [...pages].tsx * Fix provider config overwrite * Shopify changes
This commit is contained in:
parent
0e804d09f9
commit
2d0c6e0c8a
@ -40,7 +40,7 @@ function withCommerceConfig(nextConfig = {}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const commerceNextConfig = require(path.join('../', name, 'next.config'))
|
const commerceNextConfig = require(path.join('../', name, 'next.config'))
|
||||||
const config = merge(commerceNextConfig, nextConfig)
|
const config = merge(nextConfig, commerceNextConfig)
|
||||||
|
|
||||||
config.env = config.env || {}
|
config.env = config.env || {}
|
||||||
|
|
||||||
|
@ -38,7 +38,9 @@ export default function getAllPagesOperation({
|
|||||||
preview?: boolean
|
preview?: boolean
|
||||||
query?: string
|
query?: string
|
||||||
} = {}): Promise<T['data']> {
|
} = {}): Promise<T['data']> {
|
||||||
const { fetch, locale, locales = ['en-US'] } = commerce.getConfig(config)
|
const { fetch, locale, locales = ['en-US', 'es'] } = commerce.getConfig(
|
||||||
|
config
|
||||||
|
)
|
||||||
|
|
||||||
const { data } = await fetch<GetAllPagesQuery, GetAllPagesQueryVariables>(
|
const { data } = await fetch<GetAllPagesQuery, GetAllPagesQueryVariables>(
|
||||||
query,
|
query,
|
||||||
|
@ -39,7 +39,7 @@ export default function getPageOperation({
|
|||||||
config?: Partial<ShopifyConfig>
|
config?: Partial<ShopifyConfig>
|
||||||
preview?: boolean
|
preview?: boolean
|
||||||
}): Promise<T['data']> {
|
}): Promise<T['data']> {
|
||||||
const { fetch, locale = 'en-US' } = commerce.getConfig(config)
|
const { fetch, locale } = commerce.getConfig(config)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: { node: page },
|
data: { node: page },
|
||||||
|
@ -50,18 +50,18 @@ export const handler: SWRHook<SearchProductsHook> = {
|
|||||||
})
|
})
|
||||||
// filter on client when brandId & categoryId are set since is not available on collection product query
|
// filter on client when brandId & categoryId are set since is not available on collection product query
|
||||||
products = brandId
|
products = brandId
|
||||||
? data.node.products.edges.filter(
|
? data.node?.products?.edges?.filter(
|
||||||
({ node: { vendor } }: ProductEdge) =>
|
({ node: { vendor } }: ProductEdge) =>
|
||||||
vendor.replace(/\s+/g, '-').toLowerCase() === brandId
|
vendor.replace(/\s+/g, '-').toLowerCase() === brandId
|
||||||
)
|
)
|
||||||
: data.node.products.edges
|
: data.node?.products?.edges
|
||||||
} else {
|
} else {
|
||||||
const data = await fetch<GetAllProductsQuery>({
|
const data = await fetch<GetAllProductsQuery>({
|
||||||
query: options.query,
|
query: options.query,
|
||||||
method,
|
method,
|
||||||
variables,
|
variables,
|
||||||
})
|
})
|
||||||
products = data.products.edges
|
products = data.products?.edges
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -174,14 +174,14 @@ function normalizeLineItem({
|
|||||||
|
|
||||||
export const normalizePage = (
|
export const normalizePage = (
|
||||||
{ title: name, handle, ...page }: ShopifyPage,
|
{ title: name, handle, ...page }: ShopifyPage,
|
||||||
locale: string
|
locale: string = 'en-US'
|
||||||
): Page => ({
|
): Page => ({
|
||||||
...page,
|
...page,
|
||||||
url: `/${locale}/${handle}`,
|
url: `/${locale}/${handle}`,
|
||||||
name,
|
name,
|
||||||
})
|
})
|
||||||
|
|
||||||
export const normalizePages = (edges: PageEdge[], locale: string): Page[] =>
|
export const normalizePages = (edges: PageEdge[], locale?: string): Page[] =>
|
||||||
edges?.map((edge) => normalizePage(edge.node, locale))
|
edges?.map((edge) => normalizePage(edge.node, locale))
|
||||||
|
|
||||||
export const normalizeCategory = ({
|
export const normalizeCategory = ({
|
||||||
|
@ -8,6 +8,7 @@ import { Text } from '@components/ui'
|
|||||||
import { Layout } from '@components/common'
|
import { Layout } from '@components/common'
|
||||||
import getSlug from '@lib/get-slug'
|
import getSlug from '@lib/get-slug'
|
||||||
import { missingLocaleInPages } from '@lib/usage-warns'
|
import { missingLocaleInPages } from '@lib/usage-warns'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
export async function getStaticProps({
|
export async function getStaticProps({
|
||||||
preview,
|
preview,
|
||||||
@ -28,6 +29,7 @@ export async function getStaticProps({
|
|||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const page = data?.page
|
const page = data?.page
|
||||||
|
|
||||||
if (!page) {
|
if (!page) {
|
||||||
@ -58,16 +60,18 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
paths,
|
paths,
|
||||||
// Fallback shouldn't be enabled here or otherwise this route
|
fallback: 'blocking',
|
||||||
// will catch every page, even 404s, and we don't want that
|
|
||||||
fallback: false,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Pages({
|
export default function Pages({
|
||||||
page,
|
page,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
const router = useRouter()
|
||||||
|
|
||||||
|
return router.isFallback ? (
|
||||||
|
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
|
||||||
|
) : (
|
||||||
<div className="max-w-2xl mx-8 sm:mx-auto py-20">
|
<div className="max-w-2xl mx-8 sm:mx-auto py-20">
|
||||||
{page?.body && <Text html={page.body} />}
|
{page?.body && <Text html={page.body} />}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user