What's New in React Query 5.0?

Рет қаралды 55,504

Күн бұрын

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:
tanstack.com/blog/announcing-...
-- my links
Discord: / discord
GitHub: github.com/joschan21

Пікірлер: 96

@pedrorodriguez2683 8 ай бұрын

Clear and direct to the point. Great work!

@maxtsh 8 ай бұрын

Amazing new features and simplifications. thanks to their team.

@emmanuelholonou6601 7 ай бұрын

Amazing new features. Thanks for the update

@Flash136 8 ай бұрын

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

@TkDodo 8 ай бұрын

will happen in v11. You can already try it out with the `@next` tag

@skelaw 7 ай бұрын

tRPC works only in ts ecosystem, right?

@rico454 7 ай бұрын

@@skelawIt’s a TS library but everything TS works in JS so yeah TS and JS

@RichDoesTech 8 ай бұрын

Ooo this was a nice one, thanks Josh!

@dk2976 2 күн бұрын

Josh!! You are such an amazing Engineer!

@kevinat71 8 ай бұрын

thanks dude, looks good the v5 !

@mendylanda125 8 ай бұрын

Great content, thanks ❤

@betterbehappythannot3605 8 ай бұрын

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

@TheIpicon 8 ай бұрын

Great video ma man!

@youssefhossam9077 8 ай бұрын

Simply beautiful

@kirillzlobin7135 3 ай бұрын

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

@ViliamKopecky 8 ай бұрын

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?

@ahmedjaber8595 8 ай бұрын

RQ Devtools v5 is 🚀🔥

@souviksaha5416 8 ай бұрын

Congratulations for 69k josh 🎉

@Wonderdude63 8 ай бұрын

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 🤦‍♂?

@vty4261 8 ай бұрын

Same thoughts…Why did they do it

@Iza90bela Ай бұрын

how about the onsuccess? goddamn i need to modify my whole code base

@waadeland 8 ай бұрын

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.

@jayasaikiran1761 8 ай бұрын

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

@ziadx3 8 ай бұрын

how do you make this mind blowing animations 🤯

@Farhang104 8 ай бұрын

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

@arzievsultan 7 ай бұрын

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

@jayeshpurohit874 7 ай бұрын

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

@cristiang4774 7 ай бұрын

Cool vid

@skelaw 7 ай бұрын

Nice!

@gregthomas5887 8 ай бұрын

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

@voidfnc 8 ай бұрын

Not too sure but I believe Josh uses snappify. I use it as well and it has more or less the same results, so I'm guessing that's what Josh is using. edit: im wrong, no he does not use snappify. But snappify by default animates code transitions as well if you're trying to achieve that without keynote.

@gradientO 8 ай бұрын

Probably PowerPoint or keynote

@joshtriedcoding 8 ай бұрын

keynote 👍

@JoseWaldier 8 ай бұрын

He used Excel😃

@succatash 8 ай бұрын

@@joshtriedcodinghave u looked at remotion

@SonAyoD 7 ай бұрын

Waiting for trpc to adopt it

@Hexalyse 8 ай бұрын

You said everybody used to use the onError callback for error management. I personally never used it. I learned react-query more than a year ago via their "official" video course, and I've always used the error property from the returned object. It seems like it's more in line with modern react practices.

@mrlectus 8 ай бұрын

all hail the master 🙃

@vty4261 8 ай бұрын

And how you deal with it? Through useEffect or in another way?

@AnsisPlepis 8 ай бұрын

I always really liked onError, since I could have everything related to the query inside the hook call + its declarative. Another thing that worries me, and maybe someone can explain, is how global error handling would work in v5? Until now I've attached an onError callback to the query client, how would that work now?

@rafaelarantes4804 7 ай бұрын

@@vty4261 conditional rendering, deriving, there are a bunch of ways

@rhatalos1997 8 ай бұрын

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

@committedcoder3352 8 ай бұрын

I never really took the time to figure out how the onError worked. It didn’t behave the way I wanted it to. I’d make API queries and they’d give a non 2XX status and still do the onSuccess so I usually wrote a wrapper for the useQuery that would do onSettled and check the status code. Looking around in the comments and based on the deprecation it seems I was approaching it completely wrong anyway 😂

@Manish___Choudhary 8 ай бұрын

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

@J3R3MI6 8 ай бұрын

He used Keynote 🙏🏽

@theangelofspace155 8 ай бұрын

14:00 I always wondering how all this tutorials test those "nice feacture", I keep seen tutorials on how to build xyz using next.js, but the testing part of the aplication is never included. A really important aspect since teating is way more complicated than building. @josh, how will you go about testing this optimistic update using reast testing library, and let say MSW (you can use jest mock if you prefer it).

@paddygozie7337 8 ай бұрын

A very nice POV. I expect he answers this.

@arshadyaseen4328 8 ай бұрын

Hey mahnnn🎉

@Channelcustomization832 8 ай бұрын

How do you make these animated code slides? With what tool? Thanks

@jakubgrygiel1947 8 ай бұрын

Keynote

@user-hb6yb6bu8n 7 ай бұрын

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

@helleye311 8 ай бұрын

The new optimistic update is cool, but I'm not that convinced. I mean sure, it's fantastic for adding new items to a long list. But it would be a bit of a pain to do any sort of edit mutation with it (ex. checkboxes). That's what I mainly use optimistic updates for. I guess you could match by id and use the new value instead of old value in the jsx, but it's moving the complexity of the mutaion mapping functions into JSX. But I guess there isn't really a better way to do that, nor can there be I don't believe.

