Using vue query with vue router, generally in .ts file.

[sonnguyenxaion]

Question 1:

In my router.beforeEach there're some API which call many times, so I want to use useQuery to cache those API. But I caught an error that `useQuery's only used in < setup script />.
So how do we deal with this issue?

Question 2:

What is the different between queryClient and useQuery hook? Which and when we use queryClient?
Sorry, I couldn't find any good explanation in docs.

Thank you guys so much for supporting.

[DamianOsipiuk]

Ad1. useQuery is designed to live in a Vue component and is tied to it's lifecycle. There are two ways to approach that.

1. use queryClient directly with methods like queryClient.prefetchQuery to prefetch some data before you navigate to a route
2. Export your queryClient instance from esm module and pass it as a prop to useQuery and VueQueryPlugin. This will allow you to run useQuery composables outside of setup function as an escape hatch.

It would reccoment no 1. Since it would not create any additional resources (observers) that could cause memory leaks.

Ad2.
useQuery is a reactive composable that registers observable listeners and generally lives inside a component lifecycle.

queryClient is an underling class that is actually used inside useQuery. Therefore it should be used whenever you are interacting with QueryCache outside of Vue component if needed.