React Query Makes Writing React Code 200% Better
Vložit
- čas přidán 27. 07. 2024
- I absolutely love React Query, also known as TanStack Query. This library singlehandedly makes working in React so much nicer and I can’t imagine creating a large scale project without it. In this video I will show you what React Query is, what it can do, and demo all of that in an application.
📚 Materials/References:
React Query Crash Course: • Learn React Query In 5...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:38 - TanStack Query Overview
01:17 - Project Overview
02:41 - useQuery Basics
09:00 - useMutation Basics
11:54 - Pagination
13:18 - Infinite Scrolling
#ReactQuery #WDS #TanStackQuery
You're the best teacher on CZcams, your explanations are always clear and fast, thank you so much. What I don't like about solutions like this is all the pop-ins and excessive loading states. For us developers this is nice and efficient but for users it's distracting and overall bad UX. I like the server rendering approach of Next which is fast like static but interactive where needed. React itself seems to be going in that direction with server components. Exciting times for web developers!
Man, I love this lib! ❤ Great overview, Kyle! Can't get enough of your videos.
Man, please develop a small to mid size project showing how to organize the codebase with React Query alongside a state management library like Zustand.
I'm dying for big project with Next13, react Query, Recoil, Jest for testing, performance monitoring that would be awesome
I love TanStack Query too. I used it on a recent project. Well done Kyle. This is an extensive yet succinct overview.
I joined a project about 9 months ago, which was deeply into useEffect/Redux hell. The cognitive load to understand what was going on some screens was exhausting. I proposed we use a query manager, and we settled on TansStack. The code we've been writing for new functions is significantly simpler and more "React-y". It's pretty much essential to be using it or something similar imo.
@@iudexgundyr8635 yeah maybe when the performance issues of using context aren't an issue to you. We have 100s to 1000s of entities in redux currently, doing that in contexts wouldn't be a good idea imo.
@Iudex Gundyr I don't know where it's written that "developers" feel they have to edify their identity by being precious about their solutions. If you like your thing and they like theirs, and you both are getting the results you want out of it, yay. You're making baseless assumptions and being rude instead of carrying on a conversation. If he has information that would go against what you're talking about, that's a chance for you to learn. If you're correct and they're all terrible, this would be a chance to provide helpful information in a polite manner, so they can benefit from your experience and wisdom and the whole industry gets elevated.
Being jerky doesn't make you cool or a better developer. It gives us all a bad name. It's not constructive. He lived his experience. He doesn't need you to pretend to be an authoritative source about what happened in his own life.
I have just started working with React Query and it has been just an amazing experience. Still learning to get better at it
This is incredible clear and great overview. You filled my gaps with this demonstration, I love you, dude! ❤😄
I was looking at react query yesterday and you come wit hthat video, thank you mate!
This is great! Thanks for what you do, please don't stop researching. Your work is so valuable!
This is very similar to Apollo Client, which was built for graphql. So nice to see good ideas spreading it through the community. :)
Finally ;) waited for this video! If you can do a video where you can show the different implementation of "with" react-query and "without" so we can see the true advantage
Thanks for this tutorial! It's very clear and concise: I am almost done migrating the front end of my project to react query thanks to you.
Exactly what I needed 😄 Thank you! ❤
well done mate, well done, it is a great summary of the principal topics, ty really handy
Looking forward to the full course , thanks you.
Looking forward to the full course :)
Great video.
A small heads up, that getPost does not need to be a Promise.
If your use case does not involve asynchronous operation, You can call normal function and still get all the benefits ✌️
You can even use React query as a mini state manager too 😅 so many use cases.
So cool, looking forward to that tutorial!
Ill be very happy if the crash course is ready
Great vid! Love your content!
Great video.
A small heads up, that getPost does not need to be a Promise.
If your use case does not involve asynchronous operation, You can call normal function and still get all the benefits ️
You can even use React query as a mini state manager too so many use cases.
I recently tried tprc and it is so amazing! Maybe you can make a video about it?
Thank you Kyle! very useful
timing couldn't be more perfect, was just about to move all calls to this
Thank you Kyle for creating great videos.
May I ask a request? Please explain to me what is cache, local storage, and session storage.
Thanks.
Amazing video, thanks for it !!!
I love this library. You should do also an episode about tasStack router. It is amazing tool.
He already did a couple weeks ago
Hi, one of your big fan here. Please do videos about advanced product filter and search on ecommerce sites. Thanks.
Sounds like using the cache and refetch in the background then update the state when we get a response can lead to a bad UX especially when fetching takes a relatively long time
I love this video so much. I have a question about an older video of yours which is "Real time chat app" . I was wondering if the code will still work or do I have to make adjustments to it?
Kind of similarities to RTK query, but it is a better alternative. Thanks for the video.
kyle you make great content, much love no hate
Excellent overview of TanStack React-Query. Thanks, Kyle!
{2023-01-27}, {2023-07-11}, {2023-08-01}
Hi, I love your videos, I just noticed that when you create a new post and then you go to the Posts page the post you haves created doesn’t show there, you could to it easily with the setQueryData function.
I know this is not a production environment but saying then for the greater good.
Can you make another video on React Query vs RTK Query. They both are used the most in the community and both are backed by influential team in React Eco System.
Is there a repo to play around? Thanks for sharing with us the knowledge!
This helps, thanks!
Thank you, can you do a crash course about tailwind ? just the same way as you did bootstrap please
TQ is amazing. SWR from the Next team is also really impressive. I’m so glad these libraries exist because it allows us to focus less on the data fetching and all that logic / “state” and truly focus on what UI is all about - the UI! Tanner did an amazing job, guess it’s a Tanner thing 😁
Do a genuine comparison between react query and swr , just skimming the swr docs gave me feel like optimistic updates might be better in swr
optimistic updates are simple in tanstack query, you can just setquerydata in your mutates onMutate callback, then invalidate the query in onSettled, make sure to hold the previous data in the mutate functions context before doing the setquerydata above, so if something goes wrong, you can roll it back with another setquerydata in the onError callback
Great bro!!!
When we com back to posts list, it should show message that new posts are being refreshed or checked.
looking forward more useCase examples~~
Hi Kyle! Could you please suggest how to have a deal with sorting (asc/desc) and react query? I try to use queryClient.setQueryData('existingData', newSortedData) but it is reseted while I re-focus tabs in browser. Seems like I can't do without usual useState? Thank you
How come this works without react’s useState hook? It seems to be using a normal JavaScript object as the state for the react component? Could anyone please clarify this?
You are one of the best of the best or may be the best
❤ Great video
The loading indicator flashes when the API request response quickly, is there a way to delay the appearance of loading indicator, eg, after 2s?
i found that the stale data then auto update is a bit annoying as the contents are changing. is there a way to show a placeholding 'loading...' at the new post before it's ready?
Great and helpful again! Thank you Kyle!
thanks for the video, sadly I just implemented a lot of stuff using a useEffect for client side API calls...
What is this timing. I just learned about react query yesterday 😂
Edit: please do a react admin video
Can you also make a detailed video tutorial on react query?
Awesome bro
Yo, can we have a NextJS integration guide with TanStack Query? Like how to use it with getServerSideProps and the new 'app' directory stuff.
Thank you
What does this exclamation+dot (!.) do?
Since i use RTK as state management, i use RTK Query which is included in the package so i don't need to include other libraries. Is there any relevant difference between them?
What about infinite scrolling, caching, and RTK pulls all data when u don't even need everything to pull
@@syed.simanta820 what do you mean?
For infinite scroll you manage data on the backend like a normal pagination 😅 pag1 pag2 etc... you just call the next page from the API when you reach the bottom scroll height.
Caching is the main feature of RTK query, so I don't get the question.
And RTK query don't pull everything when you don't need, you can just use Lazy query to trigger data when you want.
which state manager will be good together with react query?
Ty for the video
Can you make video about using custom hook that manages react query
react-query might not make much sense if you are working on small scale projects. But if you are working on an even slightly large code base, it makes your life way easier (if you want to have good UX).
On small size projects, what works good is to keep data in a static field of a class outside of the component, and get it by a function which refreshes it when needed
@@ylcsl4378 I use this method a lot when building backend with express but not so much on the frontend. But I suppose it would work the same way
@@royz_1 the advantage on frontend is that each time page opens again, the data is refreshes
I remember the team of Next.js made the same functionality called useSWR.
Can you please put the code in git repo and share its link
What about SWR?
When the component is unmounted I want to cancel any ongoing API calls , how to do that , generally, we can pass cancel token with axios, how can we achieve something with usequery?
Is TanStack Table next?
How to call use query on button click with some parameters ??
What about the performance?, Which one is better??
how can I access the saved in the query after the post is success, I mean after steQueryData the data saved here how can I access in in other component
I am use rtk-query which one is better?
New to React, but couldn't you just pass the post clicked on as props to child component instead of another API call to get data for that specific post? Assuming you already had all data on parent component
hey great subject. But when you publish a video upon a codebase, don't you thing you should provide a git repo upon which the video rely on ? So that viewer can replay what you done on the video, but maybe its part of your business model, dont kno
In the Post.tsx, the queryKey should be "post" instead of "posts", right?
how about swr, which one do you think works better?
Sorry if my question is "beginner" :( but I don't understand the difference between RTK and TanStack. So we don't need useEffect anymore? Maybe it is useful for big projects ? At the beginning I thought that it was an alternative for axios but no, or an alternative to redux toolkit. But it doesn't manage global state right? I also watch the 50 minute video but I found it too abstract for me.
what you do with ! mark in parseInt method with id?
please make a video about caching, because I always heard a joke that caching invalidation is hard.
before react query i was use redux toolkit rtk query but react query is simple and powerful❤❤
Kyle make shopping cart tutorial with redux toolkit with dummy data in react 18. I am facing some issues with it.
Can you make a git repo and give us the link of this code (components etc)?
Thanks for this video 🙂
Btw,
Can you tell me what the mean of ! after id in getPost(id!) and parseInt(id!) 06:53
If it is typescript then it is to tell that this value is not falsy so treat this value without checking null or undefined or any falsy value.
@@webbeg4672 Thanks 👍🏻
Yes, this is typescript
I was looking for this answer Thanks WebBeg
Just a question : if you use different redux stores, for example I need a component like table to be shown 4 times at the same time, is better to use react query or redux tool kit? Thanks :)
same doubt
I think yes because if it is server state you can use same key in any components it will automatically deduplicate network request into one and auto revalidate cache.
@@dellavita3463thanks for your reply, the problem is that this table has its own data(store) and they could be changed during the user session, for example if there is a pagination and the user changes the paginations of the first table, the other 3 tables should be at the first page.
make a course on react-query
Would you use react query over redux toolkit query? Which is preferable
Community moving to react query now
I do switch for React Query instead using Redux anymore
doesnt useQuery also uses useEffect behind the scene?
"!" what is the use of this sign after a value?
Thanks!
Thank you for the support!
I noticed that on the infinite list the load more repeats the first 10 posts.
This was just a bug in my code as I used 0 as my start page instead of 1
Is it similar to rtk query?
Hi forgive my ignorance but in Post.tsx ( 08:22 ) what is the meaning of :
+ The ! in : parseInt(id!) , getPost(id!)
+ The !. in getUser(post!.userId)
I searched MDN for chain operators and etc but didn't find the answer. Thanks Gr8 vid.
Appending ! to an optional value is a way of telling TypeScript: "Hey, I know this value is not undefined or null, don't treat it as optional". You usually add it when you are 100% sure something exists. It's called "non-null assertion operator".
useParams() method returns "string | undefined" when destructured, so he basically skipped the null/undefined check.
hi Kyle can you do a video on how to login using social media like Google or Facebook .... I really need that :(
Any reason switch from Apollo Client to React Query if my server is only GQL?
Not required as apollo client also does the essential caching which react query is providing
@@aseemanand1 what is beter ?
is it useful in ssr?
It's quite similar to GraphQL, seems cool
can i get the codes？
so just it's for promise's while wait and error state handling. I would have named it useWaitState or WWS (whileWaitState) , surprised there arnt primitives for this in every framework/library or that promises doesnt have a standard onWaiting member event as part of the js spec, it sounds like a pretty obvious convention to have with a language that uses callbacks and async in alot of it base.
I'm not sure if is better, but more interesting, all this frameworks are bad in scaling projects, so using react-query not solving that much....
Agree
@@michaskiba3710 I'm using it everyday, I've used next.js swr, and both are ok, but meh, u can't do something more and your project be that good and flexible. I like next.js 13 that it have all that swr/react-query jazz baked in on top of fetch api, so maybe that would be better approach.
Are you open for consulting/ mentoring at all? :)
Can u provide the code for this one in github?