T
TanStack•3y ago
fair-rose

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 () => { ... },
  })
}
function useUser(userId: MaybeRef<string>) {
  return useQuery({
    queryKey: ['user, userId],
    queryFn: async () => { ... },
  })
}
...and use it like 
useUser(toRef(() => route.query.userId))
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!
1 Reply
fair-rose
fair-roseOP•3y ago
Anyone faced like this before ? Thanks!

Did you find this page helpful?