What's New in React Query 5.0?

React Query 5.0 is finally out after the roadmap was released over a year ago. What's new, what's different, and most importantly, which parts are the most interesting? (Spoiler: for me it's the optimistic updates). You can read the full change notes here:

-- my links

[pedrorodriguez]

Clear and direct to the point. Great work!

[maxtsh]

Amazing new features and simplifications. thanks to their team.

[emmanuelholonou]

Amazing new features. Thanks for the update

[RichDoesTech]

Ooo this was a nice one, thanks Josh!

[dk]

Josh!! You are such an amazing Engineer!

[Flash]

now we just need tRPC to bump their React Query dependency to this. Overall a great update 🎉🙌

[betterbehappythannot]

Great video, Josh! Which app do you use to render out your videos, Adobe PS?

[ViliamKopecky]

Don’t you need to invalidate the ‘todos’ query after mutation?

What happens if refetching query data takes some time… will there be a flash because mutation isPending will be false, but query is still loading and will not show the new todo?

[jayasaikiran]

Hi Josh, if possible make a tutorial on next js 13.5 app directory page-transition in best approach.

[ziadx]

how do you make this mind blowing animations 🤯

[kirillzlobin]

Also cacheTime is renamed to gcTime - Garbadge Collect Time. This is done to avoid confusion, as this time means - Remove the data from the cache after the query was not used for this period of time

[Wonderdude]

Damn I loved the onError callback for one-off things like logging the error, and displaying an error toast message.

I now have to write out a whole useEffect logic just for that, every time 🤦‍♂?

[waadeland]

About the optimistic updates. This new way is not replacing the cache update technique, nor is it intended to. It is merely a different way to handle the simplest and probably most common cases. I also think that it is only simpler in terms of concepts, by avoiding the direct cache manipulation, but at the cost of complexity in the component. I see why they would want to do something like this, but it is also a bit surprising looking at their efforts to simplify other apis and how they are used.

I am also worried that this new approach will lead people astray. By tempting people into a “simpler” approach, only to realize that it has a lot of new challenges (doesn’t scale, data may need manual filtering?) and would then lead to either a refactoring or even more complicated components to work around these limitations.

[gregthomas]

What do you use to animate the code, Josh? (3)

[jayeshpurohit]

Can you please make a Sonaeqube whole setup video for unit testing

[Farhang]

how you show the code like that, what are you using to show the code with animations like that?

[arzievsultan]

Man, please 🙏🙏🙏, tell me how do you do those amazing animations with text in the code?

[Manish___Choudhary]

How did made that code animation? Please make a video on it 👍

[aymanechaaba]

How do we revalidate data when we're fetching on rsc and mutating w react query?

[rhatalos]

Thank's for the update. I still can't overhear you saying "React Quarry" 😅