React Query Tutorial V5 - Full Tanstack Query Tutorial for Beginners
Vložit
- čas přidán 27. 07. 2024
- In this tutorial, you will learn everything related to TanStack Query, formerly known as React Query. After watching this video, I guarantee that you will understand every concept of this library and will be able to confidently start working with it.
#react #react_query #tanstack_query
🔗 Links:
Project Github Repository: github.com/codegenixdev/31_re...
Fake Server Backend Repository: github.com/codegenixdev/project
⭐️ Contents ⭐
⌨️ 00:00:00 Intro
⌨️ 00:00:36 Setup
⌨️ 00:02:41 Fake Server Setup
⌨️ 00:03:30 Old Way
⌨️ 00:05:25 Initialize First Axios Http Get Request
⌨️ 00:07:00 Initialize Todo Feature
⌨️ 00:09:00 Write Your First Tanstack Query
⌨️ 00:12:30 Use Your First Query Inside Your Application
⌨️ 00:14:30 Wrap Your Project Inside React Query Client
⌨️ 00:15:00 Initialize Tanstack Query Devtools
⌨️ 00:18:00 Difference Between Query State and Query Function Status
⌨️ 00:19:30 useIsFetching Hook
⌨️ 00:22:00 Get Full Todo
⌨️ 00:22:30 Parallel Queries
⌨️ 00:25:00 Use Parallel Queries Result Inside React Component
⌨️ 00:28:00 Write Your First Mutation In Tanstack Quey
⌨️ 00:29:00 UseMutation Hook
⌨️ 00:30:00 Mutation Lifecycles (onMutate, onError, onSuccess, onSettled)
⌨️ 00:32:00 Use Your First Mutation Inside A React Component
⌨️ 00:33:00 Initialize a Simple Form Using React Hook Form
⌨️ 00:35:00 Submit Your Todo Data To The Server
⌨️ 00:36:00 Mutation Lifecycle Functions Callback Function Arguments
⌨️ 00:39:00 Query Invalidation From Mutation
⌨️ 00:45:00 Single Query Item Invalidation
⌨️ 00:46:00 Update Todo Using Mutation
⌨️ 00:49:00 Delete a Todo
⌨️ 00:53:00 Difference Between Mutate and MutateAsync
⌨️ 00:54:00 Initialize Projects Component
⌨️ 00:57:00 Paginated Queries
⌨️ 00:58:00 PlaceHolderData
⌨️ 00:58:25 KeepPreviousData
⌨️ 01:00:18 Use Query With PlaceHolderData Inside a React Component
⌨️ 01:03:00 Initial Products
⌨️ 01:04:00 Initial Infinite Scrolling
⌨️ 01:06:00 useInfiniteQuery for Infinite Scrolling
⌨️ 01:08:00 Implementing Infinite Scrolling Inside a React Component
⌨️ 01:13:00 Enabled on Query
⌨️ 01:14:00 Manipulate Stored Cache Directly
⌨️ 01:18:30 Conclusion
🎨 My Editor Settings:
- JetBrains Mono
- Dracula
🔗 Resources:
tanstack.com/query/latest
Between SWR library, React Query or other server state management libraries, what is your choice and why?
i would totally recommend this course to my developer circle. I enjoyed the way how you go through even the smallest detail, which is exactly what i was searching for in the internet. Keep up the good work.
My dear friend, thank you very much for your positive energy. You made my day❤️🙏
Thank you for providing the most concise and up-to-date tutorial on Tanstack Query! Your content is incredibly helpful, and I'm thrilled to be a new subscriber.
You're very welcome! I hope you have learned something. You made my day!❤️❤️
The greatest explanation of the react-query period.
Thanks my friend, you made my day!
This was a wonderful tutorial. Thank you! Please do more.
Thank you! Will do!
Thank you for providing a detailed tutorial on what and how about the tanstack query.
Your welcome my dear friend❤️. I'm glad that it helped🙏
This is an excellent tutorial with real example which includes most recommended features of react-query. Thanks a lot for this amazing tutorial.
I'm so glad you liked it. Your welcome
What a great tutorial! Thank you!
Glad it was helpful!
awesome video man !!! You are a great teacher . Godspeed !
I appreciate that!
thanks, Genix, in one video you cover all the concepts of tanstack query , keep making this valuable content
You made my day bro. I'm so glad you liked it🙏❤️
i never comment on any video
but this was one of the best react query tutorials i have ever seen
keep up the great work ❤
Thank you so much for your kind words I'm really glad you found the video helpful. What aspect did you find most useful? I'd love to hear more
Ahnnn am first time seeing your channel from this video your voice makes the understanding clear after that looking to going forward react hook form video and might some more good stuff in future subscribe done❤
I'm so Glad to hear that! Welcome aboard!
Such a great tutorial and with version 5😍 thank u!
You're welcome 😊
Awesome tutorial, thank you!
You are very welcome
Wow, thanks for sharing the knowledge, liked and subscribed
Thanks for the sub!
it is by far the best tutorial on react query on the internet.
I'm really glad that you liked it
@@codegenix A full project with React-Query & Zustand would be incredible
Great Explanation, I have been looking for ot for a while now. although one thing to point out, which I kind of find missing in most of the React Query tutorials on CZcams is, how to share data between different components, or how to manage client side state, or say how to share user Auth in various components, and how to share mutations state, and most importantly, should we even integrate redux for managing client state along with react query.
Would love to see a vidoe diving on these topics., Thanks! 😊
I really appreciate your comment my dear friend. More on tanstack products!
This is by for most amazing video on Tanstack Query , Thanks for the video man , God bless you
Glad it was helpful! You made my day❤️
Thank you for your tutorial, I enjoyed your samples, can't wait to use it in my next project 🙃
You are so welcome!
I love your tutorials , thanks for sharing 👍
Thanks for watching!
Clear and clean ❤ thank you
Glad I could help❤️
Thank you brother you did explain clearly and obviously but it was my first time using react tanstack query i hope i can implement it into my daily project. I really appreciate your hard working and making videos for us to learn something. I couldn't find any useful video about react tanstack query but your video. Some people teach in a method which beginners can not follow them like they jump from one project to another project. You did really good job by explaining every part of it.
You are most welcome my dear friend❤️ You really made my day! I'm so happy right now. I'm glad that it helped.
@@codegenix once more thank you very much
Thank you too for your positive energy!!
Thank you, excellent explanation, pretty clear
Glad you liked it
Love watching tutorials that uses VIM 🎉
Are you a vim enthusiast too?
i enjoyed this one ..more so the structure and typings and indepth analysis
I'm so glad that you liked it🙏
Loved your content,
Best of luck dear
I'm glad you liked it!
Thank you so much for sharing this , very helpful for beginners and one little note fort that api call for only todosIds I think it was unnecessary you could just get a list of todos and use the id of each of them when needed but its okay overall ,except that very good video
Hello my dear friend. I really appreciate your positive energy and feedback❤️🙏. In that part of the video, I was simulating an endpoint which returns only the list of ids of todos. Yeah you are right, I could have get the todos list and for each of them get the whole todo
Hey man, awsome tutorial! hope you keep covering tanstack libraries.
+1 sub ❤
Thanks for the sub! More to come❤️
I cant believe I've been struggling with RTK while theres an easy way like this 😢😢
Thank you for this video. Its a lot life saving❤❤
You are very welcome!
@@codegenix I had to remove every instances of Redux RTK and installed tanstack query. It was a hell at first but I finished it in a day. I've been stuck trying to use RTK for 3 days. Thank brother
Please is there a way I can show my users "your friends on Facebook are using "my app name" in JavaScript express app? What I'm trying to do exactly is , when users authenticate, I want to give them hint their friends (on Facebook) are also using my app showing them just photos of about 3-5, and names from Facebook. Is there a way to achieve this? Thank you.
You are very welcome!
Helpful video, Thank you.
Glad it was helpful!
thank you for the tutorial. it is really good
Glad it was helpful!
After watching 20 mins of the video, I hit the subcribe button with no thinking
I'm really glad that you liked it. Thanks for your sub
thank you sir, I learned a lot in this video, I hope you make a tutorial of tanstack router tanstack form and other tanstack ecosystem
Yes, soon! I'm very glad that you have learned something❤️
learned a lot thank you
I'm so glad! you're welcome
Thank you.
You're welcome
Thank you!
You're welcome!
firsttime here subscribed.. next framer motion, shadcn, swiper js, from docs topics wise in depth with pratical
Noted! Thanks for your subscription❤️
@@codegenix video's?
Thanks a lot !!
You're very welcome
Thank you
You're welcome
GREAT! Tanstack Table next please!
I'm really in love with tanstack projects! Sure my friend!
Great information bro, Thanks a lot.
Very useful. and Subscribed to get more content from you.
And I have a request, please make Login and Register using react query and also create filter, search and sorting.
Hi my dear friend. I really appreciate your positive energy. You surely made my day!
I am currently working on a thorough tutorial about react-hook-form with the combination of zod and mui. After that I'm gonna create another tutorial about authorization, interceptors, axios and much more.
@@codegenix
Thanks for the response❤.
damn good video !!
I'm so glad you liked it
Good work
I'm glad🙏
Awesome.
Glad you think so!
i loved this video. Can you pleases create a project which contain graphql,rtkquery and nextjs from basics to advance with authentication.
Hello my dear friend. I really appreciate your positive energy. I'm currently working on an SWR tutorial because of one of my dear subscribers suggestion. I difintly have plans for graphql and redux query in a few weeks🙏
can you provide your discord link or insta?
@@codegenix
I don't have any of them my dear friend. Why do you ask?
Thank you for tutorial :)
Could you tell which extension you used in the video to view JSON in the browser?
Hi my dear friend. I really appreciate your positive energy❤️.
I am using the Firefox developer edition and the json viewer is built in by default. I did not installed anything extra.
nice
Thanks
Please do a video table data in react what is the best way to show table data, is it tanstack table ? please do a video on this
Great tutorial! One question. Around 39 min in video, you put `invalidateQueries` function in `onSettled` instead of `onSuccess`. I think the todo list needs to be refetched only when todo item is added successfully. Can you explain why you chose `onSettled` instead of `onSuccess` for refetching?
I'm so glad you liked it🙏. You are right, it was my mistake to invalidate queries on onSettled callback. You should invalidate queries on onSuccess hook for better readability.
Very nice tutorial on TanStack Query. I have a question about mutating an existing Todo at 46 minutes. You invalidate both the entire 'todos' and the specific 'todo' that is being updated. Is it enough to only invalidate the single todo? Maybe I don't understand it correctly because I am a Vue developer ;)
I'm so glad that you liked it❤️
The todos key is to invalidate the list of todos (when the user updates a single todo, the list of todos must be updated because maybe the name of a todo has changed and it must be reflected on the list also). The specific todo is to refetch the single todo again from the server to be sure everything is up to date from server.
this video is just wowww, i hope u can show how to use zod, hook form, react query and zustand together in typescript that still annoy me.
Thank you very much for your encouraging comment. I definitely have plans for these concepts in the future.
@@codegenix thanks, using multiple dependencies that share data is really challenging for me, and typescript error really painful
I am in love with the stack that you just mentioned. Mostly I use rhf, mui, tanstack query, zod and redux. One of the best react combination that works together flawlessly. I'm gonna create a project-based tutorial with this stack soon.
zustand seem more simple than redux, or maybe i just want the easy way, hahahha. but u know better than me, i just like the way how u explain in detail. i treat web dev like puzzle, knowing one puzzle in right place is nice
Thank you, my dear friend. I really appreciate your positive energy. I've worked with Zustand too on an e-commerce application where I managed the user's cart state and other simple UI states with it. It was very simple to use and had an amazing DX. For a more complex project, I prefer the React Context API first because of its isolated providers, then Redux because of the amazing Flux architecture. However, the final choice is ours as developers to choose which library to use for what use case.
Awli bood. NICE
Fadaye shoma merci😅❤️
What would be the difference to invalidateQueries in onSuccess vs onSettled?
Both of them do the same. Invalidating on onSuccess callback is more readable to developers that many you of just mentioned.
I also got that error about a unique key, is that an error that json-server throws? Since i add the key i don't understand why it appear.
@user-ll4qy6cg9i Would you write your code here? the unique key error part
can I ask you, why when you create a new user, its id know and increase by +1 ?, i try do to but it generate random string id, thank you
It is not a big deal. I suppose it is a bug caused by the json-server itself.
45:20 can someone please explain why we are invalidating both list and single item, isn't invalidating single item enough??
Sorry for my mistake. It was confusing.
But the reason that we also need to invalidate the single item is that when we edit the single item, the single item on the server also changes. So wherever we need the single item in our application, the single item must also be revalidated.
Bur in this simple example we did not need to invalidate the single item.
@@codegenix Thank you I understand now and it is a great video, I learned a lot ❤
I'm glad that you learned something. It means a world to me❤️
why I see error "key is not defined for li" in console log for first example with Todos, althogh you are defined it ?
Would specify the exact time on the video?
for pagination when user refresh page it redirect to first page or not sir?
The current page index is a state which is on the memory of the window session. If the user refreshes the page, the page index also will be initialized again to it's initial value (for example 1) which is the correct behavior
Hi, i have a question that, if i use direct useQuery or useMutation at the top component instead of create a file and return a useQuery. I will use it like a hook of React at the every component.
Hi my dear friend. The way you use it is 100% correct and there is nothing wrong with it. It is your personal preference.
In my react project, I prefer to divide big projects into smaller modules (features) then inside each module I create a services folder then inside it I handle everything related to server data. It depends on the size of your project what architecture to choose.
@codegenix Thanks so much for your answer, with your answer, I imagine that if the project is large, your file splitting method will be the best choice?
Your welcome my dear friend.
Yes, I have worked with this type of folder structure in a large scale application. It handled most of the complex data flow logic in the project, it is very simple but easy to maintain on large scale applications.
@@codegenix i love this answer, have a good day !
which commond we use for run backend
npm run start
i usually put type of query at useQuery then after use new v5, its keep have error, then after watch u, change the type of respose to the axios is the result i can have xD
Glad I could help🙏
thank u brother but whats the theme you're using?
I'm glad you liked it. I am using "JetbrainsMono Nerd Font" and the theme is Dracula.
Can you tell me useQuery on success method deprecated and what's its alternative now?
The callbacks for useQuery were deprecated on version 4 and completely got removed in version 5. If you want to do side effects at different life cycle of your queries, you can use the useEffect hook from react:
useEffect(() => {
if (userQuery.status === "success") {
// do something
}
}, [userQuery.status]);
@@codegenix thanks
Your welcome❤️
what font and theme do you use in your editor?
Hi my dear friend and thanks for your subscription!❤️
The font is "JetBrainsMono Nerd Font" which you can download for free from jetbrains website and the theme is Dracula.
can you create video about tanstack router for us ? thats amazing type safe router and i cnt find any complete free course about that !
If the community becomes more active, this library can have a great potential. But right now I cannot rely on this library for large scale applications. I always recommend react router. Have you ever tried the tanstack router? I must give it a go.
Hi bro now what do you prefer to learn as a full stack developer with differnet dependencies and libraries i am currently now immersed in react what do you suggest me other than that please bro tell me
Learning nextjs would be a good choice with your current knowledge. Because it supports tRPC out of the box and it has an amazing integration between front end part of your project and the backend side in a single code base.
@@codegenix yeah Thank you
But when you are having a large project at that time choosing an separate backend is better right instead of writing in next js itself.
And instead of nextjs do you suggest something different and for backend and database what do you suggest
@sathvikguntuka218 If you know typescript well, Nest.JS (not Next.JS) is a good choice for the backend.
If you want something more unopinionated that Nest.JS, use express js (MERN or PERN stack)
@@codegenixthank you for your valuable explanation on my doubts
I appreciate it Sir
using callback like onsuccess is removed in latest version
Thanks for your comment my dear friend. Callbacks are removed from queries not mutations.
im a beginner at this so im sorry if it sounds stupid but how can I run the fake server?
@gabbusaii3375 Why are you sorry, my friend? This is a learning process, and we must help each other to become better developers. This place is not Stack Overflow, which can sometimes harm junior developers' confidence. There is nothing to be ashamed of when trying to learn.
To run the fake server, create an empty folder outside your React project. Then, inside this folder, run npm init -y to initialize a simple Node.js project. Next, place the JSON file I provided in the description into this folder.
Create a simple server.js in the root of the folder then paste the code from the repo I just provided.
Finally, run the following commands:
`npm install json-server` to install the fake server.
`npx json-server db.json` to run the fake REST API on your localhost.
@@codegenix thank you so much for responding!! It's working great now!
@gabbusaii3375 Your welcome my dear friend. I wish you the bests
cool walk through but what about data filtering will you teach more about that soon
Thanks my friend. What do you mean by "data filtering"?
Me personally would reinvalidate cache data when the mutations are success, not when they're settled, simply because what is the point if the api returns error then we revalidate the cache ? 🤗🤗
What was I thinking! Although there is nothing wrong with the current cache invalidation, you are 100% correct my friend. It is more readable to invalidate the cache from the onSuccess callback.
16:22 But when do we want to show ReactQueryDevtools?
This tool might sometimes be very helpful. For example when you want to check which queries are still fetching or to see whether the cache invalidation in working correctly. But remember to turn it off on production.
React Query!!
Hey bro thank you for this 🙏.
Small request can you make one TODO same using SWR
stale-while-revalidate.🙏
🙏🙏🙏
Hi my dear friend. Thanks for your positive energy, I really appreciate it.❤️🙏
I have plans for creating a tutorial for SWR library in a soon future.
@@codegenix Hey Please Next week SWR TODO tutorial🙂
Sure my friend
Can I ask why are you insisting on SWR? Isn't tanstack a better option?
@@codegenix my company uses it and i am having hard time understanding SWR 🙏
I request you please make a video of complete login system where we register, login and prevent to access private route without login using react-query react-form-hook redux-toolkit api auth token and also handle 404 page.
Hi my dear friend.
Sure, I am going to create full nextjs course and I am going to covers these topics that you just mentioned.
@@codegenix Thank you.
Only doubts why are u fetching the entire Todo's in one api, use that id's to fetch again the same Todo's what u fetched in first api ?
It's for demonstrating a real world case scenarios where you first get the list of todos (for example the id and title of each of them) then fetch each of the todos completely on demand by sending your backend the id of that todo.
thank you so much GENIX for this updated course for free, your kindness means a lot to us! one suggestion by using vanilla JS lot of beginner will be able to understand the code.
I'm really glad that you liked it. I really appreciate it. This library in unfortunately based on React and using it inside vanilla js is not recommended
@@codegenix I meant teaching us with JS and jsx file type on react
Please we want to explain zustand with a practical application to it
Definitely! I am working on a full Zustand course currently.
can i still learn this?
@reydelocon629 Yes, sure. The TanStack Query library hasn't had any major updates since this tutorial was released.
please upload tanstack router tourtorial beginers full course with simple example from scrach
Sure my friend. The tanstack products are amazing and I am working on new courses
@@codegenix please provide date i have to use in my project our boilerplate has dependency of tanstak router
Currently I am working on a thorough react-hook-form zod mui tutorial my friend. The tanstack router query might not be ready at least for two weeks.
up...waiting for that too
Hey can you please create a tutorial on SWR please.
Hi my dear friend. I'm currently working on an SWR tutorial as you and many other have requested.
Can I ask why are you insisting on SWR? Isn't tanstack a better option?
@@codegenixI found that Zotai Recoil and Swr are mostly used in NextJS open source projects.
Yes you are right. Swr is developed by vercel and because of that it is very recommended to be used in nextjs projects
Where are you from bro? The accent is very Familiar
I'm persian bro
My bookmark 46:27
don't use `.find(entity => entity.id === 'some-id')`. Use `Map` instead
Thanks for your recommendation my friend! but in this case, we are looking for the first occurrence of the condition "entity.id === 'some-id'". There is no need to map over all of them even if the desired result is found on first iteration!
kheili khafan dmt grm
Mokhlesam🙏😅
How many people still using react
According to stackoverflow 2023 survery, React is the most popular web framework. But it does not mean that it is the best choice for each project! Each project must choose its tech stack based on its needs not the popularity factor.
@@codegenix i have tried vue/nuxt, angular, solid, svelte/sveltekit. Even though react/next sucks in terms of speed i still find it convenient to code in react/next...huge community and great maintenance is the reason may be i don't know 😂😂😂
I love to try vue. How do you compare it with angular?
Vue is nice in terms of speed, customisation, and built in support like state management, routing etc but sometimes error handling is a bit problem for me i don't know about others, also built in code splitting and, vite is fast like a bullet train... i really don't
Think it has any disadvantage over react but , react is react you know...vue svelte little bit similar while writing code..can use style tags in .vue files also script tags..also have built in forloop and other syntax..
Angular only thing i like is signals...not a fan not a fan...
For those watching this: Enable x1.5 speed right away. You will thank me later :)
Yeah you are right, my English is terrible😅
@@codegenix your english is fine, it’s just a bit slow-paced. Nice video though! Thank you!
Thanks my dear friend. I will consider your suggestion for my next videos. I just wanted the video to be understandable for everyone.
You dont need to run a backend server with an own API to show how to use useQuery V5. You could use some free API on the web and it would be easy to follow the example. This explanation isnt good. Sorry bro...
Thanks for your advice my friend. But free api on the does not satisfies the requirements for this tutorial, like editing, deleting or creating entities on the database. They are mostly very simple and they lack these features
you do so many unnecessary things make this course really unpleasant to follow, sadly its the only up to date course
Hi my dear friend. I really appreciate your comment. But can you mention the problems that you are encountering?
great tutorial thx. really helpful. may i ask u what OS do u use?
Your welcome my dear friend. I am using windows 11.
nice
Thanks❤️🙏