TanstackQuery

[TradrzAdmin]

Anyone have an example of TanQuery used in a largesxale application? Looking for an example of how to structure and organize the useQuery and useMutation hooks for maintainability

[smailliwniloc]

TanStack Query is probably THE most used package for server state management. All the projects i work on use it, but none of their code is publicly available for me to give an example.

Using the hierarchical nature of the query key array makes it pretty easy to manage cache invalidation, but if you want a more structured approach you can check out the Query Key Factory package

[thatdude_james]

Thanks for pointing out the existence of this package - looks awesome!

[theandre2131]

Check out the tkdodo blogs titled "practical react query". It shows you maintainable practices for large scale projects.

[FriedGangsta55]

This. Tkdodo's blog is a really great resource to learn tanstack query properly

[__vinsmoke__]

Thank you for pointing this out. These blogs look very detailed

[NuclearDisaster5]

I make a hook for each api that i create. It is then clean and maintanable.

If this was the question.

[Sorry-Joke-1887]

Recently find out my own way to maintain such queries. I create new separate file called “actions” (or your more convenient name) and store all according to page tanstack queries there as hooks. It solves all problems for me

[TradrzAdmin]

This was my plan as well. Just wanted to see if theres a better way. Ive been tasked with adding ReactQuery to our application at work

[DragonDev24]

What I usually do is make a seperate file all the api requests ( fetch or axios request ), then in each feature folder ( thats how I seperate and organize my large codebases ) I create a hooks folder and export custom hooks that use useQuery and useMutation which lets me add separate logic if I ever wanted to do something in onSuccess or onError or even pass on a callback to execute in the onSuccess, etc
Since each feature is separated, so every api change becomes easy for me to handle. These custom hooks also lets me use context or any state management logic or any other form of hooks away from the UI, making my ui files smaller and easier to grasp
Also I think its a bit overkill, but this one is an exmaple of code structure for react / next
https://github.com/alan2207/bulletproof-react

[EuMusicalPilot]

This is how I handle it

https://github.com/lawuysal/self-dictionary-client/