useFetch() send multiple requests | Nuxt | Page 1

round oracle Dec 19, 2022, 12:09 PM

#

I am not really sure why this problem occurs. first and foremost, if I have useFetch in my <script setup> it sends roughly 7 requests to my API and returns the latests result. I would like to only send one request.

I also wanted to see what happens when I turn off the API and try to use useFetch, it then sent 15k requests until I gut a heap limit allocation failure.
this is how I use useFetch()

const {data, pending, refresh, error} = await useFetch<TestResult>('http://localhost:3000/test', {
  method: 'POST',
  body: JSON.stringify(body),
  async onRequest(context) {
      console.log("sent a request");
  },
  onResponseError(context) {
  },
});```

I have tried to find threads on this in both forums and docs but can't find anything, so any help is appreaciated. My goal is to just send 1 request and then be able to send another one with the refresh function, however that also does not seem to work. Whenever I use the refresh function only pending gets set to true but no more requests are sent unforutnately. This is by button
```html
    <v-btn :loading="pending" :disabled="pending" @click="refresh"></v-btn>

Thanks in advance!

quick yew Dec 19, 2022, 6:00 PM

#

do you change body? and when you do do the change refire?

#

a quick fix may be to use execute as a manual trigger

#

but i also am not sure if useFetch is meant to be used for this

#

if you are posting like a form or something using $fetch is probably more applicable

useFetch is more of a nice way to do get requests imo instead of posting things

#

see

#

from https://nuxt.com/docs/api/composables/use-fetch

Nuxt

useFetch · Nuxt Composables

This composable provides a convenient wrapper around useAsyncData and $fetch.

round oracle Dec 19, 2022, 8:32 PM

#

@quick yew I’ll make sure to try with $fetch instead. I just find the behavior somewhat weird. GET or POST shouldn’t really matter, the API still returns JSON data.

I’m just confused as to why it wants to send a bunch of requests. There seems to be no reason for that

quick yew Dec 19, 2022, 8:33 PM

#

there is a nice scenario where dependancies as they get updated the request will be re ran which is great for get requests for isntance

#

if your search param changes it will automatically re-fetch for you

#

thats a great DX with small lines of code

#

but doing that for something like forms is awful where you want manual triggers so you need to use execute in useFetch to prevent that from happening and using execute manually to when you want to actually trigger it

round oracle Dec 19, 2022, 9:26 PM

#

Hmm execute… haven’t heard of that. Is there documentation for it?

#useFetch() send multiple requests