Best practices for using tanstack query with pinia store

[AnnaYuS]

If we use useQuery inside pinia store to fetch data that is then used inside getters for example, useQuery still sends requests after we leave the page and the data is no longer used.

Is there a good way to prevent this from happening? Maybe there are guidelines on how to use data that is fetched by tanstack query inside pinia store?

Here is a small reproduction https://stackblitz.com/edit/vue3-vite-router-typescript-starter-1pyp7c?file=src%2FcounterStore.ts

when useQuery is used in a component the request wouldn't be refetched like it does when it's used in pinia. For example here i wouldn't expect on the About page that the request is sent:

Screen.Recording.2024-06-17.at.16.32.52.mov

[ikliko]

Hello,

The issue you're encountering with useQuery triggering a fetch when you change pages is likely due to the default behaviour of useQuery in React Query (and its Vue equivalent) which fetches data when the component mounts or gains focus. To prevent this from happening, you can configure useQuery to not refetch on window focus or component mount.

Here's how you can modify your use query configuration:

1. Disable Refetch on Window Focus: Set refetchOnWindowFocus to false.
2. Disable Refetch on Mount: Set refetchOnMount to false.

You will find the code I changed below:

....
  const { data } = useQuery({
    queryKey: ['randomDog'],
    queryFn: fetchDog,
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  })
.....

This configuration will prevent useQuery from refetching the data when the window gains focus or when the component mounts. If you still want the data to refetch under specific conditions, you can selectively enable these options as needed.

Additionally, if you want to control refetching behaviour even more precisely, you can look into other options provided by useQuery, such as refetchOnReconnect and staleTime, depending on your specific requirements.

Solution in Stackblitz and Full Source Code

Resources

• useQuery Documentation

[AnnaYuS]

Thanks for the suggested solution! My goal is to keep the refetching and other benefits that useQuery offers within the component (Home.vue, where the store is used). However setting refetchOnWindowFocus and refetchOnMount to false takes it away everywhere.

I've found that disabling the query in onUnmounted works as i expect, e.g.
in the store:

 const enabled = ref(false)
 const { data } = useQuery({ queryKey: ['randomDog'], queryFn: fetchDog, enabled: computed(() => !!unref(enabled)) })

in Home.vue:

const store = useCounterStore()
store.enabled = true

onUnmounted(() => {
  store.enabled = false
})

I’m uncertain if this is a good pattern and if it might cause issues. Any insights would be appreciated.