From 2d0c6e0c8a1f48d68a09a1c690df91f8f16fc66d Mon Sep 17 00:00:00 2001
From: cond0r <pinte_catalin@yahoo.com>
Date: Mon, 7 Jun 2021 23:12:20 +0300
Subject: [PATCH] Add blocking fallback to pages (#357)

* Update [...pages].tsx

* Fix provider config overwrite

* Shopify changes
---
 framework/commerce/config.js                      |  2 +-
 framework/shopify/api/operations/get-all-pages.ts |  4 +++-
 framework/shopify/api/operations/get-page.ts      |  2 +-
 framework/shopify/product/use-search.tsx          |  6 +++---
 framework/shopify/utils/normalize.ts              |  4 ++--
 pages/[...pages].tsx                              | 12 ++++++++----
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/framework/commerce/config.js b/framework/commerce/config.js
index 48f0d526b1..2658390efc 100644
--- a/framework/commerce/config.js
+++ b/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 || {}
 
diff --git a/framework/shopify/api/operations/get-all-pages.ts b/framework/shopify/api/operations/get-all-pages.ts
index ab0af9ff76..58bc6a94b6 100644
--- a/framework/shopify/api/operations/get-all-pages.ts
+++ b/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,
diff --git a/framework/shopify/api/operations/get-page.ts b/framework/shopify/api/operations/get-page.ts
index 67e135ebef..023ebeeb7e 100644
--- a/framework/shopify/api/operations/get-page.ts
+++ b/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 },
diff --git a/framework/shopify/product/use-search.tsx b/framework/shopify/product/use-search.tsx
index 9588b65a22..72dc8bb654 100644
--- a/framework/shopify/product/use-search.tsx
+++ b/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 {
diff --git a/framework/shopify/utils/normalize.ts b/framework/shopify/utils/normalize.ts
index e86872ef9b..7a42ca0856 100644
--- a/framework/shopify/utils/normalize.ts
+++ b/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 = ({
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index c63963ef63..ab2f22d21b 100644
--- a/pages/[...pages].tsx
+++ b/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>