T
TanStack•3y ago
old-apricot

How to use Vue ref value assigned in a useQuery as the enabled option in another useQuery?

vue script setup includes (psuedo code): 
const var = ref<string>("")
useQuery function that is passed var and assignes value to var.value
useQuery function that is passed var and has enabled option of var.value !== ""
const var = ref<string>("")
useQuery function that is passed var and assignes value to var.value
useQuery function that is passed var and has enabled option of var.value !== ""
The second useQuery function runs without the enabled option, but it runs twice (first time is invalid since var is an empty string). However when I add the enabled option it never runs, even though var value is updated by the first useQuery function
1 Reply
criminal-purple
criminal-purple•3y ago
Hi, you are probably make the classic mistake of unwrapping the value prematurely or computing the value for enabled without reactivity in place. This way enabled will get a value computed just for initial render. You need to use computed, ref or reactive and pass that to enabled without unwrapping. Ex. 
const isEnabled = ref(false)

const onButtonCLick = () => {
  isEnabled.value = true;
}

useQuery({
  enabled: isEnabled
})
const isEnabled = ref(false)

const onButtonCLick = () => {
  isEnabled.value = true;
}

useQuery({
  enabled: isEnabled
})

Did you find this page helpful?