Nuxt•4w ago

useFetch doesn't send new query

Hello, unfortunately I couldn't really find a simple answer to my problem. I have this useFetch:

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  watch: false,
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
})

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  watch: false,
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
})

selectedTypes is an array of multiple selected items of a USelectMenu Nuxt UI element and search a storeToRefs from Pinia. If a change search the new value of it will properly be send to the API, but if I select something else in selectedTypes it will always use the first value and not the updated one. I'm also watching both values and refresh them like this:

watch(
  [search, selectedTypes],
  useDebounceFn(() => {
    refresh()
  }, 300),
)

watch(
  [search, selectedTypes],
  useDebounceFn(() => {
    refresh()
  }, 300),
)

How can I active selectedTypes being send properly withe changed value without much overhead?

5 Replies

kapa.ai•4w ago

Hi @Ponkhy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help you with your issue regarding useFetch in Nuxt 3. The problem you're experiencing is related to how reactive values are handled in the query option of useFetch. The key point to understand is that when you specify reactive parameters in the query option, useFetch will automatically watch these values and trigger a new request when they change. This behavior is similar to using the watch option explicitly Docs > Getting-started > Data fetching > Watch (https://nuxt.com/docs/getting-started/data-fetching#watch). However, in your case, it seems that the selectedTypes.value.map(type => type.id) is not being properly recognized as a reactive value. To solve this, you can try the following approaches: 1. Use a computed property:

const selectedTypeIds = computed(() => selectedTypes.value.map(type => type.id))

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  query: { search: search, types: selectedTypeIds },
})

const selectedTypeIds = computed(() => selectedTypes.value.map(type => type.id))

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  query: { search: search, types: selectedTypeIds },
})

2. Use the watch option explicitly:

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
  watch: [search, selectedTypes]
})

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
  watch: [search, selectedTypes]
})

By using one of these approaches, you should be able to ensure that changes in both search and selectedTypes trigger a new request to the API. Additionally, it's worth noting that your current implementation using watch and useDebounceFn might not be necessary if you use the built-in reactivity of useFetch. The useFetch composable is designed to handle these updates automatically Docs > Api > Composables > useFetch (https://nuxt.com/docs/api/composables/use-fetch). If you still encounter issues, you might want to consider using a computed URL (https://nuxt.com/docs/getting-started/data-fetching#computed-url) approach, which can provide more control over when and how the URL and query parameters are constructed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

PonkhyOP•4w ago

Well this helped const selectedTypeIds = computed(() => selectedTypes.value.map(type => type.id)). Can someone explain me why that's the case?

Cue•4w ago

Because you went from static values to reactive values through computed. Either pass reactive data to the query, or pass selectedTypeIds to watch that will re-trigger the fetch on change. By doing selectedTypes.value inside query, you’ve instantly lost reactivity.

PonkhyOP•4w ago

Thank you, I'll keep that in mind!

Gaming

Programming

useFetch doesn't send new query