Medusa nextjs storefront, cache problem

[fleet grotto]

I can't see the updated products. I make changes to the products in Medusa, but they remain visible on the storefront. How can I disable the cache?

[dark agate]

Hello @fleet grotto they remain visible or invisible you mean? What changes are you making to the products? The changes don't show in the product listing component (/store) or the product detail page component?

[fleet grotto]

Yes, exactly. Any changes I make to products or categories in Medusa aren't visible in the store. For example, I deleted products, but I still see them in the store. It's clearly a cache issue. How can I disable the cache?

[dark agate]

can you share the contents of src/lib/data/products.ts?

maybe something like force-cache is set

[torpid ingot]

i think there is a cache , i used to encouter the problem too ....
just delete the .next directory and do npm run dev ...
or wait till tomorrow maybe the system will force to get the news informations ... :/

[fleet grotto]

I already tried but it doesn't solve the problem definitively, the next time I change it it doesn't update

[fleet grotto]

export const listProducts = async ({
pageParam = 1,
queryParams,
countryCode,
regionId,
}: {
pageParam?: number
queryParams?: HttpTypes.FindParams & HttpTypes.StoreProductParams
countryCode?: string
regionId?: string
}): Promise<{
response: { products: HttpTypes.StoreProduct[]; count: number }
nextPage: number | null
queryParams?: HttpTypes.FindParams & HttpTypes.StoreProductParams
}> => {
if (!countryCode && !regionId) {
throw new Error("Country code or region ID is required")
}

const limit = queryParams?.limit || 12
const _pageParam = Math.max(pageParam, 1)
const offset = (_pageParam === 1) ? 0 : (_pageParam - 1) * limit;

let region: HttpTypes.StoreRegion | undefined | null

if (countryCode) {
region = await getRegion(countryCode)
} else {
region = await retrieveRegion(regionId!)
}

if (!region) {
return {
response: { products: [], count: 0 },
nextPage: null,
}
}

const headers = {
...(await getAuthHeaders()),
}

const next = {
...(await getCacheOptions("products")),
}

return sdk.client
.fetch<{ products: HttpTypes.StoreProduct[]; count: number }>(
/store/products,
{
method: "GET",
query: {
limit,
offset,
region_id: region?.id,
fields:
"*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
...queryParams,
},
headers,
next,
cache: "force-cache",
}
)
.then(({ products, count }) => {
const nextPage = count > offset + limit ? pageParam + 1 : null

  return {
    response: {
      products,
      count,
    },
    nextPage: nextPage,
    queryParams,
  }
})

}

[fleet grotto]

export const listProductsWithSort = async ({
page = 0,
queryParams,
sortBy = "created_at",
countryCode,
}: {
page?: number
queryParams?: HttpTypes.FindParams & HttpTypes.StoreProductParams
sortBy?: SortOptions
countryCode: string
}): Promise<{
response: { products: HttpTypes.StoreProduct[]; count: number }
nextPage: number | null
queryParams?: HttpTypes.FindParams & HttpTypes.StoreProductParams
}> => {
const limit = queryParams?.limit || 12

const {
response: { products, count },
} = await listProducts({
pageParam: 0,
queryParams: {
...queryParams,
limit: 100,
},
countryCode,
})

const sortedProducts = sortProducts(products, sortBy)

const pageParam = (page - 1) * limit

const nextPage = count > pageParam + limit ? pageParam + limit : null

const paginatedProducts = sortedProducts.slice(pageParam, pageParam + limit)

return {
response: {
products: paginatedProducts,
count,
},
nextPage,
queryParams,
}
}

[dark agate]

try changing cache: "force-cache", to cache: "no-store", . Remove the .next.cache folder and startup the dev server again

[torpid ingot]

let us know if it worked @fleet grotto i'll use it next time 🙂

[fleet grotto]

yes!! work fine! then I can apply the same change to the categories that were not updating...

[dark agate]

yes and after you are done developing, then focus on how to correctly apply caching in your storefront. I usually take tha approach, disable caching so i don't have weird issues and once i am reaching production, correctly implement cachin so bandwith is not wasted

[fleet grotto]

thank you so much