4
0
forked from crowetic/commerce

Add blocking fallback to pages (#357)

* Update [...pages].tsx

* Fix provider config overwrite

* Shopify changes
This commit is contained in:
cond0r 2021-06-07 23:12:20 +03:00 committed by GitHub
parent 0e804d09f9
commit 2d0c6e0c8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 12 deletions

View File

@ -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 || {}

View File

@ -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,

View File

@ -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 },

View File

@ -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 {

View File

@ -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 = ({

View File

@ -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>