question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

data not changing with useAsyncData watch route

See original GitHub issue

Hello,

I experience following bug when Im using useAsyncData while watching the route. On the initial page load the correct data from the strapi api is stored in pageData. After clicking on the nuxt link (/news) the useAsyncData gets triggert again and with console.log inside useAsyncData the correct data gets fetched. But in the template pageData is the old Object. If i now go back to the previous path (/) i will get the data from /news.

/pages/[...slug].vue

<template>
    <div>
        <nuxt-link href="/news">News</link-wrap>
        <div>{{ pageData }}</div>
    </div>
</template>
const {data: pageData} = await useAsyncData("pageData",
    () => find<Strapi4Response<any>>("pages", {filters: {slug: {$eq: route.path}}}), {watch: [route]});

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
graphicfoxcommented, Jul 18, 2022

Adding {initialCache: false} to the options resolves the problem. But I don´t know if this is intended. Watching the route is not necessary with this, because the data will get updateed now.

const {data: pageApiData} = await useAsyncData("pageApiData", () => setPageData(), {initialCache: false});
1reaction
ahoiromancommented, Jul 13, 2022

Same here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to watch on Route changes with Nuxt and asyncData
First thing, context.route or it's alias this.$route is immutable object and should not be assigned a value. Instead, we should use this.
Read more >
Data Fetching - Nuxt
The fetch hook is not called on query string changes by default. To watch for query changes you can add a watcher on...
Read more >
Data Fetching · Get Started with Nuxt
This composable provides a convenient wrapper around useAsyncData and $fetch . It automatically generates a key based on URL and fetch options, provides...
Read more >
Async Data - NuxtJS
Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData is called every time before...
Read more >
NuxtLink route changes but data stays the same (Nuxt 3)
Are you getting a console error when you navigate clientside because data is undefined/not an array?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found