TanStackT
TanStack•3y ago•
1 reply
urgent-maroon

useQuery is rerunning when route query / param change ?

Some of my useQuery composables depend on route query or route param like userId.
I pass the query param to useQuery 
queryKey
 with Vue 3.3 toRef (toRef(() => route.query.userId)).

I wrap like...
function useUser(userId: MaybeRef<string>) {
  return useQuery({
    queryKey: ['user, userId],
    queryFn: async () => { ... },
  })
}

...and use it like
useUser(toRef(() => route.query.userId))


And, when entering the route which has 
userId
 query param, the composable runs correctly with correct 
userId
.
However, when navigate away from that route to another route which doesn't have 
userId
 query param, the query still runs with 
undefined
 
userId
.

I think this is because the Vue watch function used in useBaseQuery is by default flush pre. So, the watch callback reruns before the page component unmounts, and the options passed to query client change, so it is normal that query reruns since query key changed.

So, my question is is this normal behavior ? Right now, I pass 
enabled
 option to every useQuery composable not to rerun the query function when the depending route query params change.

Do you guys (vue-query users) face like this before, how do you handle for this kind of situation ?
OR am I doing something wrong ?

Thank you very much!
Was this page helpful?