Occasional loss of reactivity with defineQuery and useRoute

[tpfaffenbauer]

Hi there,

I'm encountering a bit of a strange issue when using defineQuery. Using Nuxt, in my setup I'm fetching page content based on route.params.slug ("slug" being the dynamic route parameter for the page component).

While using useQuery inside the page component's <script setup> everything seems to work just fine. However, after moving the same query function to another file using defineQuery the data stops reacting to route changes occasionally. Then, after a period of time or some amount of route changes, it becomes reactive again. This also happens repeatedly, not just once.

To isolate the issue, I've set up a brand new installation of Nuxt (repo available here) and I'm getting the same results there as well. Here's a short screen recording of the reproduction. The "test data" should change along with the slug.

Recording.2025-01-29.142020.mp4

The query:

// ~/queries/page.ts
export const usePage = defineQuery(() => {
    const route = useRoute();
    return useQuery({
        key: () => ['pages', route.params.slug as string],
        query: () => delay(route.params.slug as string)
    })
})

// delay to imitate fetch
function delay(str: string) {
    return new Promise(resolve => setTimeout(() => {
        resolve(str);
    }, 200));
}

The page component:

<template>
    <!-- ~/pages/[slug].vue -->
    <div>
        <pre>slug: {{ route.params.slug }}</pre>
        <pre>test data: {{ data }}</pre>
    </div>
</template>

<script setup lang="ts">
    import { usePage } from '~/queries/page';
    
    const { data } = usePage();
    const route = useRoute();
</script>

[posva]

Hello! This seems to be working as expected: you are seeing first the delay and then the cache data being immediately reused with no delay. Queries are waiting on load but not by navigation. You can await refresh() right after usePage() or use data loaders (and no await)

[connorwinston]

I am also experiencing this exact behavior in my app. I tested your repo @tpfaffenbauer here https://stackblitz.com/github/tpfaffenbauer/nuxt-piniacolada and got the same behavior. If you rapidly click between the 2 links you will eventually get "stuck" at one of the slugs data and it wont change regardless of loading state/key. I cant figure out the pattern through of why it is happening

[posva]

There must be some reproduction steps I’m missing. What is the starting page, are the links clicked before switching? Any time elapsed before the quick clicking?

[tpfaffenbauer]

I've tested this a bit more in the repro and I couldn't reproduce it when starting from the home page. But when starting out from either /page1 or /page2 (via refresh while being on the page or by entering the URL directly), the data eventually will stop changing after a couple of seconds/route changes.

[posva]

Thanks! Now I can reproduce it! It seems to be related to the tracking mechanism in defined queries. The one initially visited isn't properly tracked and creates bugs

[posva]

I managed to track it down and added a comment to #174 (comment)