feat(core): add X-Correlation-ID header, cache guest queries separately

.gitignore

@@ -21,3 +21,4 @@ coverage/
 .history
 .unlighthouse
 .bigcommerce
+.worktrees

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 (locale: string) => {
+    const response = await client.fetch({
+      document: ChangePasswordQuery,
+      locale,
+    });
 
-  const passwordComplexitySettings =
-    response.data.site.settings?.customers?.passwordComplexitySettings;
+    const passwordComplexitySettings =
+      response.data.site.settings?.customers?.passwordComplexitySettings;
 
-  return {
-    passwordComplexitySettings,
-  };
+    return {
+      passwordComplexitySettings,
+    };
+  },
+  ['get-change-password-query'],
+  { revalidate },
+);
+
+export const getChangePasswordQuery = cache(async (locale: string) => {
+  return getCachedChangePasswordQuery(locale);
 });

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

@@ -38,7 +38,7 @@ export default async function ChangePassword({ params, searchParams }: Props) {
     return redirect({ href: '/login', locale });
   }
 
-  const { passwordComplexitySettings } = await getChangePasswordQuery();
+  const { passwordComplexitySettings } = await getChangePasswordQuery(locale);
 
   return (
     <ResetPasswordSection

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

@@ -1,8 +1,9 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
-import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
 import { FormFieldsFragment } from '~/data-transformers/form-field-transformer/fragment';
 
 const RegisterCustomerQuery = graphql(
@@ -61,35 +62,41 @@ interface Props {
   };
 }
 
-export const getRegisterCustomerQuery = cache(async ({ address, customer }: Props) => {
-  const customerAccessToken = await getSessionCustomerAccessToken();
+const getCachedRegisterCustomerQuery = unstable_cache(
+  async (locale: string, { address, customer }: Props) => {
+    const response = await client.fetch({
+      document: RegisterCustomerQuery,
+      variables: {
+        addressFilters: address?.filters,
+        addressSortBy: address?.sortBy,
+        customerFilters: customer?.filters,
+        customerSortBy: customer?.sortBy,
+      },
+      fetchOptions: { cache: 'no-store' },
+      locale,
+    });
 
-  const response = await client.fetch({
-    document: RegisterCustomerQuery,
-    variables: {
-      addressFilters: address?.filters,
-      addressSortBy: address?.sortBy,
-      customerFilters: customer?.filters,
-      customerSortBy: customer?.sortBy,
-    },
-    fetchOptions: { cache: 'no-store' },
-    customerAccessToken,
-  });
+    const addressFields = response.data.site.settings?.formFields.shippingAddress;
+    const customerFields = response.data.site.settings?.formFields.customer;
+    const countries = response.data.geography.countries;
+    const passwordComplexitySettings =
+      response.data.site.settings?.customers?.passwordComplexitySettings;
 
-  const addressFields = response.data.site.settings?.formFields.shippingAddress;
-  const customerFields = response.data.site.settings?.formFields.customer;
-  const countries = response.data.geography.countries;
-  const passwordComplexitySettings =
-    response.data.site.settings?.customers?.passwordComplexitySettings;
+    if (!addressFields || !customerFields) {
+      return null;
+    }
 
-  if (!addressFields || !customerFields) {
-    return null;
-  }
+    return {
+      addressFields,
+      customerFields,
+      countries,
+      passwordComplexitySettings,
+    };
+  },
+  ['get-register-customer-query'],
+  { revalidate },
+);
 
-  return {
-    addressFields,
-    customerFields,
-    countries,
-    passwordComplexitySettings,
-  };
+export const getRegisterCustomerQuery = cache(async (locale: string, props: Props) => {
+  return getCachedRegisterCustomerQuery(locale, props);
 });

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -51,7 +51,7 @@ export default async function Register({ params }: Props) {
 
   const t = await getTranslations('Auth.Register');
 
-  const registerCustomerData = await getRegisterCustomerQuery({
+  const registerCustomerData = await getRegisterCustomerQuery(locale, {
     address: { sortBy: 'SORT_ORDER' },
     customer: { sortBy: 'SORT_ORDER' },
   });

core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -38,13 +39,35 @@ const BrandPageQuery = graphql(`
   }
 `);
 
-export const getBrandPageData = cache(async (entityId: number, customerAccessToken?: string) => {
-  const response = await client.fetch({
-    document: BrandPageQuery,
-    variables: { entityId },
-    customerAccessToken,
-    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
-  });
+const getCachedBrandPageData = unstable_cache(
+  async (locale: string, entityId: number) => {
+    const response = await client.fetch({
+      document: BrandPageQuery,
+      variables: { entityId },
+      locale,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  return response.data.site;
-});
+    return response.data.site;
+  },
+  ['get-brand-page-data'],
+  { revalidate },
+);
+
+export const getBrandPageData = cache(
+  async (locale: string, entityId: number, customerAccessToken?: string) => {
+    if (customerAccessToken) {
+      const response = await client.fetch({
+        document: BrandPageQuery,
+        variables: { entityId },
+        customerAccessToken,
+        locale,
+        fetchOptions: { cache: 'no-store' },
+      });
+
+      return response.data.site;
+    }
+
+    return getCachedBrandPageData(locale, entityId);
+  },
+);

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -30,9 +30,14 @@ const getCachedBrand = cache((brandId: string) => {
 const compareLoader = createCompareLoader();
 
 const createBrandSearchParamsLoader = cache(
-  async (brandId: string, customerAccessToken?: string) => {
+  async (locale: string, brandId: string, customerAccessToken?: string) => {
     const cachedBrand = getCachedBrand(brandId);
-    const brandSearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const brandSearch = await fetchFacetedSearch(
+      locale,
+      cachedBrand,
+      undefined,
+      customerAccessToken,
+    );
     const brandFacets = brandSearch.facets.items.filter(
       (facet) => facet.__typename !== 'BrandSearchFilter',
     );
@@ -73,7 +78,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
   const brandId = Number(slug);
 
-  const { brand } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand } = await getBrandPageData(locale, brandId, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -99,7 +104,7 @@ export default async function Brand(props: Props) {
 
   const brandId = Number(slug);
 
-  const { brand, settings } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand, settings } = await getBrandPageData(locale, brandId, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -114,10 +119,11 @@ export default async function Brand(props: Props) {
     const searchParams = await props.searchParams;
     const currencyCode = await getPreferredCurrencyCode();
 
-    const loadSearchParams = await createBrandSearchParamsLoader(slug, customerAccessToken);
+    const loadSearchParams = await createBrandSearchParamsLoader(locale, slug, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
 
     const search = await fetchFacetedSearch(
+      locale,
       {
         ...searchParams,
         ...parsedSearchParams,
@@ -162,10 +168,15 @@ export default async function Brand(props: Props) {
 
   const streamableFilters = Streamable.from(async () => {
     const searchParams = await props.searchParams;
-    const loadSearchParams = await createBrandSearchParamsLoader(slug, customerAccessToken);
+    const loadSearchParams = await createBrandSearchParamsLoader(locale, slug, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
     const cachedBrand = getCachedBrand(slug);
-    const categorySearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      locale,
+      cachedBrand,
+      undefined,
+      customerAccessToken,
+    );
     const refinedSearch = await streamableFacetedSearch;
 
     const allFacets = categorySearch.facets.items.filter(
@@ -195,7 +206,7 @@ export default async function Brand(props: Props) {
 
     const compareIds = { entityIds: compare ? compare.map((id: string) => Number(id)) : [] };
 
-    const products = await getCompareProductsData(compareIds, customerAccessToken);
+    const products = await getCompareProductsData(locale, compareIds, customerAccessToken);
 
     return products.map((product) => ({
       id: product.entityId.toString(),

core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts

@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -58,13 +59,35 @@ const CategoryPageQuery = graphql(
   [BreadcrumbsCategoryFragment],
 );
 
-export const getCategoryPageData = cache(async (entityId: number, customerAccessToken?: string) => {
-  const response = await client.fetch({
-    document: CategoryPageQuery,
-    variables: { entityId },
-    customerAccessToken,
-    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
-  });
+const getCachedCategoryPageData = unstable_cache(
+  async (locale: string, entityId: number) => {
+    const response = await client.fetch({
+      document: CategoryPageQuery,
+      variables: { entityId },
+      locale,
+      fetchOptions: { cache: 'no-store' },
+    });
 
-  return response.data.site;
-});
+    return response.data.site;
+  },
+  ['get-category-page-data'],
+  { revalidate },
+);
+
+export const getCategoryPageData = cache(
+  async (locale: string, entityId: number, customerAccessToken?: string) => {
+    if (customerAccessToken) {
+      const response = await client.fetch({
+        document: CategoryPageQuery,
+        variables: { entityId },
+        customerAccessToken,
+        locale,
+        fetchOptions: { cache: 'no-store' },
+      });
+
+      return response.data.site;
+    }
+
+    return getCachedCategoryPageData(locale, entityId);
+  },
+);

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -32,9 +32,14 @@ const getCachedCategory = cache((categoryId: number) => {
 const compareLoader = createCompareLoader();
 
 const createCategorySearchParamsLoader = cache(
-  async (categoryId: number, customerAccessToken?: string) => {
+  async (locale: string, categoryId: number, customerAccessToken?: string) => {
     const cachedCategory = getCachedCategory(categoryId);
-    const categorySearch = await fetchFacetedSearch(cachedCategory, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      locale,
+      cachedCategory,
+      undefined,
+      customerAccessToken,
+    );
     const categoryFacets = categorySearch.facets.items.filter(
       (facet) => facet.__typename !== 'CategorySearchFilter',
     );
@@ -75,7 +80,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
   const categoryId = Number(slug);
 
-  const { category } = await getCategoryPageData(categoryId, customerAccessToken);
+  const { category } = await getCategoryPageData(locale, categoryId, customerAccessToken);
 
   if (!category) {
     return notFound();
@@ -107,6 +112,7 @@ export default async function Category(props: Props) {
   const categoryId = Number(slug);
 
   const { category, settings, categoryTree } = await getCategoryPageData(
+    locale,
     categoryId,
     customerAccessToken,
   );
@@ -130,12 +136,14 @@ export default async function Category(props: Props) {
     const currencyCode = await getPreferredCurrencyCode();
 
     const loadSearchParams = await createCategorySearchParamsLoader(
+      locale,
       categoryId,
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
 
     const search = await fetchFacetedSearch(
+      locale,
       {
         ...searchParams,
         ...parsedSearchParams,
@@ -182,12 +190,18 @@ export default async function Category(props: Props) {
     const searchParams = await props.searchParams;
 
     const loadSearchParams = await createCategorySearchParamsLoader(
+      locale,
       categoryId,
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
     const cachedCategory = getCachedCategory(categoryId);
-    const categorySearch = await fetchFacetedSearch(cachedCategory, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      locale,
+      cachedCategory,
+      undefined,
+      customerAccessToken,
+    );
     const refinedSearch = await streamableFacetedSearch;
 
     const allFacets = categorySearch.facets.items.filter(
@@ -234,7 +248,7 @@ export default async function Category(props: Props) {
 
     const compareIds = { entityIds: compare ? compare.map((id: string) => Number(id)) : [] };
 
-    const products = await getCompareProducts(compareIds, customerAccessToken);
+    const products = await getCompareProducts(locale, compareIds, customerAccessToken);
 
     return products.map((product) => ({
       id: product.entityId.toString(),