@TkDodo 8 ай бұрын

it's worth noticing that the "old way" of writing to the cache still works, so you're not forced to do optimistic updates like that. every optimistic update has the drawback that you need to do the logic you usually do on the server on the client as well. For example, adding an item works in this simple scenario, because we merely append it. But if the list is sorted by something else, you might have to insert at the correct position instead. In the "old way", you had to do this when writing to the cache. In the "new way", you do it in the UI. Both ways have their ups and downs. I'd mix and match depending on the exact scenario.

@helleye311 8 ай бұрын

@@TkDodo did not expect to see you here. Big fan. Thanks for the reply! That's basically what I expected. Most of the things I write are sorted or paginated in some way, so I'll probably be sticking to updating the cache. Upside of that is, you get optimistic update everywhere the query is used too (I usually have my keys set up in a way to have all "list" queries share the beginning part, and use setQueriesData and then filter by item id. It's a bit more work for the client, but works nice if the changes are reflected in more than one place)

@shahaboveici2073 8 ай бұрын

you can just pass pending as prop to component that user edited and handle pending state in child component itself still easier than before

@philheathslegalteam 8 ай бұрын

There is a better way, its called using SWR. Single line optimistic updates inside of the same hook or modifying the cache itself globally.

@matthewbeardsley7004 8 ай бұрын

How do people do optimistic updates in more complex examples, let's say you are creating a resource, so you call an API, which on the server, calls a few other things, computes some stuff and then returns to the client...would you just use the values that were submitted and then some mock kinda data created locally and show that in the UI...I suppose I usually just put in a loading skeleton where the isPending would be.

@jakubkurdziel2407 8 ай бұрын

maybe you'll make another video on how to create such cool animations in Keynote🙏🏻

@Gyurmatag 8 ай бұрын

Does this work with Next 13 app router RSC?

@tosheen20 8 ай бұрын

How is this example working? You are pushing directly to todos array. Shouldnt react query freeze that object when its used within useQuery call? Also after mutation query should be either invalidated or new todo could be inserted via setQueryData. Mutating the data directly shouldnt be possible.

@Sinke_100 7 ай бұрын

Would like to see how would app react if he spammed that button multiple times within that second

@kangalio 8 ай бұрын

"Alright you read the title I'm not going to repeat it" took longer than if you just repeated the title 😂

@joshtriedcoding 8 ай бұрын

which I refuse to do!

@i4h2x3 8 ай бұрын

So basically, basic structure changes

@zheil9152 8 ай бұрын

So all but the last feature was playing catch up to RTK-Query

@avivshvitzky2459 8 ай бұрын

React query 5? Whattttttttttttttttt

@ghassanclassic7689 8 ай бұрын

Bro, Web Dev Simplified attacking you 😅

@RishiKasyap 8 ай бұрын

SWR has all the functionality react query offers with way simpler API, for most react projects SWR would be the best choice.

@kevinc4736 8 ай бұрын

@philheathslegalteam 8 ай бұрын

@@kevinc4736 Care to elaborate? SWR offers a simpler API and is an order of magnitude more customisable.

@belkocik 8 ай бұрын

Why they got rid of onError? :

@KevinVandyTech 8 ай бұрын

because it was an anti-pattern that caused bugs. The maintainer has a great article about why they removed it from useQuery. It still exists on useMutation though.

@ameykhandar889 8 ай бұрын

Hey Josh, Only few people use Yarn on utube, & I started following u bcoz I like ur teaching,could u plz create complete Yarn tutorial. please man I m desperately looking for this one...

@YangRicardo 8 ай бұрын

isPending is a breaking change for those who uses isLoading ... why...

@TkDodo 7 ай бұрын

you can mostly still use isLoading because it still exists - its just a derived flag that includes a fetching check. we made this change because it was unintuitive to many that isLoading was true when a query was disabled. Now, it will be false in those cases.

@venicebeachsurfer 8 ай бұрын

Would be nice if you gave us "real world" usages of these new features. Showing the useMutationState for the pending todos is not useful. Can you tell us when that would be useful to know a pending state? Also, does it display other mutation state? Is it ALL mutations that happen? If so, that could be useful.

@TkDodo 8 ай бұрын

Yes, it's all mutations that are in the cache. You can filter them down by key if you want, or only to mutations that have failed. You can not only use it to get access to the variables, but also to get access to the response of the mutation if you want.

@philheathslegalteam 8 ай бұрын

I find it so interesting that RQ is more popular than SWR. SWR has had these features for years and come with a simpler API, at the same time as offering an extremely powerful middleware api which quite frankly beats RQ by miles. Good to see the library catch up though!

@Sage447 8 ай бұрын

marketing and execution

@joshtriedcoding 8 ай бұрын

never tried SWR actually, thanks for commenting! Sounds like it would be worth giving a shot for a future project

@anyadatzaklatszjutub 8 ай бұрын

because swr didn't have mutations for ages... it came out with v2 I actually had to check the docs, and now that they do have it, maybe it's worth checking out

@ahmedjaber8595 8 ай бұрын

im using RQ just because the devtools, which quite frankly beats SWR by miles.

@anyadatzaklatszjutub 8 ай бұрын

@@ahmedjaber8595 yes, the devtools is great also! and trpc also wraps react-query, so there's that too