bug fixes

lib/bigcommerce/api/catalog/handlers/get-products.ts

@@ -58,7 +58,7 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
     },
     {}
   )
-  const products: Products = []
+  const products: Products = found ? [] : graphqlData.products
 
   // Populate the products array with the graphql products, in the order
   // assigned by the list of entity ids

pages/search.tsx

@@ -31,9 +31,8 @@ export default function Search({
   const { asPath } = router
   const { q, sort } = router.query
   const query = filterQuery({ q, sort })
-  const pathname = asPath.split('?')[0]
 
-  const { category, brand } = useSearchMeta(asPath)
+  const { pathname, category, brand } = useSearchMeta(asPath)
   const activeCategory = categories.find(
     (cat) => getSlug(cat.path) === category
   )

utils/search.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react'
 
 export function useSearchMeta(asPath: string) {
+  const [pathname, setPathname] = useState<string>('/search')
   const [category, setCategory] = useState<string | undefined>()
   const [brand, setBrand] = useState<string | undefined>()
 
   useEffect(() => {
-    const parts = asPath.split('/')
+    // Only access asPath after hydration to avoid a server mismatch
+    const path = asPath.split('?')[0]
+    const parts = path.split('/')
+
+    console.log('P', parts)
 
     let c = parts[2]
     let b = parts[3]
@@ -14,11 +19,12 @@ export function useSearchMeta(asPath: string) {
       c = parts[4]
     }
 
+    setPathname(path)
     if (c !== category) setCategory(c)
     if (b !== brand) setBrand(b)
   }, [asPath])
 
-  return { category, brand }
+  return { pathname, category, brand }
 }
 
 // Removes empty query parameters from the query object