Nuxt•14mo ago

`getCachedData`: data is always undefined

In my

app.vue

app.vue

app.vue

app.vue I'm getting user data from supabase. I want to cache the values so I don't have to do it on every cache load.

I followed this YouTube tutorial by @manniL https://www.youtube.com/watch?v=aQPR0xn-MMk&t=336s&ab_channel=AlexanderLichter

But for some reason this line of code always returns undefined, causing my code to refetch and not using any cache. Why is that?:

const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
console.log('data', data) // always returns undefined

const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
console.log('data', data) // always returns undefined

const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
console.log('data', data) // always returns undefined

const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
console.log('data', data) // always returns undefined

Here is my full code:

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const userData = await userStore.fetchInitialData()
        console.log('userdata in useasyncdata', userData)
        return userData
    }
},
{
    watch: [user],
    getCachedData(key) {
        console.log('key', key)
        const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
        console.log('data', data)

        // refetch
        if (!data) return

        const expirationDate = new Date(data.fetchedAt)
        expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
        const isExpired = expirationDate.getTime() < Date.now()

        // refetch
        if (isExpired) return

        return data
    }
})

if (userDataAsync.value) {
    userStore.setInitialData(userDataAsync.value)
}

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const userData = await userStore.fetchInitialData()
        console.log('userdata in useasyncdata', userData)
        return userData
    }
},
{
    watch: [user],
    getCachedData(key) {
        console.log('key', key)
        const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
        console.log('data', data)

        // refetch
        if (!data) return

        const expirationDate = new Date(data.fetchedAt)
        expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
        const isExpired = expirationDate.getTime() < Date.now()

        // refetch
        if (isExpired) return

        return data
    }
})

if (userDataAsync.value) {
    userStore.setInitialData(userDataAsync.value)
}

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const userData = await userStore.fetchInitialData()
        console.log('userdata in useasyncdata', userData)
        return userData
    }
},
{
    watch: [user],
    getCachedData(key) {
        console.log('key', key)
        const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
        console.log('data', data)

        // refetch
        if (!data) return

        const expirationDate = new Date(data.fetchedAt)
        expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
        const isExpired = expirationDate.getTime() < Date.now()

        // refetch
        if (isExpired) return

        return data
    }
})

if (userDataAsync.value) {
    userStore.setInitialData(userDataAsync.value)
}

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const userData = await userStore.fetchInitialData()
        console.log('userdata in useasyncdata', userData)
        return userData
    }
},
{
    watch: [user],
    getCachedData(key) {
        console.log('key', key)
        const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
        console.log('data', data)

        // refetch
        if (!data) return

        const expirationDate = new Date(data.fetchedAt)
        expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
        const isExpired = expirationDate.getTime() < Date.now()

        // refetch
        if (isExpired) return

        return data
    }
})

if (userDataAsync.value) {
    userStore.setInitialData(userDataAsync.value)
}

Using Nuxt 3.12.2

Any advice is highly appreciated

YouTubeAlexander Lichter

Nuxt 3.8 - Client-side caching with getCachedData ✨

Nuxt 3.8 was released just a day ago, packed with lots of amazing features. Among the updates, one change for

useFetch

useFetch

and

useAsyncData

useAsyncData

is pretty significant IMO -

getCachedData

getCachedData

getCachedData

getCachedData. In this video, we will explore how that function can avoid superfluous calls to an API and cache data for visitors on the client, either until a hard-reload or...

kapa.ai•11/4/24, 10:05 AM

Hi @Phillip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•11/4/24, 10:06 AM

----------------------
Based on the information provided in the knowledge sources, I can offer some insights into your issue with

getCachedData

getCachedData

in Nuxt 3.12.2.

The problem you're experiencing where

data

data

is always undefined could be due to a few reasons:

