Using tanstack query and zustand in the same project
What I need from tanstack query - Refetching stale data, retrying failed mutations, keeping previous data when paginating, a lot of other conveniences.
What I need from zustand - Performant global state management, and store(memoize) computed values that I will need frequently in my app.
I'm building a note taking app with built-in flashcards, so I'm only storing the notes and flashcards in my backend and retrieving them from the user. Then on the client I'm building the folder for the notes, and also grouping the flashcards with the notes. Eventually, I want to make this application offline-first.
How to get the best of both worlds from t-query and zustand?
My initial simple thought was to build a custom hook that fetches the data from query, initializes the zustand store, then whenever the data refetches we re-initialize the zustand store. Then that hook will expose everything from zustand as well as Tanstack query. Also, I can pass in all the options that I want to configure t-query or zustand.
so useAppState() or something like that?
2 Replies
just get the data from react query directly, zustand is for state management, data you queried is not state, you don't need to overcomplicate things. if you mean query the data and then mutate locally because you want it to be fast, i guess that would work, but it sees overengineered, there's a lot cleaner ways to do optimistic updates
Yup I think separating the server state(in query) and client state(as user interaction state) should work and then use useMemo for to calculate derived state(from server state).
I was overcomplicating it, thinking of performance