What's New in React Query 5.0?
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
![[4K] BABYMONSTER(베이비몬스터) “FOREVER” Band LIVE Concert “영원히” 베몬만을 사랑하게 되…💗 [it’s KPOP LIVE 잇츠라이브]](http://i.ytimg.com/vi/TQfC0xdpiw4/mqdefault.jpg)
Clear and direct to the point. Great work!
Amazing new features and simplifications. thanks to their team.
Amazing new features. Thanks for the update
now we just need tRPC to bump their React Query dependency to this. Overall a great update 🎉🙌
will happen in v11. You can already try it out with the `@next` tag
tRPC works only in ts ecosystem, right?
@@skelawIt’s a TS library but everything TS works in JS so yeah TS and JS
Ooo this was a nice one, thanks Josh!
thanks dude, looks good the v5 !
Great content, thanks ❤
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
Simply beautiful
Josh!! You are such an amazing Engineer!
Great video, Josh! Which app do you use to render out your videos, Adobe PS?
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.
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 🤦♂?
Same thoughts…Why did they do it
how about the onsuccess? goddamn i need to modify my whole code base
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?
RQ Devtools v5 is 🚀🔥
Great video ma man!
how do you make this mind blowing animations 🤯
how you show the code like that, what are you using to show the code with animations like that?
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 😂
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.
all hail the master 🙃
And how you deal with it? Through useEffect or in another way?
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?
@@vty4261 conditional rendering, deriving, there are a bunch of ways
Nice!
Congratulations for 69k josh 🎉
How do we revalidate data when we're fetching on rsc and mutating w react query?
Waiting for trpc to adopt it
Hi Josh, if possible make a tutorial on next js 13.5 app directory page-transition in best approach.
Man, please 🙏🙏🙏, tell me how do you do those amazing animations with text in the code?
What do you use to animate the code, Josh? (3)
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.
Probably PowerPoint or keynote
keynote 👍
He used Excel😃
@@joshtriedcodinghave u looked at remotion
Thank's for the update. I still can't overhear you saying "React Quarry" 😅
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.
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.
@@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)
you can just pass pending as prop to component that user edited and handle pending state in child component itself
still easier than before
There is a better way, its called using SWR. Single line optimistic updates inside of the same hook or modifying the cache itself globally.
How did made that code animation? Please make a video on it 👍
He used Keynote 🙏🏽
How do you make these animated code slides? With what tool? Thanks
Keynote
Can you please make a Sonaeqube whole setup video for unit testing
Cool vid
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.
Does this work with Next 13 app router RSC?
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).
A very nice POV. I expect he answers this.
Would like to see how would app react if he spammed that button multiple times within that second
maybe you'll make another video on how to create such cool animations in Keynote🙏🏻
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.
So basically, basic structure changes
"Alright you read the title I'm not going to repeat it" took longer than if you just repeated the title 😂
which I refuse to do!
So all but the last feature was playing catch up to RTK-Query
Hey mahnnn🎉
SWR has all the functionality react query offers with way simpler API, for most react projects SWR would be the best choice.
No
@@kevinc4736 Care to elaborate? SWR offers a simpler API and is an order of magnitude more customisable.
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!
marketing and execution
never tried SWR actually, thanks for commenting! Sounds like it would be worth giving a shot for a future project
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
im using RQ just because the devtools, which quite frankly beats SWR by miles.
@@ahmedjaber8595 yes, the devtools is great also!
and trpc also wraps react-query, so there's that too
React query 5? Whattttttttttttttttt
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...
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.
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.
isPending is a breaking change for those who uses isLoading ... why...
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.
Why they got rid of onError? :
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.
Bro, Web Dev Simplified attacking you 😅
Update your plugins!
snappify?
I will never not use RQ
{2024-04-29}, {2024-06-03}
First🎉
who cares about typescript in tutorials...