feat(core): add @shopperPreferences directive to queries

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

@@ -1,3 +1,4 @@
+import { getLocale } from 'next-intl/server';
 import { cache } from 'react';
 
 import { getSessionCustomerAccessToken } from '~/auth';
@@ -13,7 +14,8 @@ const RegisterCustomerQuery = graphql(
       $customerSortBy: FormFieldSortInput
       $addressFilters: FormFieldFiltersInput
       $addressSortBy: FormFieldSortInput
-    ) {
+      $locale: String
+    ) @shopperPreferences(locale: $locale) {
       site {
         settings {
           formFields {
@@ -53,6 +55,7 @@ interface Props {
 
 export const getRegisterCustomerQuery = cache(async ({ address, customer }: Props) => {
   const customerAccessToken = await getSessionCustomerAccessToken();
+  const locale = await getLocale();
 
   const response = await client.fetch({
     document: RegisterCustomerQuery,
@@ -61,6 +64,7 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
       addressSortBy: address?.sortBy,
       customerFilters: customer?.filters,
       customerSortBy: customer?.sortBy,
+      locale,
     },
     fetchOptions: { cache: 'no-store' },
     customerAccessToken,

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

@@ -5,7 +5,7 @@ import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 
 const BrandPageQuery = graphql(`
-  query BrandPageQuery($entityId: Int!) {
+  query BrandPageQuery($entityId: Int!, $locale: String) @shopperPreferences(locale: $locale) {
     site {
       brand(entityId: $entityId) {
         name
@@ -26,13 +26,15 @@ 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 } },
-  });
+export const getBrandPageData = cache(
+  async (entityId: number, locale: string, customerAccessToken?: string) => {
+    const response = await client.fetch({
+      document: BrandPageQuery,
+      variables: { entityId, locale },
+      customerAccessToken,
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+    });
 
-  return response.data.site;
-});
+    return response.data.site;
+  },
+);

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

@@ -29,9 +29,14 @@ const getCachedBrand = cache((brandId: string) => {
 const compareLoader = createCompareLoader();
 
 const createBrandSearchParamsLoader = cache(
-  async (brandId: string, customerAccessToken?: string) => {
+  async (brandId: string, locale: string, customerAccessToken?: string) => {
     const cachedBrand = getCachedBrand(brandId);
-    const brandSearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const brandSearch = await fetchFacetedSearch(
+      cachedBrand,
+      locale,
+      undefined,
+      customerAccessToken,
+    );
     const brandFacets = brandSearch.facets.items.filter(
       (facet) => facet.__typename !== 'BrandSearchFilter',
     );
@@ -67,12 +72,12 @@ interface Props {
 }
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
-  const { slug } = await props.params;
+  const { locale, slug } = await props.params;
   const customerAccessToken = await getSessionCustomerAccessToken();
 
   const brandId = Number(slug);
 
-  const { brand } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand } = await getBrandPageData(brandId, locale, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -97,7 +102,7 @@ export default async function Brand(props: Props) {
 
   const brandId = Number(slug);
 
-  const { brand, settings } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand, settings } = await getBrandPageData(brandId, locale, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -110,7 +115,7 @@ 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(slug, locale, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
 
     const search = await fetchFacetedSearch(
@@ -119,6 +124,7 @@ export default async function Brand(props: Props) {
         ...parsedSearchParams,
         brand: [slug],
       },
+      locale,
       currencyCode,
       customerAccessToken,
     );
@@ -158,10 +164,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(slug, locale, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
     const cachedBrand = getCachedBrand(slug);
-    const categorySearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      cachedBrand,
+      locale,
+      undefined,
+      customerAccessToken,
+    );
     const refinedSearch = await streamableFacetedSearch;
 
     const allFacets = categorySearch.facets.items.filter(
@@ -191,7 +202,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(compareIds, locale, customerAccessToken);
 
     return products.map((product) => ({
       id: product.entityId.toString(),

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

@@ -7,7 +7,7 @@ import { BreadcrumbsCategoryFragment } from '~/components/breadcrumbs/fragment';
 
 const CategoryPageQuery = graphql(
   `
-    query CategoryPageQuery($entityId: Int!) {
+    query CategoryPageQuery($entityId: Int!, $locale: String) @shopperPreferences(locale: $locale) {
       site {
         category(entityId: $entityId) {
           entityId
@@ -47,13 +47,15 @@ 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 } },
-  });
+export const getCategoryPageData = cache(
+  async (entityId: number, locale: string, customerAccessToken?: string) => {
+    const response = await client.fetch({
+      document: CategoryPageQuery,
+      variables: { entityId, locale },
+      customerAccessToken,
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+    });
 
-  return response.data.site;
-});
+    return response.data.site;
+  },
+);

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

@@ -31,9 +31,14 @@ const getCachedCategory = cache((categoryId: number) => {
 const compareLoader = createCompareLoader();
 
 const createCategorySearchParamsLoader = cache(
-  async (categoryId: number, customerAccessToken?: string) => {
+  async (categoryId: number, locale: string, customerAccessToken?: string) => {
     const cachedCategory = getCachedCategory(categoryId);
-    const categorySearch = await fetchFacetedSearch(cachedCategory, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      cachedCategory,
+      locale,
+      undefined,
+      customerAccessToken,
+    );
     const categoryFacets = categorySearch.facets.items.filter(
       (facet) => facet.__typename !== 'CategorySearchFilter',
     );
@@ -69,12 +74,12 @@ interface Props {
 }
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
-  const { slug } = await props.params;
+  const { locale, slug } = await props.params;
   const customerAccessToken = await getSessionCustomerAccessToken();
 
   const categoryId = Number(slug);
 
-  const { category } = await getCategoryPageData(categoryId, customerAccessToken);
+  const { category } = await getCategoryPageData(categoryId, locale, customerAccessToken);
 
   if (!category) {
     return notFound();
@@ -101,6 +106,7 @@ export default async function Category(props: Props) {
 
   const { category, settings, categoryTree } = await getCategoryPageData(
     categoryId,
+    locale,
     customerAccessToken,
   );
 
@@ -122,6 +128,7 @@ export default async function Category(props: Props) {
 
     const loadSearchParams = await createCategorySearchParamsLoader(
       categoryId,
+      locale,
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
@@ -132,6 +139,7 @@ export default async function Category(props: Props) {
         ...parsedSearchParams,
         category: categoryId,
       },
+      locale,
       currencyCode,
       customerAccessToken,
     );
@@ -174,11 +182,17 @@ export default async function Category(props: Props) {
 
     const loadSearchParams = await createCategorySearchParamsLoader(
       categoryId,
+      locale,
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
     const cachedCategory = getCachedCategory(categoryId);
-    const categorySearch = await fetchFacetedSearch(cachedCategory, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      cachedCategory,
+      locale,
+      undefined,
+      customerAccessToken,
+    );
     const refinedSearch = await streamableFacetedSearch;
 
     const allFacets = categorySearch.facets.items.filter(
@@ -225,7 +239,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(compareIds, locale, customerAccessToken);
 
     return products.map((product) => ({
       id: product.entityId.toString(),

core/app/[locale]/(default)/(faceted)/fetch-compare-products.ts

@@ -21,7 +21,8 @@ const CompareProductsSchema = z.object({
 });
 
 const CompareProductsQuery = graphql(`
-  query CompareProductsQuery($entityIds: [Int!], $first: Int) {
+  query CompareProductsQuery($entityIds: [Int!], $first: Int, $locale: String)
+  @shopperPreferences(locale: $locale) {
     site {
       products(entityIds: $entityIds, first: $first) {
         edges {
@@ -43,7 +44,7 @@ const CompareProductsQuery = graphql(`
 type Variables = VariablesOf<typeof CompareProductsQuery>;
 
 export const getCompareProducts = cache(
-  async (variables: Variables, customerAccessToken?: string) => {
+  async (variables: Variables, locale: string, customerAccessToken?: string) => {
     const parsedVariables = CompareProductsSchema.parse(variables);
 
     if (parsedVariables.entityIds.length === 0) {
@@ -52,7 +53,7 @@ export const getCompareProducts = cache(
 
     const response = await client.fetch({
       document: CompareProductsQuery,
-      variables: { ...parsedVariables, first: MAX_COMPARE_LIMIT },
+      variables: { ...parsedVariables, first: MAX_COMPARE_LIMIT, locale },
       customerAccessToken,
       fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
     });

core/app/[locale]/(default)/(faceted)/fetch-faceted-search.ts

@@ -18,7 +18,8 @@ const GetProductSearchResultsQuery = graphql(
       $filters: SearchProductsFiltersInput!
       $sort: SearchProductsSortInput
       $currencyCode: currencyCode
-    ) {
+      $locale: String
+    ) @shopperPreferences(locale: $locale) {
       site {
         search {
           searchProducts(filters: $filters, sort: $sort) {
@@ -175,6 +176,7 @@ interface ProductSearch {
 const getProductSearchResults = cache(
   async (
     { limit = 9, after, before, sort, filters }: ProductSearch,
+    locale: string,
     currencyCode?: CurrencyCode,
     customerAccessToken?: string,
   ) => {
@@ -183,7 +185,7 @@ const getProductSearchResults = cache(
 
     const response = await client.fetch({
       document: GetProductSearchResultsQuery,
-      variables: { ...filterArgs, ...paginationArgs, currencyCode },
+      variables: { ...filterArgs, ...paginationArgs, currencyCode, locale },
       customerAccessToken,
       fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate: 300 } },
     });
@@ -401,6 +403,7 @@ export const fetchFacetedSearch = cache(
   // We need to make sure the reference passed into this function is the same if we want it to be memoized.
   async (
     params: z.input<typeof PublicSearchParamsSchema>,
+    locale: string,
     currencyCode?: CurrencyCode,
     customerAccessToken?: string,
   ) => {
@@ -414,6 +417,7 @@ export const fetchFacetedSearch = cache(
         sort,
         filters,
       },
+      locale,
       currencyCode,
       customerAccessToken,
     );

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

@@ -5,7 +5,7 @@ import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 
 const SearchPageQuery = graphql(`
-  query SearchPageQuery {
+  query SearchPageQuery($locale: String) @shopperPreferences(locale: $locale) {
     site {
       settings {
         storefront {
@@ -18,9 +18,10 @@ const SearchPageQuery = graphql(`
   }
 `);
 
-export const getSearchPageData = cache(async () => {
+export const getSearchPageData = cache(async (locale: string) => {
   const response = await client.fetch({
     document: SearchPageQuery,
+    variables: { locale },
     fetchOptions: { next: { revalidate } },
   });