Hmm, for me as a developer is a fun way to see info faster and to avoid skeletons. However, every time it happens to me as a user I feel more frustrated than in a case of a regular error. Likes case is only legit because it's insignificant enough for me to forget about an action before request gets fulfilled.
josh i really like your contents man. keep up dude. you are leveling up my skills constantly with you engaging and interesting contents . big respect dude
Finally got the React Query experience thanks to RakkasJS which currently has a more simpler implementation currently but will soonish ship React Query 5 🎉 which will kinda marry RQ & tRPC 🔥
Seems like a ton of work per data-fetching/mutating component. Maybe you can extract some of that behavior so it's easier to re-use across components - specifying only the things like "here's the data I want to fetch, and here's the type of mutation I'll be doing"
Abstractions like that can lead to technical debt. You could write your own hooks, one per unique request to encapsulate the logic, and import them into your components, but most likely the success and error handling will be unique to each use, so you'll need to pass those functions to the hook as well as any path parameters. At that point, is it worth the bother?
U can use prefetch on routes level with loaders (u need the cache function from react 18 experimental in nextjs) or with RQ query prefetch function... in v5 of RQ u can use suspense queries to eliminate unecessary rerenders
Video was helpful, but I tried with this query and Next.js (pages router) to get my inbox messages it gives a flash I don't know why. Does query does not support fully Next.js? and yes I did the same steps as you did in query (in mutation).
is there a way to do this in server components. I use sever components to fetch the data on initial load and when a user submits a form i use revalidathPath to get the new data. is there a way to add loading state to that?
I remember I did something like that in some of my previous projects. I add in the query data cache, the new post, with "mocked" id and createdAt since they should've come from backend. Then on the onSuccess callback, I get the new post info, and change the mocked post properties with the backend ones. May not cover up all the cases, but was a valid approach back then
Would you always use optimistic updates instead of loaders? I mean, where is the limit if there is one? Also, is there a way to do this without react query (with server actions)? Because I feel it's the future, so react query kind of overlaps but I might be wrong
With some things, a loader is fine, such as updating a profile or some other action that's expected to take time. With more real-time stuff like chats, comments and the like, optimistic updates are the way to go for UX. In fact, loading is preferable in a lot of places because lay people may think an optimistic update on something utilitarian like submitting a form means something isn't working and may try again. Loaders are a fundamental aspect of UX, but the absence of one is also - depending on the context. It's an art to be sure.
RQ doing much than that... Eliminates the need for second store, or decoupling the server store data from the client side one redux/zustand... even it's client side library u can optmise the queries to kind of redux selectors so RQ observers will listen to partial cached data, and optimize refetching... in v5 u have suspense queries, which prevents some unecessary rerenders at components mount or even u can make mix with react router where u can prefetch some much needed data when some route is executed, so components are free from fetching logic and u can work with cache from RQ store... There's other good benefits from using RQ, even u can create hybrid model in SSR frontend frameworks...
Another way i use sometimes, i store the data inside jotai store so ill use the react states to update it very easily from anywhere when mutating any data
what is the best way to use react state Management and react query with next 13 and server component, could you share a video with the best implementation or starter?🙂
But it won't get latest like count . Every click success or error should update latest like count from DB because other user will like the post anytime .
Great video Josh 😀. Please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube. Thanks 😀
The optmisic update, it's a bit problematic and u need to know what u are doing... In case of RQ optimistic update, react doesn't rerender, which can be problematic many times....
If your recommended way of handling one of the most common aspects of your application involves doing something like awaiting a call to cancelQueries to prevent your framework from doing what it wants to do, you know you're doing something very wrong. Couldn't think of a worse way of doing this. There are even more problems in this video: resetting the likes to the previous likes likely violates your business logic. Just because some error was returned at some point in your request doesn't mean that the likes are equal to what they were before you clicked "like". In this specific example of a like counter, someone else could be hitting "like" and it could increment for that reason. In other examples, an error might occur handling the connection but the like you submitted very well could have gone through already. Assuming that the application remains in the previous state on an error is almost never correct business logic.
If you are going to give criticism actually read up on the docs. No he is not doing something wrong, it’s literally in the docs. Assuming an error means your mutation didn’t happen is also not as crazy as you make it seem as in most cases an error should mean that nothing has happened. Even if something did happen differently on the backend than assumed on the frontend, that problem gets handled by invalidating the data when the mutation settles.
after seeing this i don't recommend optimistic method it's very tricky 😂 it make a very simple code to hell, the bests practices are based on simplicity
Nice video. It seems to me like doing it yourself is just as simple as using a library (I do it myself in jQuery and Solidjs). I don't see much value in react query at all
I feel like this is too complex devs and sometime frustrating for user. The only legit use cases for optimistic update is like/comment. for small use cases, simple react state is much easier/cleaner than mutate stuff.
Love your videos and consistent work ethic Josh.
Amazing content. Wishing you the best!
Literally perfect timing! Was just dealing with this issue for a checkbox that takes waaaay to long to update. Excellent content!
Love it. Always great to get a real take on a the experimental API instead of people just demoing the docs.
Hmm, for me as a developer is a fun way to see info faster and to avoid skeletons. However, every time it happens to me as a user I feel more frustrated than in a case of a regular error. Likes case is only legit because it's insignificant enough for me to forget about an action before request gets fulfilled.
josh i really like your contents man. keep up dude. you are leveling up my skills constantly with you engaging and interesting contents . big respect dude
that is why im planning to use react query because of its optimistic updates. thanks josh for giving an idea on how to properly do it
appreciate you dude
Finally got the React Query experience thanks to RakkasJS which currently has a more simpler implementation currently but will soonish ship React Query 5 🎉 which will kinda marry RQ & tRPC 🔥
Absolutely amazing video. Fast paced, but clear and understandable. Keep up the good work ❤
Man just loved your content. I don't know how you know what I was looking for.
Implemented Optimistic updates using React Query just last week. Pretty awesome.
what do you use to animate the code examples?
Actually, both PowerPoint and Apple Keynote can achieve this effect. Snappify is also a great choice!
Seems like a ton of work per data-fetching/mutating component. Maybe you can extract some of that behavior so it's easier to re-use across components - specifying only the things like "here's the data I want to fetch, and here's the type of mutation I'll be doing"
Abstractions like that can lead to technical debt. You could write your own hooks, one per unique request to encapsulate the logic, and import them into your components, but most likely the success and error handling will be unique to each use, so you'll need to pass those functions to the hook as well as any path parameters. At that point, is it worth the bother?
U can use prefetch on routes level with loaders (u need the cache function from react 18 experimental in nextjs) or with RQ query prefetch function... in v5 of RQ u can use suspense queries to eliminate unecessary rerenders
Thank you, I'll give it a try on my current project.
and dude, u forgot to add the typescript video at the end of the video :D
cheers man!
Hi! nice video! Is there something special you use to show the code in vs code? or do you just go through pressing ctrl+shit+z?
Video was helpful, but I tried with this query and Next.js (pages router) to get my inbox messages it gives a flash I don't know why. Does query does not support fully Next.js? and yes I did the same steps as you did in query (in mutation).
Thanks Josh, appreciate the video!
is there a way to do this in server components. I use sever components to fetch the data on initial load and when a user submits a form i use revalidathPath to get the new data. is there a way to add loading state to that?
Love this 😍 how do you make the smooth code addition animations? 👀
I remember I did something like that in some of my previous projects.
I add in the query data cache, the new post, with "mocked" id and createdAt since they should've come from backend.
Then on the onSuccess callback, I get the new post info, and change the mocked post properties with the backend ones.
May not cover up all the cases, but was a valid approach back then
Josh loves React Query and we love josh we love React Query
it's a neat trick for making the ux better,
but if there's a connection problem or user immediately close the browser it would cause a problem
Would you always use optimistic updates instead of loaders? I mean, where is the limit if there is one?
Also, is there a way to do this without react query (with server actions)? Because I feel it's the future, so react query kind of overlaps but I might be wrong
With some things, a loader is fine, such as updating a profile or some other action that's expected to take time. With more real-time stuff like chats, comments and the like, optimistic updates are the way to go for UX. In fact, loading is preferable in a lot of places because lay people may think an optimistic update on something utilitarian like submitting a form means something isn't working and may try again. Loaders are a fundamental aspect of UX, but the absence of one is also - depending on the context. It's an art to be sure.
RQ doing much than that... Eliminates the need for second store, or decoupling the server store data from the client side one redux/zustand... even it's client side library u can optmise the queries to kind of redux selectors so RQ observers will listen to partial cached data, and optimize refetching... in v5 u have suspense queries, which prevents some unecessary rerenders at components mount or even u can make mix with react router where u can prefetch some much needed data when some route is executed, so components are free from fetching logic and u can work with cache from RQ store... There's other good benefits from using RQ, even u can create hybrid model in SSR frontend frameworks...
This was awesome loved it ❤.
How do you do the animation of the code snippets?
Another way i use sometimes, i store the data inside jotai store so ill use the react states to update it very easily from anywhere when mutating any data
Very useful! Thanks
You've made my day bro
@Josh please make long projects video again like a before saas app. 😊
You are great man!
Good one! Josh
thanks mohit, appreciate ya man
what is the best way to use react state Management and react query with next 13 and server component, could you share a video with the best implementation or starter?🙂
I love your content Josh, very unfortunate I am very bad at English I have to spend 20min on a 10min video
what do you use to animate the code examples? (2)
he used keynote i guess - th-cam.com/video/-Nm1fdreXao/w-d-xo.html
Please Please Pretty Please, add chapters and timestamps to your videos. This is the only thing that's missing in the great content you provide.
Yeah i'd probably just do a timeout or error toast in the past.....slowly becoming a senior dev
is there a particular reason you chose react query over swc?
7:33 Be honest, this is not intuitive
can you link me the repo with the react query code? I really want to fully grasp the use of it!
Can you make a detailed tutorial on real life usage of react query along side with redux ? any advanced todo app something like that ?
Next Video suggestion: React + vite v/s Nextjs (including deployment)
But it won't get latest like count . Every click success or error should update latest like count from DB because other user will like the post anytime .
Great video Josh 😀.
Please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube.
Thanks 😀
You'll learn more by trying to build it yourself and figuring it out on your own :)
@@obaid5761 lmao fr
Can we do same things in Solid js?
do i have to use 'use client' when using this?
Yes, hooks can only be used inside client components
only if its Next.js
why not use swr ? which one is better swr or react query
Josh tried liking his video
Will this work with trpc?
I love React query but still don't understand how to use it 😢😢😢 i want to understand it's concept badly welp😢😢😢😢😢😢
I love ReactQuery.
how to do this with trpc?
You guys can follow along 😮
hey can u please add all your Big projects in a dedicated playlist 💗
The optmisic update, it's a bit problematic and u need to know what u are doing... In case of RQ optimistic update, react doesn't rerender, which can be problematic many times....
hey josh next long video on netflix clone?? with all new and latest nextjs 13 , tRPC and prisma
If your recommended way of handling one of the most common aspects of your application involves doing something like awaiting a call to cancelQueries to prevent your framework from doing what it wants to do, you know you're doing something very wrong.
Couldn't think of a worse way of doing this.
There are even more problems in this video: resetting the likes to the previous likes likely violates your business logic. Just because some error was returned at some point in your request doesn't mean that the likes are equal to what they were before you clicked "like".
In this specific example of a like counter, someone else could be hitting "like" and it could increment for that reason. In other examples, an error might occur handling the connection but the like you submitted very well could have gone through already. Assuming that the application remains in the previous state on an error is almost never correct business logic.
If you are going to give criticism actually read up on the docs. No he is not doing something wrong, it’s literally in the docs.
Assuming an error means your mutation didn’t happen is also not as crazy as you make it seem as in most cases an error should mean that nothing has happened. Even if something did happen differently on the backend than assumed on the frontend, that problem gets handled by invalidating the data when the mutation settles.
epic!
Hi Josh, can you release the source code for this?:)
this already built in for Remix 😂
Bro plz make a video on when to fetch server side and client side
you teach me something, thanks !!
I forgot to press the like button so I came back to press it 1.4K times - sub’d
after seeing this i don't recommend optimistic method it's very tricky 😂 it make a very simple code to hell, the bests practices are based on simplicity
Nice video. It seems to me like doing it yourself is just as simple as using a library (I do it myself in jQuery and Solidjs). I don't see much value in react query at all
This video is AI generated.
as a large language model, i cannot deny this fact
@@joshtriedcoding Which tool did you use to make the video ?
@@linusbayere9206 since josh is a Chad, he uses ChadGPT
He won't reveal
Keynote
Sorry but the third way looks terrible. I’m a staff engineer. My code is great without react query.
Video is way too fast.
just tesing
ok
I feel like this is too complex devs and sometime frustrating for user. The only legit use cases for optimistic update is like/comment. for small use cases, simple react state is much easier/cleaner than mutate stuff.
Too complicated! Isn't there a simpler solution?
You should be aware they are depracating most of the "on" methods, so it might be best not to suggest them.
Pretty sure they're only being deprecated for the query, not for the mutation
@@joshtriedcoding Ah yes, sorry you're right! Nice vid :)
I like using swr only for this 😂 now less swr
sdfsdf testing
nice!
The title and the thumbnail are misleading of what this video is actually about
Bad video