feat(core): add localized data-fetching (#1703)

.changeset/sixty-pots-lay.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Adds localized data fetching withing the beforeRequest client helper. If information is translated (currently possible to update via the Admin GraphQL API) then we will return the translated product data. See https://developer.bigcommerce.com/docs/store-operations/catalog/graphql-admin/product-basic-info for more information on how to use overrides.

core/client/index.ts

@@ -1,10 +1,28 @@
 import { createClient } from '@bigcommerce/catalyst-client';
 import { headers } from 'next/headers';
-import { getLocale } from 'next-intl/server';
+import { getLocale as getServerLocale } from 'next-intl/server';
 
 import { getChannelIdFromLocale } from '../channels.config';
 import { backendUserAgent } from '../userAgent';
 
+const getLocale = async () => {
+  try {
+    const locale = await getServerLocale();
+
+    return locale;
+  } catch {
+    /**
+     * Next-intl `getLocale` only works on the server, and when middleware has run.
+     *
+     * Instances when `getLocale` will not work:
+     * - Requests in middlewares
+     * - Requests in `generateStaticParams`
+     * - Request in api routes
+     * - Requests in static sites without `setRequestLocale`
+     */
+  }
+};
+
 export const client = createClient({
   storefrontToken: process.env.BIGCOMMERCE_STOREFRONT_TOKEN ?? '',
   xAuthToken: process.env.BIGCOMMERCE_ACCESS_TOKEN ?? '',
@@ -15,37 +33,31 @@ export const client = createClient({
     (process.env.NODE_ENV !== 'production' && process.env.CLIENT_LOGGER !== 'false') ||
     process.env.CLIENT_LOGGER === 'true',
   getChannelId: async (defaultChannelId: string) => {
-    /**
-     * Next-intl `getLocale` only works on the server, and when middleware has run.
-     *
-     * Instances when `getLocale` will not work:
-     * - Requests in middlewares
-     * - Requests in `generateStaticParams`
-     * - Request in api routes
-     * - Requests in static sites without `setRequestLocale`
-     *
-     * We use the default channelId as a fallback, but it is not ideal in some scenarios.
-     *  */
-    try {
-      const locale = await getLocale();
-
-      return getChannelIdFromLocale(locale) ?? defaultChannelId;
-    } catch {
-      return defaultChannelId;
-    }
+    const locale = await getLocale();
+
+    // We use the default channelId as a fallback, but it is not ideal in some scenarios.
+    return getChannelIdFromLocale(locale) ?? defaultChannelId;
   },
   beforeRequest: async (fetchOptions) => {
+    // We can't serialize a `Headers` object within this method so we have to opt into using a plain object
+    const requestHeaders: Record<string, string> = {};
+    const locale = await getLocale();
+
     if (fetchOptions?.cache && ['no-store', 'no-cache'].includes(fetchOptions.cache)) {
       const ipAddress = (await headers()).get('X-Forwarded-For');
 
       if (ipAddress) {
-        return {
-          headers: {
-            'X-Forwarded-For': ipAddress,
-            'True-Client-IP': ipAddress,
-          },
-        };
+        requestHeaders['X-Forwarded-For'] = ipAddress;
+        requestHeaders['True-Client-IP'] = ipAddress;
       }
     }
+
+    if (locale) {
+      requestHeaders['Accept-Language'] = locale;
+    }
+
+    return {
+      headers: requestHeaders,
+    };
   },
 });