fix: update web page children query to use unstable_cache

Author: jorgemoya

core/app/[locale]/(default)/webpages/[id]/layout.tsx

@@ -1,4 +1,5 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+import { unstable_cache } from 'next/cache';
 import { setRequestLocale } from 'next-intl/server';
 import { cache } from 'react';
 
@@ -45,34 +46,43 @@ interface PageLink {
   href: string;
 }
 
-const getWebPageChildren = cache(async (id: string): Promise<PageLink[]> => {
-  const { data } = await client.fetch({
-    document: WebPageChildrenQuery,
-    variables: { id: decodeURIComponent(id) },
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedWebPageChildren = unstable_cache(
+  async (locale: string, id: string): Promise<PageLink[]> => {
+    const { data } = await client.fetch({
+      document: WebPageChildrenQuery,
+      variables: { id: decodeURIComponent(id) },
+      locale,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  if (!data.node) {
-    return [];
-  }
+    if (!data.node) {
+      return [];
+    }
 
-  if (!('children' in data.node)) {
-    return [];
-  }
+    if (!('children' in data.node)) {
+      return [];
+    }
 
-  const { children } = data.node;
+    const { children } = data.node;
 
-  return removeEdgesAndNodes(children).reduce((acc: PageLink[], child) => {
-    if ('path' in child) {
-      return [...acc, { label: child.name, href: child.path }];
-    }
+    return removeEdgesAndNodes(children).reduce((acc: PageLink[], child) => {
+      if ('path' in child) {
+        return [...acc, { label: child.name, href: child.path }];
+      }
 
-    if ('link' in child) {
-      return [...acc, { label: child.name, href: child.link }];
-    }
+      if ('link' in child) {
+        return [...acc, { label: child.name, href: child.link }];
+      }
+
+      return acc;
+    }, []);
+  },
+  ['get-webpage-children'],
+  { revalidate },
+);
 
-    return acc;
-  }, []);
+const getWebPageChildren = cache(async (locale: string, id: string): Promise<PageLink[]> => {
+  return getCachedWebPageChildren(locale, id);
 });
 
 export default async function WebPageLayout({ params, children }: Props) {
@@ -82,7 +92,7 @@ export default async function WebPageLayout({ params, children }: Props) {
 
   return (
     <StickySidebarLayout
-      sidebar={<SidebarMenu links={getWebPageChildren(id)} />}
+      sidebar={<SidebarMenu links={getWebPageChildren(locale, id)} />}
       sidebarSize="small"
     >
       {children}