blog/practical-react-query

[utterances-bot]

Practical React Query | TkDodo's blog

Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...

https://tkdodo.eu/blog/practical-react-query

[tannerlinsley]

Fantastic!!!

[johnnyreilly]

This is a tremendous write up! Thanks!

[johnnyghost]

Good stuff!
Thanks 💪

[hrafnkellpalsson]

Great post! Hadn't considered using the enabled option for anything else then dependent queries, very neat!

[d-ivashchuk]

Great write up 🔥

[frycz]

Thanks TkDodo!

[GrooyaO]

Thank you. Super clear! 💡

[AjaxSolutions]

Good writeup. I wasn't clear before on what is the difference between isFetching and isLoading.

[DevAbas]

Thanks! Super ❤️👌

[willnguyen1312]

Love the way you explain things, couldn't be better ❤️

[anoopvasudevan]

This! Great article. Clarified a lot of confusions.

[ArianHamdi]

Thanks tkdodo for this amazing article.
for a server state that can be editable by user, can I setState in onSuccess ?
in this way we are not forced to wait for data and pass it as initial state to the component.

[TkDodo]

for a server state that can be editable by user, can I setState in onSuccess ?

you can, but be aware that onSuccess is called for every successful background refetch as well, thus calling setState. I would still stick to a clear separation as outlined here: https://tkdodo.eu/blog/practical-react-query#keep-server-and-client-state-separate

[qkangusc]

This is exactly what I am looking for. Thank you tkdodo!

I wrapped useQuery inside custom hook and use it in many places in my code. One thing I noticed is that I log the success event in onSucess handler, so every time the fetch succeed, all the observers call onSuccess and the success event is log multiple times. Is there a way to only send the log once?

[TkDodo]

Is there a way to only send the log once?

we have on open PR to add a global onSuccess handler to the queryCache. Feel free to try it out and provide feedback:
TanStack/query#2404