Payload structure: The nuxtApp.payload.data**key]nuxtApp.payload.data**key] or nuxtApp.static.data[key]nuxtApp.static.data[key] might not contain the data you expect. In Nuxt 3, the payload structure has changed compared to earlier versions. According to the [useNuxtApp documentation** (https://nuxt.com/docs/api/composables/use-nuxt-app#payload), the payload.datapayload.data object contains data fetched from API endpoints using
```
useFetch
```
```
useFetch
```
or
```
useAsyncData
```
```
useAsyncData
```
.
Key mismatch: Ensure that the
```
key
```
```
key
```
you're using in
```
getCachedData
```
```
getCachedData
```
matches the key used when initially fetching the data. In your code, you're using 'userStoreData' as the key for
```
useAsyncData
```
```
useAsyncData
```
. Make sure this key is consistent.
Server-side rendering: If the data is not being fetched on the server side, it won't be available in the payload on initial client-side render. As mentioned in the data fetching documentation (https://nuxt.com/docs/getting-started/data-fetching#suspense), if you haven't fetched data on the server (e.g., with server: falseserver: false), the data won't be fetched until hydration completes.
Caching mechanism: The
```
getCachedData
```
```
getCachedData
```
function you're using is based on the example from the YouTube tutorial, but it's important to note that this is a custom implementation and not a built-in Nuxt feature. The actual caching mechanism might need adjustments to work correctly in your specific use case.

To troubleshoot this issue, you could try the following:

Log the entire nuxtApp.payloadnuxtApp.payload and nuxtApp.staticnuxtApp.static objects to see their structure and contents.
Ensure that your data is being fetched on the server side if you want it to be available in the payload.

kapa.ai•11/4/24, 10:06 AM

Consider using useNuxtDatauseNuxtData to access cached data, as shown in the useNuxtData documentation (https://nuxt.com/docs/api/composables/use-nuxt-data). This is a built-in Nuxt composable for accessing cached data.
If you're using a custom caching mechanism, make sure it's properly integrated with Nuxt's data fetching lifecycle.

If these steps don't resolve the issue, you might want to consider simplifying your approach or using Nuxt's built-in caching mechanisms instead of a custom implementation.

Remember that the behavior of data fetching and caching can be complex, especially when dealing with server-side rendering and client-side hydration. If you continue to face issues, you might want to create a minimal reproducible example and seek help from the Nuxt community or official support channels.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•11/4/24, 10:06 AM

@728986061098713110 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PhillipOP•11/4/24, 10:21 AM

I noticed that when changing tabs it doesn't even get in the

getCachedData

getCachedData

function and immediately refetches

PhillipOP•11/4/24, 10:32 AM

I used this workaround mentioned here https://github.com/nuxt/nuxt/issues/24332#issuecomment-2238821604 and this is now working.

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const cachedData = nuxtApp.payload.data['userStoreData'] || nuxtApp.static.data['userStoreData'] as UserDataWithFetchedAt


        if (cachedData) {
            const expirationDate = new Date(cachedData.fetchedAt)
            expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
            const isExpired = expirationDate.getTime() < Date.now()

            if (!isExpired) return cachedData
        }

        const userData = await userStore.fetchInitialData()
        return userData
    }
},
{
    watch: [user],
    transform(data) {
        return { ...data, fetchedAt: Date.now() }
    },
    // getCachedData(key) {
    //     console.log('key', key)
    //     console.log('nuxtApp.payload', nuxtApp.payload.data['userStoreData'])
    //     const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    //     console.log('data', data)

    //     // refetch
    //     if (!data) return

    //     const expirationDate = new Date(data.fetchedAt)
    //     expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
    //     const isExpired = expirationDate.getTime() < Date.now()

    //     // refetch
    //     if (isExpired) return

    //     return data
    // }
})

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const cachedData = nuxtApp.payload.data['userStoreData'] || nuxtApp.static.data['userStoreData'] as UserDataWithFetchedAt


        if (cachedData) {
            const expirationDate = new Date(cachedData.fetchedAt)
            expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
            const isExpired = expirationDate.getTime() < Date.now()

            if (!isExpired) return cachedData
        }

        const userData = await userStore.fetchInitialData()
        return userData
    }
},
{
    watch: [user],
    transform(data) {
        return { ...data, fetchedAt: Date.now() }
    },
    // getCachedData(key) {
    //     console.log('key', key)
    //     console.log('nuxtApp.payload', nuxtApp.payload.data['userStoreData'])
    //     const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    //     console.log('data', data)

    //     // refetch
    //     if (!data) return

    //     const expirationDate = new Date(data.fetchedAt)
    //     expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
    //     const isExpired = expirationDate.getTime() < Date.now()

    //     // refetch
    //     if (isExpired) return

    //     return data
    // }
})

GitHub

Re-use `getCachedData` when `refresh`ing `asyncData` · Issue #24332...

Describe the feature Hey

With the introduction of getCachedData, useFetch and useAsyncData have an elegant way to re-use existing data easily. There is a downside though, as @broox mentioned in ...

`getCachedData`: data is always undefined

Similar Threads

Similar Threads

Similar Threads