How to prevent useFetch from refreshing data on navigation

[meirroth]

Hi fellow Nuxters!
How can I prevent useFetch from calling the data again on route change?
I tried, but didn't help:

1. Setting key to something static
2. Setting watch: false
3. Setting experimental sharedPrerenderData: true
4. Setting keepalive in definePageMeta
5. Using getCachedData works but it looses the auto refresh on query updates

  getCachedData(key) {
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
  },

Minimal reproduction: https://stackblitz.com/edit/nuxt-starter-x7dw8g?file=components%2FJoke.vue

[cmgdragon]

What do you mean with

5. Using getCachedData works but it looses the auto refresh on query updates

which query updates? can you explain what are you trying to archieve?

[meirroth]

Here's a working implementation with getCachedData https://stackblitz.com/edit/nuxt-starter-93hd3j?file=pages%2F%5Bslug%5D.vue
Notice how I had to manually refresh data on dir update. I'm looking for a cleaner implementation, one that can keep the useFetch functionality of watching reactive sources.

[cmgdragon]

ok, I see,

maybe making the query object reactive could work

const query = reactive({ dir: true })

const { data } = await useFetch('https://icanhazdadjoke.com', {
  headers: { Accept: 'application/json' },
  query,
  getCachedData(key) {
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
  },
})

function toggleDir() {
  query.dir = !query.dir
}

[meirroth]

@cmgdragon Thank you so much for taking the time to help me out here, I really appropriate it!

Your solution works! Using getCachedData doesn't disable the functionality of watching reactive sources like I thought, I was just not passing something reactive in the minimal repro, while in prod I was passing locale from useI18n without noticing it was a computed ref 😅

const { locale } = useI18n()
const query = { lang: locale }

const { data: guides } = await useFetch<Guide[]>('/guide', { query, getCachedData })

function getCachedData(key: string) {
  return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
}