Nuxt•15mo ago•

9 replies

useFetch doesn't send new query

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

I have this

useFetch

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

selectedTypes

is an array of multiple selected items of a

USelectMenu

USelectMenu

Nuxt UI element and

search

search

storeToRefs

storeToRefs

from Pinia.
If a change

search

search

the new value of it will properly be send to the API, but if I select something else in

selectedTypes

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

selectedTypes

being send properly withe changed value without much overhead?

Nuxt•15mo ago•

9 replies

Ponkhy

useFetch doesn't send new query

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

I have this

useFetch

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

selectedTypes

is an array of multiple selected items of a

USelectMenu

USelectMenu

Nuxt UI element and

search

search

storeToRefs

storeToRefs

from Pinia.
If a change

search

search

the new value of it will properly be send to the API, but if I select something else in

selectedTypes

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

selectedTypes

being send properly withe changed value without much overhead?

useFetch doesn't send new query

Similar Threads

useFetch doesn't send new query

Similar Threads

Similar Threads

Similar Threads