mirror of
https://github.com/vercel/commerce.git
synced 2025-06-01 14:06:58 +00:00
Fix: Prevent build failure from missing menu in _not-found
Resolves a prerendering error for the `/_not-found` page caused by the Navbar's attempt to fetch a menu that might not exist in the build environment (e.g., 'next-js-frontend-header-menu'). The `getMenu` function in `lib/shopify/index.ts` has been updated to catch errors thrown by `shopifyFetch` (such as when the Shopify API returns an error for a non-existent menu handle). If an error occurs during menu fetching, it is now logged to the console, and `getMenu` returns an empty array `[]`. This allows pages using the Navbar (including `/_not-found`) to build successfully even if the primary header menu is not found, instead of failing the entire build process.
This commit is contained in:
parent
6498856d49
commit
c8e2bb3cfb
@ -364,26 +364,36 @@ export async function getCollections(): Promise<Collection[]> {
|
||||
}
|
||||
|
||||
export async function getMenu(handle: string): Promise<Menu[]> {
|
||||
'use cache';
|
||||
cacheTag(TAGS.collections);
|
||||
cacheLife('days');
|
||||
'use cache'; // Next.js specific caching directive
|
||||
cacheTag(TAGS.collections); // Next.js specific cache tagging
|
||||
cacheLife('days'); // Next.js specific cache lifetime
|
||||
|
||||
const res = await shopifyFetch<ShopifyMenuOperation>({
|
||||
query: getMenuQuery,
|
||||
variables: {
|
||||
handle
|
||||
}
|
||||
});
|
||||
try {
|
||||
const res = await shopifyFetch<ShopifyMenuOperation>({
|
||||
query: getMenuQuery, // getMenuQuery is imported from ./queries/menu
|
||||
variables: {
|
||||
handle
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
|
||||
title: item.title,
|
||||
path: item.url
|
||||
.replace(domain, '')
|
||||
.replace('/collections', '/search')
|
||||
.replace('/pages', '')
|
||||
})) || []
|
||||
);
|
||||
// If res.body.data.menu is null or undefined (e.g., menu not found but no explicit API error),
|
||||
// optional chaining will result in undefined, and the `|| []` will correctly return an empty array.
|
||||
return (
|
||||
res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
|
||||
title: item.title,
|
||||
path: item.url
|
||||
.replace(domain, '') // domain is defined at the top of lib/shopify/index.ts
|
||||
.replace('/collections', '/search')
|
||||
.replace('/pages', '')
|
||||
})) || []
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Log the error for server-side observability.
|
||||
// During a build process (like for _not-found), this helps identify issues without failing the build.
|
||||
console.error(`Error fetching menu with handle '${handle}':`, error.message || error);
|
||||
// Return an empty array to allow the page to render without menu data.
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPage(handle: string): Promise<Page> {
|
||||
|
Loading…
x
Reference in New Issue
Block a user