Async Zustand Playing Nice With React-Query

Let's figure out how to do async work in a Zustand store, and how to connect it to React-Query if that's something you want to do.

#shorts

[ofadiman]

So the hardest thing about tzshustand is correct library name pronunciation 🤔

[thepetesmith]

Zustand was the best move I made. The fact that it can be used outside React is invaluable

[MrPlaiedes]

Jack just wanted to make a video so he could say Zustand.

[PinheiroJaime]

thanks for pronouncing "zustand" properly!
Zustand is getting more and more popular, as react-query.
I think a video demonstrating how to integrate zustand and react-query with queries and mutations, query invalidation etc would be awesome.

[Chrosam]

I love Zustand! I'm using it for a project at work and it just makes life easier!

Understanding how to make my code testable took some time, but I made it work.

[DreamTeam-ywbg]

hey, you don’t have to write it to the store, react query caches itself and can be retrieved at any time.

[MohamedElguarir]

the onSuccess callback will be removed in the next version of react-query sadly ):

[docmars]

Don't forget React Query has built-in query data selectors so you can make short work of derived/transformed data if you need quick access to fetched data separately. This helps you avoid the need for a global store like Zustand purely for referencing fetched data, and your query hooks + selectors can be abstracted into their own hooks for use in component trees, again without the need for a store.

I do understand that this example is for a slightly different use case though. In most cases with RQ, you may not need a store.

[aritark]

excellent pronounciation on the german Z

[RadeneIdo-ytpr]

🎉 Exactly, what I have searched for a long time

[vendjin]

cool video, I would like to see more examples with async Zustand and ReactQuery, perhaps a mini-project with typical CRUD operations in some new video

[madeinbalcony]

hopefully you can make a video of them together on a simple application. saw a lot of comments and vids that they are great combination but i think they are not existed in youtube rn.

[kris_fps]

Use query onSuccess callback will be removed in v5

[kezevraanwar]

Would we not be storing 2 copies of the data doing this? Also if I say updated a list of todos and on the post request I get back the new list of todos how would I do this with this zustand / react query setup ? Thanks

[gnanavelpandian]

SetData probably should not be called in onSuccess

[joseandkris]

I understand, but why would someone combine 2 state managers?

[ManishGupta-nvby]

How about redux toolkit with react query? 😅

[robinphilipthomas]

Now that onSuccess is deprecated, would you use a useEffect to setData?

[vasyaqwe]

the only thing that's hard about it is the pronunciation haha

[venicebeachsurfer]

Great content. I know you are showing "concepts", but would there ever be a reason to set the client state (zustand) from the server state (when its already being stored)? Just curious "use cases". Thanks!