e2e guide of introducing vue-query to the vue application

[Oleksii14]

Hi! I am very interested in vue-query library and I am thinking of completely (or at least partially) migrating from pinia. There are some points I have concerns about and which block me in terms of understanding the philosophy from the technical perspective:

1. Where can I find real-project examples of using vue-query (examples from the docs are too easy to understand all the cases)? For example, using the same query in many nested components, how to structure the queries with the API calls etc.
2. Deep unit testing examples using jest or vitest. Such test cases are important: mocking (or using real instances?) the queries in the components, all possible and popular cases that happen during usual front-end development
3. I didn't find the real code examples with TypeScript. Are there any examples, best practices, etc?

I will appreciate the answer! Thanks 👍🏻

[DamianOsipiuk]

If you are not scared of the word react 😉, i could recommend TkDodo's blog. He has a series of articles explaining react-query topics including the ones you are interested in.
Of course examples on that blog and some references are react-specific, but the whole concept stays the same. It's easily translatable to Vue world.
Under the hood vue-query uses the same query-core library as react-query. The only difference between the libraries is the hooks layer due to how Vue reactivity system works. But usage stays the same 99% of the time.

For example, using the same query in many nested components

Usually you do not have to think about it (except some complex cases). Just use useQuery in any component you need the data in. vue-query will handle request de-duplication and data sharing between the components automatically for you.
You might consider extracting queries for the same resource into a separate hook: https://vue-query.vercel.app/#/guides/best-practices

mocking (or using real instances?) the queries in the components

https://tanstack.com/query/v4/docs/guides/testing#set-cachetime-to-infinity-with-jest
https://tkdodo.eu/blog/testing-react-query
In short:

• mock your API calls unless you are doing e2e tests
• turn off retries
• set cacheTime to infinity if you are getting weird errors

I didn't find the real code examples with TypeScript. Are there any examples, best practices, etc

All examples are written with typescript. You don't see too much typescript in there cause it just works ™️
More resources: https://tkdodo.eu/blog/react-query-and-type-script
For most cases properly typing return of fetch/axios should be enough

[Oleksii14]

Thank you so much!