Cache is showing old data on page navigations.

Unanswered

Gouty oak gall posted this in #help-forum

Gouty oak gallOP

2024-01-03T03:04:19.000Z

I have a cache that I share between two pages, here is the code:

export const getRestaurant = cache(async (subdomain) => {
    const item = await supabase.from('restaurant').select(`
        *,
        product (*, product_portions (*)),
        menu_category (*)
      `)
    .eq('subdomain', subdomain).single()
    console.log("ITEM:",item)
    return item
})

now, for some reason when i refresh the page, and then navigate to the previous page that also uses this cache, it shows a super old version of the data -- why is that? any help helps!

27 Replies

@Gouty oak gall I have a cache that I share between two pages, here is the code: js export const getRestaurant = cache(async (subdomain) => { const item = await supabase.from('restaurant').select(` *, product (*, product_portions (*)), menu_category (*) `) .eq('subdomain', subdomain).single() console.log("ITEM:",item) return item }) now, for some reason when i refresh the page, and then navigate to the previous page that also uses this cache, it shows a super old version of the data -- why is that? any help helps!

Ray

2024-01-03T03:10:57.000Z

where is the cache from? is it the react one?

and what do you mean by "super old version"?

Gouty oak gallOP

2024-01-03T03:12:38.000Z

yes, from react-- should i import from somewhere else, is there a next one?

"super old version" -- a version from weeks ago when i first started dev'ing (and im viewing it on dev server, not prod)

@Gouty oak gall yes, from react-- should i import from somewhere else, is there a next one?

Ray

2024-01-03T03:14:44.000Z

no its fine, it is mainly used for deduplication

@Gouty oak gall "super old version" -- a version from weeks ago when i first started dev'ing (and im viewing it on dev server, not prod)

Ray

2024-01-03T03:14:59.000Z

that's odd, can you show the code how you use it?

Gouty oak gallOP

2024-01-03T03:16:06.000Z

yes

so i am defining it in my first page, and i call it here, on the same page

export default async function SubDomainPage({params}) {
    const {data, error} = await getRestaurant(params.subdomain)

and then on the other page i import it

export default async function ProductPage({params}) {

    const {data} = await getRestaurant(params.subdomain)
    const product = data.product.find(product => product.slug === params.id)