Skip to content

feat: Remove caching on fetching product inventory data #2801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tharaae merged 2 commits into from
Feb 11, 2026
+77 −24
Merged

feat: Remove caching on fetching product inventory data #2801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bd96ba
feat: Remove caching on fetching product inventory data
Tharaae Dec 31, 2025
d424c67
feat: Remove caching on fetching product inventory data - Apply comments
Tharaae Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/eager-nails-bake.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@bigcommerce/catalyst-core": minor
---

Fetch product inventory data with a separate GQL query with no caching
Comment on lines +2 to +5
Copy link
Copy Markdown
Contributor

@migueloller migueloller Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the rationale for marking this as a minor the impact it could have on performance and/or costs for the PDP?

This is the primary question that I have when introducing queries that aren't cached. Are we good with every single PDP load invoking the API? Are we certain merchants won't run into rate limits?

Copy link
Copy Markdown
Contributor Author

@Tharaae Tharaae Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's minor because it has not major changes that impacts the UX much.

What happens with the current change is that only the product variant inventory data will be fetched with the PDP reload. So, product details and images as well as other settings data are not refetched.


## 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
56 changes: 42 additions & 14 deletions core/app/[locale]/(default)/product/[slug]/page-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,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) {
Expand Down Expand Up @@ -246,15 +246,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 } },
Copy link
Copy Markdown

@animesh1987 animesh1987 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems fine for now, but I have a feeling we might get push back from product on aligning on fresh data for stock count.

});

return data.site.product?.variants;
Expand Down Expand Up @@ -310,6 +310,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
Expand All @@ -324,25 +354,23 @@ const StreamableProductQuery = graphql(
availabilityV2 {
status
}
...ProductViewedFragment
...ProductVariantsInventoryFragment
...ProductSchemaFragment
}
}
}
`,
[ProductViewedFragment, ProductSchemaFragment, ProductVariantsInventoryFragment],
[ProductVariantsInventoryFragment],
);

type Variables = VariablesOf<typeof StreamableProductQuery>;
type ProductInventoryVariables = VariablesOf<typeof StreamableProductQuery>;
Copy link
Copy Markdown

@agchan12 agchan12 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this be better?

type ProductInventoryVariables = VariablesOf<typeof StreamableProductInventoryQuery>;


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;
Expand Down
35 changes: 25 additions & 10 deletions core/app/[locale]/(default)/product/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ import {
getProductPricingAndRelatedProducts,
getStreamableInventorySettingsQuery,
getStreamableProduct,
getStreamableProductVariant,
getStreamableProductInventory,
getStreamableProductVariantInventory,
} from './page-data';

interface Props {
Expand Down Expand Up @@ -118,8 +119,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;
Expand All @@ -130,7 +145,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;
Expand Down Expand Up @@ -192,7 +207,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');
Expand All @@ -210,7 +225,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;
Expand Down Expand Up @@ -257,8 +272,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,
]);

Expand Down Expand Up @@ -347,8 +362,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,
]);

Expand Down