feat(core): wrap remaining guest queries in unstable_cache

Wrap blog, web pages, gift certificates, public wishlist, change
password, and shipping countries queries in unstable_cache for guest
visitors. This completes the guest query caching migration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jorgemoya

.changeset/guest-cache-content.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Wrap remaining guest queries (blog, web pages, gift certificates, public wishlist, auth forms, shipping countries) in `unstable_cache` with configurable revalidation.

core/app/[locale]/(default)/(auth)/change-password/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -24,16 +25,24 @@ const ChangePasswordQuery = graphql(`
   }
 `);
 
-export const getChangePasswordQuery = cache(async () => {
-  const response = await client.fetch({
-    document: ChangePasswordQuery,
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedChangePasswordQuery = unstable_cache(
+  async () => {
+    const response = await client.fetch({
+      document: ChangePasswordQuery,
+      fetchOptions: { cache: 'no-store' },
+    });
+
+    const passwordComplexitySettings =
+      response.data.site.settings?.customers?.passwordComplexitySettings;
 
-  const passwordComplexitySettings =
-    response.data.site.settings?.customers?.passwordComplexitySettings;
+    return {
+      passwordComplexitySettings,
+    };
+  },
+  ['change-password-data'],
+  { revalidate },
+);
 
-  return {
-    passwordComplexitySettings,
-  };
+export const getChangePasswordQuery = cache(async () => {
+  return getCachedChangePasswordQuery();
 });

core/app/[locale]/(default)/blog/[blogId]/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -38,18 +39,26 @@ const BlogPageQuery = graphql(`
 
 type Variables = VariablesOf<typeof BlogPageQuery>;
 
-export const getBlogPageData = cache(async (variables: Variables) => {
-  const response = await client.fetch({
-    document: BlogPageQuery,
-    variables,
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedBlogPageData = unstable_cache(
+  async (variables: Variables) => {
+    const response = await client.fetch({
+      document: BlogPageQuery,
+      variables,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  const { blog } = response.data.site.content;
+    const { blog } = response.data.site.content;
 
-  if (!blog?.post) {
-    return null;
-  }
+    if (!blog?.post) {
+      return null;
+    }
 
-  return blog;
+    return blog;
+  },
+  ['blog-page-data'],
+  { revalidate },
+);
+
+export const getBlogPageData = cache(async (variables: Variables) => {
+  return getCachedBlogPageData(variables);
 });

core/app/[locale]/(default)/blog/page-data.ts

@@ -1,4 +1,5 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+import { unstable_cache } from 'next/cache';
 import { getFormatter } from 'next-intl/server';
 import { cache } from 'react';
 
@@ -72,24 +73,32 @@ interface Pagination {
   after: string | null;
 }
 
-export const getBlog = cache(async () => {
-  const response = await client.fetch({
-    document: BlogQuery,
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedBlog = unstable_cache(
+  async () => {
+    const response = await client.fetch({
+      document: BlogQuery,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  return response.data.site.content.blog;
+    return response.data.site.content.blog;
+  },
+  ['blog-data'],
+  { revalidate },
+);
+
+export const getBlog = cache(async () => {
+  return getCachedBlog();
 });
 
-export const getBlogPosts = cache(
-  async ({ tag, limit = 9, before, after }: BlogPostsFiltersInput & Pagination) => {
+const getCachedBlogPosts = unstable_cache(
+  async (tag: string | null, limit: number, before: string | null, after: string | null) => {
     const filterArgs = tag ? { filters: { tags: [tag] } } : {};
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };
 
     const response = await client.fetch({
       document: BlogPostsPageQuery,
       variables: { ...filterArgs, ...paginationArgs },
-      fetchOptions: { next: { revalidate } },
+      fetchOptions: { cache: 'no-store' },
     });
 
     const { blog } = response.data.site.content;
@@ -98,15 +107,13 @@ export const getBlogPosts = cache(
       return null;
     }
 
-    const format = await getFormatter();
-
     return {
       pageInfo: blog.posts.pageInfo,
       posts: removeEdgesAndNodes(blog.posts).map((post) => ({
         id: String(post.entityId),
         author: post.author,
         content: post.plainTextSummary,
-        date: format.dateTime(new Date(post.publishedDate.utc)),
+        publishedDateUtc: post.publishedDate.utc,
         image: post.thumbnailImage
           ? {
               src: post.thumbnailImage.url,
@@ -118,4 +125,26 @@ export const getBlogPosts = cache(
       })),
     };
   },
+  ['blog-posts'],
+  { revalidate },
+);
+
+export const getBlogPosts = cache(
+  async ({ tag, limit = 9, before, after }: BlogPostsFiltersInput & Pagination) => {
+    const result = await getCachedBlogPosts(tag, limit, before ?? null, after ?? null);
+
+    if (!result) {
+      return null;
+    }
+
+    const format = await getFormatter();
+
+    return {
+      pageInfo: result.pageInfo,
+      posts: result.posts.map((post) => ({
+        ...post,
+        date: format.dateTime(new Date(post.publishedDateUtc)),
+      })),
+    };
+  },
 );

core/app/[locale]/(default)/cart/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { getSessionCustomerAccessToken } from '~/auth';
@@ -336,11 +337,19 @@ const SupportedShippingDestinationsQuery = graphql(`
   }
 `);
 
-export const getShippingCountries = cache(async () => {
-  const { data } = await client.fetch({
-    document: SupportedShippingDestinationsQuery,
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedShippingCountries = unstable_cache(
+  async () => {
+    const { data } = await client.fetch({
+      document: SupportedShippingDestinationsQuery,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  return data.site.settings?.shipping?.supportedShippingDestinations.countries ?? [];
+    return data.site.settings?.shipping?.supportedShippingDestinations.countries ?? [];
+  },
+  ['shipping-countries'],
+  { revalidate },
+);
+
+export const getShippingCountries = cache(async () => {
+  return getCachedShippingCountries();
 });

core/app/[locale]/(default)/gift-certificates/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -26,16 +27,24 @@ const GiftCertificatesRootQuery = graphql(
   [StoreLogoFragment],
 );
 
-export const getGiftCertificatesData = cache(async (currencyCode?: CurrencyCode) => {
-  const response = await client.fetch({
-    document: GiftCertificatesRootQuery,
-    variables: { currencyCode },
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedGiftCertificatesData = unstable_cache(
+  async (currencyCode?: CurrencyCode) => {
+    const response = await client.fetch({
+      document: GiftCertificatesRootQuery,
+      variables: { currencyCode },
+      fetchOptions: { cache: 'no-store' },
+    });
+
+    return {
+      giftCertificatesEnabled: response.data.site.settings?.giftCertificates?.isEnabled ?? false,
+      defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,
+      logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',
+    };
+  },
+  ['gift-certificates-data'],
+  { revalidate },
+);
 
-  return {
-    giftCertificatesEnabled: response.data.site.settings?.giftCertificates?.isEnabled ?? false,
-    defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,
-    logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',
-  };
+export const getGiftCertificatesData = cache(async (currencyCode?: CurrencyCode) => {
+  return getCachedGiftCertificatesData(currencyCode);
 });

core/app/[locale]/(default)/gift-certificates/purchase/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -29,17 +30,25 @@ const GiftCertificatePurchaseSettingsQuery = graphql(
   [GiftCertificateSettingsFragment, StoreLogoFragment],
 );
 
-export const getGiftCertificatePurchaseData = cache(async (currencyCode?: CurrencyCode) => {
-  const response = await client.fetch({
-    document: GiftCertificatePurchaseSettingsQuery,
-    variables: { currencyCode },
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedGiftCertificatePurchaseData = unstable_cache(
+  async (currencyCode?: CurrencyCode) => {
+    const response = await client.fetch({
+      document: GiftCertificatePurchaseSettingsQuery,
+      variables: { currencyCode },
+      fetchOptions: { cache: 'no-store' },
+    });
+
+    return {
+      giftCertificateSettings: response.data.site.settings?.giftCertificates ?? null,
+      logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',
+      storeName: response.data.site.settings?.storeName ?? undefined,
+      defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,
+    };
+  },
+  ['gift-certificate-purchase-data'],
+  { revalidate },
+);
 
-  return {
-    giftCertificateSettings: response.data.site.settings?.giftCertificates ?? null,
-    logo: response.data.site.settings ? logoTransformer(response.data.site.settings) : '',
-    storeName: response.data.site.settings?.storeName ?? undefined,
-    defaultCurrency: response.data.site.settings?.currency.defaultCurrency ?? undefined,
-  };
+export const getGiftCertificatePurchaseData = cache(async (currencyCode?: CurrencyCode) => {
+  return getCachedGiftCertificatePurchaseData(currencyCode);
 });

core/app/[locale]/(default)/webpages/[id]/contact/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -31,12 +32,20 @@ const ContactPageQuery = graphql(
 
 type Variables = VariablesOf<typeof ContactPageQuery>;
 
-export const getWebpageData = cache(async (variables: Variables) => {
-  const { data } = await client.fetch({
-    document: ContactPageQuery,
-    variables,
-    fetchOptions: { next: { revalidate } },
-  });
+const getCachedWebpageData = unstable_cache(
+  async (variables: Variables) => {
+    const { data } = await client.fetch({
+      document: ContactPageQuery,
+      variables,
+      fetchOptions: { cache: 'no-store' },
+    });
+
+    return data;
+  },
+  ['contact-webpage-data'],
+  { revalidate },
+);
 
-  return data;
+export const getWebpageData = cache(async (variables: Variables) => {
+  return getCachedWebpageData(variables);
 });

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,42 @@ 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 (id: string): Promise<PageLink[]> => {
+    const { data } = await client.fetch({
+      document: WebPageChildrenQuery,
+      variables: { id: decodeURIComponent(id) },
+      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;
-  }, []);
+      return acc;
+    }, []);
+  },
+  ['webpage-children'],
+  { revalidate },
+);
+
+const getWebPageChildren = cache(async (id: string): Promise<PageLink[]> => {
+  return getCachedWebPageChildren(id);
 });
 
 export default async function WebPageLayout({ params, children }: Props) {