feat: Remove caching on fetching product inventory data (#2801)

* feat: Remove caching on fetching product inventory data

* feat: Remove caching on fetching product inventory data - Apply comments

Author: Tharaae

.changeset/eager-nails-bake.md

@@ -0,0 +1,10 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Fetch product inventory data with a separate GQL query with no caching
+
+## Migration
+The files to be rebased for this change to be applied are:
+- core/app/[locale]/(default)/product/[slug]/page-data.ts
+- core/app/[locale]/(default)/product/[slug]/page.tsx

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

@@ -211,7 +211,7 @@ export const getProduct = cache(async (entityId: number, customerAccessToken?: s
   return data.site;
 });
 
-const StreamableProductVariantBySkuQuery = graphql(`
+const StreamableProductVariantInventoryBySkuQuery = graphql(`
   query ProductVariantBySkuQuery($productId: Int!, $sku: String!) {
     site {
       product(entityId: $productId) {
@@ -247,15 +247,15 @@ const StreamableProductVariantBySkuQuery = graphql(`
   }
 `);
 
-type VariantVariables = VariablesOf<typeof StreamableProductVariantBySkuQuery>;
+type VariantInventoryVariables = VariablesOf<typeof StreamableProductVariantInventoryBySkuQuery>;
 
-export const getStreamableProductVariant = cache(
-  async (variables: VariantVariables, customerAccessToken?: string) => {
+export const getStreamableProductVariantInventory = cache(
+  async (variables: VariantInventoryVariables, customerAccessToken?: string) => {
     const { data } = await client.fetch({
-      document: StreamableProductVariantBySkuQuery,
+      document: StreamableProductVariantInventoryBySkuQuery,
       variables,
       customerAccessToken,
-      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate: 60 } },
     });
 
     return data.site.product?.variants;
@@ -311,6 +311,36 @@ const StreamableProductQuery = graphql(
           minPurchaseQuantity
           maxPurchaseQuantity
           warranty
+          ...ProductViewedFragment
+          ...ProductSchemaFragment
+        }
+      }
+    }
+  `,
+  [ProductViewedFragment, ProductSchemaFragment],
+);
+
+type Variables = VariablesOf<typeof StreamableProductQuery>;
+
+export const getStreamableProduct = cache(
+  async (variables: Variables, customerAccessToken?: string) => {
+    const { data } = await client.fetch({
+      document: StreamableProductQuery,
+      variables,
+      customerAccessToken,
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+    });
+
+    return data.site.product;
+  },
+);
+
+const StreamableProductInventoryQuery = graphql(
+  `
+    query StreamableProductInventoryQuery($entityId: Int!) {
+      site {
+        product(entityId: $entityId) {
+          sku
           inventory {
             hasVariantInventory
             isInStock
@@ -325,25 +355,23 @@ const StreamableProductQuery = graphql(
           availabilityV2 {
             status
           }
-          ...ProductViewedFragment
           ...ProductVariantsInventoryFragment
-          ...ProductSchemaFragment
         }
       }
     }
   `,
-  [ProductViewedFragment, ProductSchemaFragment, ProductVariantsInventoryFragment],
+  [ProductVariantsInventoryFragment],
 );
 
-type Variables = VariablesOf<typeof StreamableProductQuery>;
+type ProductInventoryVariables = VariablesOf<typeof StreamableProductQuery>;
 
-export const getStreamableProduct = cache(
-  async (variables: Variables, customerAccessToken?: string) => {
+export const getStreamableProductInventory = cache(
+  async (variables: ProductInventoryVariables, customerAccessToken?: string) => {
     const { data } = await client.fetch({
-      document: StreamableProductQuery,
+      document: StreamableProductInventoryQuery,
       variables,
       customerAccessToken,
-      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate: 60 } },
     });
 
     return data.site.product;

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

@@ -29,7 +29,8 @@ import {
   getProductPricingAndRelatedProducts,
   getStreamableInventorySettingsQuery,
   getStreamableProduct,
-  getStreamableProductVariant,
+  getStreamableProductInventory,
+  getStreamableProductVariantInventory,
 } from './page-data';
 
 interface Props {
@@ -120,8 +121,22 @@ export default async function Product({ params, searchParams }: Props) {
 
   const streamableProductSku = Streamable.from(async () => (await streamableProduct).sku);
 
-  const streamableProductVariant = Streamable.from(async () => {
-    const product = await streamableProduct;
+  const streamableProductInventory = Streamable.from(async () => {
+    const variables = {
+      entityId: Number(productId),
+    };
+
+    const product = await getStreamableProductInventory(variables, customerAccessToken);
+
+    if (!product) {
+      return notFound();
+    }
+
+    return product;
+  });
+
+  const streamableProductVariantInventory = Streamable.from(async () => {
+    const product = await streamableProductInventory;
 
     if (!product.inventory.hasVariantInventory) {
       return undefined;
@@ -132,7 +147,7 @@ export default async function Product({ params, searchParams }: Props) {
       sku: product.sku,
     };
 
-    const variants = await getStreamableProductVariant(variables, customerAccessToken);
+    const variants = await getStreamableProductVariantInventory(variables, customerAccessToken);
 
     if (!variants) {
       return undefined;
@@ -194,7 +209,7 @@ export default async function Product({ params, searchParams }: Props) {
   });
 
   const streameableCtaLabel = Streamable.from(async () => {
-    const product = await streamableProduct;
+    const product = await streamableProductInventory;
 
     if (product.availabilityV2.status === 'Unavailable') {
       return t('ProductDetails.Submit.unavailable');
@@ -212,7 +227,7 @@ export default async function Product({ params, searchParams }: Props) {
   });
 
   const streameableCtaDisabled = Streamable.from(async () => {
-    const product = await streamableProduct;
+    const product = await streamableProductInventory;
 
     if (product.availabilityV2.status === 'Unavailable') {
       return true;
@@ -259,8 +274,8 @@ export default async function Product({ params, searchParams }: Props) {
 
   const streamableStockDisplayData = Streamable.from(async () => {
     const [product, variant, inventorySetting] = await Streamable.all([
-      streamableProduct,
-      streamableProductVariant,
+      streamableProductInventory,
+      streamableProductVariantInventory,
       streamableInventorySettings,
     ]);
 
@@ -349,8 +364,8 @@ export default async function Product({ params, searchParams }: Props) {
 
   const streamableBackorderDisplayData = Streamable.from(async () => {
     const [product, variant, inventorySetting] = await Streamable.all([
-      streamableProduct,
-      streamableProductVariant,
+      streamableProductInventory,
+      streamableProductVariantInventory,
       streamableInventorySettings,
     ]);