Add blocking fallback to pages (#357)

* Update [...pages].tsx

* Fix provider config overwrite

* Shopify changes

framework/commerce/config.js

@@ -40,7 +40,7 @@ function withCommerceConfig(nextConfig = {}) {
   }
 
   const commerceNextConfig = require(path.join('../', name, 'next.config'))
-  const config = merge(commerceNextConfig, nextConfig)
+  const config = merge(nextConfig, commerceNextConfig)
 
   config.env = config.env || {}
 

framework/shopify/api/operations/get-all-pages.ts

@@ -38,7 +38,9 @@ export default function getAllPagesOperation({
     preview?: boolean
     query?: string
   } = {}): 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>(
       query,

framework/shopify/api/operations/get-page.ts

@@ -39,7 +39,7 @@ export default function getPageOperation({
     config?: Partial<ShopifyConfig>
     preview?: boolean
   }): Promise<T['data']> {
-    const { fetch, locale = 'en-US' } = commerce.getConfig(config)
+    const { fetch, locale } = commerce.getConfig(config)
 
     const {
       data: { node: page },

framework/shopify/product/use-search.tsx

@@ -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
       products = brandId
-        ? data.node.products.edges.filter(
+        ? data.node?.products?.edges?.filter(
             ({ node: { vendor } }: ProductEdge) =>
               vendor.replace(/\s+/g, '-').toLowerCase() === brandId
           )
-        : data.node.products.edges
+        : data.node?.products?.edges
     } else {
       const data = await fetch<GetAllProductsQuery>({
         query: options.query,
         method,
         variables,
       })
-      products = data.products.edges
+      products = data.products?.edges
     }
 
     return {

framework/shopify/utils/normalize.ts

@@ -174,14 +174,14 @@ function normalizeLineItem({
 
 export const normalizePage = (
   { title: name, handle, ...page }: ShopifyPage,
-  locale: string
+  locale: string = 'en-US'
 ): Page => ({
   ...page,
   url: `/${locale}/${handle}`,
   name,
 })
 
-export const normalizePages = (edges: PageEdge[], locale: string): Page[] =>
+export const normalizePages = (edges: PageEdge[], locale?: string): Page[] =>
   edges?.map((edge) => normalizePage(edge.node, locale))
 
 export const normalizeCategory = ({

pages/[...pages].tsx

@@ -8,6 +8,7 @@ import { Text } from '@components/ui'
 import { Layout } from '@components/common'
 import getSlug from '@lib/get-slug'
 import { missingLocaleInPages } from '@lib/usage-warns'
+import { useRouter } from 'next/router'
 
 export async function getStaticProps({
   preview,
@@ -28,6 +29,7 @@ export async function getStaticProps({
       config,
       preview,
     }))
+
   const page = data?.page
 
   if (!page) {
@@ -58,16 +60,18 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
 
   return {
     paths,
-    // Fallback shouldn't be enabled here or otherwise this route
-    // will catch every page, even 404s, and we don't want that
-    fallback: false,
+    fallback: 'blocking',
   }
 }
 
 export default function Pages({
   page,
 }: 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">
       {page?.body && <Text html={page.body} />}
     </div>