My useFetch body is not reactive

[heady mountain]

I have this composable useAPI but when i change the ref and call the execute from useAPI my body doesn't change. I've tried to pass ref, reactive, computed to the body but without success

[hoary creek]

Did you ever resolve this? I was just having the same problem with the query not being reactive, turns out I was passing the ref value instead of the ref. So in your case you probably need to make state reactive instead or create a computed value for body and pass the computed obj instead of the computed.value

[bronze raft]

Indeed. That’s the case here too

[spare roost]

Hi there. I have a similar question. But in my case any change to reactive state triggers network request. You can find a minimal demo here: https://stackblitz.com/edit/github-pzls36?file=app.vue

I can't figure out how to use immediate: false in combination with reactive body. Any tips?

[bronze raft]

@spare roost why not const body = ref({ username: '' })?

[spare roost]

Let me try that! Don't know why 😄 Just because my two cases came to my mind first

[spare roost]

Ok, I tried but got the same result. Please see https://stackblitz.com/edit/github-pzls36-ohf7og?file=app.vue

[bronze raft]

@spare roost in case you want one-offs like submitting a form, you are better of with $fetch 🙂

But indeed, in this case execute/refresh is not the only way to trigger the useFetch call but also reactivity of the body

[spare roost]

I was about to say: "feels like a bug", but look what I have found in docs about watch option for useFetch:

watch: watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using watch: false. Together with immediate: false, this allows for a fully-manual useFetch.

This solves my issue 👍

[bronze raft]

👍

Though I suppose $fetch would still be better

[spare roost]

But in that case I have to handle things like pending/success/error manually 🤷‍♂️. useFetch gives us some nice shortcuts