Nuxt•3mo ago

useFetch refresh failing to recognise new query params

I have a simple page with this useFetch code at the start:

const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query.value
  }
});

watch(() => route.query.q, async () => {
  await refreshNuxtData();
  await refresh();
});

const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query.value
  }
});

watch(() => route.query.q, async () => {
  await refreshNuxtData();
  await refresh();
});

However refresh() won't use the new route query param. If I put {{ route.query.q }} in the page it shows the new query param but refreshing through the watch OR a button with refresh() manually shows the API as recieving the old query param What's happening???

3 Replies

harlan•3mo ago

const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query
  }
});

const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query
  }
});

pass the ref not the value should be supported afaik

maroo•3mo ago

const route = useRoute()
const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query
  },
  key: route.fullPath
});

const route = useRoute()
const { data, refresh } = await useFetch(`/api/images`, {
  query: {
    q: query
  },
  key: route.fullPath
});

add key to prevent the response being cached. You'll also need to add page meta.

definePageMeta({
  key: (route) => route.fullPath
})

definePageMeta({
  key: (route) => route.fullPath
})

manniL•3mo ago

This! Also linking https://youtu.be/sccsXulqMX8 for more context

Alexander Lichter

YouTube

Avoid losing Reactivity in your Vue Application

🔄 Reactivity is a crucial and and concept when building any kind of Vue application. But especially with the Composition API, I see more and more people having trouble with Reactivity and ensure that the "reactivity chain" will be kept up throughout various composables and components. In this video, I want to highlight typical issues with ref's ...

Gaming

Programming

useFetch refresh failing to recognise new query params