Well said! Excellent lecture. Wondering why this man has only few thousand subscribers. @codegenix please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
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.
@@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.
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 TH-cam 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! 😊
@codegenix Excellent lecture on React Query V5. You become Pro in React Query after watching this Video Wondering why this man has only few thousand subscribers. Please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
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.
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.
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 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.
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
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🙏
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.
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
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.
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.
@@codegenix To be honest, I don't get it. As we revalidate /todos, we get an updated list which means that the single item we have edited will be also updated. We should not need to revalidate a single item in your example. But if we have a specific edit page, revalidating a single item would make sense. Am I correct or miss something?
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.
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)
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
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.
what happen if I use axio post in a query function? My understanding is we can call mutate whenever we want. But the query will be called automatically when we call useXXXX hook. Am I right?
@candyman3537 Yes you are right. But doing something in a query which leads to mutate the server state (for example updating a record on the database) is wrong and might cause many unexpected bugs although it is possible. Another things to note is that for some specific http requests and some api endpoints, when you want to fetch data from that endpoint, you must use POST HTTP method which you can use it in a query function without any problem.-
@candyman3537 You can do a refetch by query.refetch(). Also you can invalidate your query using queryClient.invalidateQueries(). But I suppose you did not thoroughly understand the React Query architecture. React query itself will do all necessary fetching automatically. You just need to invalidate your queries when you need it.
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]);
@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.
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.
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.
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
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.
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.
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.
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.
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.
Between SWR library, React Query or other server state management libraries, what is your choice and why?
React query
using swr on my current office application
If you dont understand the lecture , I will suggest you to listen it twice .Then you will be very thankful to this man.
I'm glad that it was helpful to you
Well said! Excellent lecture. Wondering why this man has only few thousand subscribers. @codegenix please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
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
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❤️🙏
OMG this is the BEST TUTORIAL in TH-cam of React Query and updated. New Sub you're gooooood. You have solved all the doubts I had
You cannot imagine how you made me happy with your amazing feedback. You are very welcome😍
The greatest explanation of the react-query period.
Thanks my friend, you made my day!
Most complete tutorial on entire TH-cam... I saw about 10 of them, and IMHO this is one of the best. Important details are told here...
You cannot imagine how much you made me happy. I really appreciate your kindness
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🙏
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!
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
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 TH-cam 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!
@codegenix Excellent lecture on React Query V5. You become Pro in React Query after watching this Video
Wondering why this man has only few thousand subscribers. Please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
Love you bro. You made my day. I'm really 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
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 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!!
Absolutely incredible tutorial with relevant examples, thank you my man!
My pleasure!
Such a great tutorial and with version 5😍 thank u!
You're welcome 😊
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!❤️❤️
So Elegant so beautyful Just looking like a WOW course
Amazing Content & Course
You made my day. I'm so glad you liked it
this is the best ever tutorial on tan stack query. Thank you
I'm so glad you liked it🙏
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🙏❤️
This was a wonderful tutorial. Thank you! Please do more.
Thank you! Will do!
Really good tutorial. I loved that cache trick at the end. Keep up the good work buddy.
Glad you liked it
I really like your explanation, very clear and simplified ^^
Glad to hear that!
@@codegenix I would appreciate if you made a tutorial on SSR Components
Excellent explanations and examples. You earned my sub.
I really appreciate it bro
I will say this is the best video so far 😅😅 thank you very much i already understand how react query works but next time please reduce the speed 😢
I'm really glad that you liked it. I'm definitely gonna consider it
Thanks for this tutorial bro! You deserve more subscribers and btw. I love your accent. Keep it up!
I'm so glad that you liked it. I really appreciate your kindness🙏❤️
Thank you for your tutorial, I enjoyed your samples, can't wait to use it in my next project 🙃
You are so welcome!
Wow, thanks for sharing the knowledge, liked and subscribed
Thanks for the sub!
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!
you deserve much more subscribers, thanks btw, great explanation!
Love you bro❤️🙏
I love your tutorials , thanks for sharing 👍
Thanks for watching!
What a great tutorial! Thank you!
Glad it was helpful!
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❤️
Clear and clean ❤ thank you
Glad I could help❤️
i enjoyed this one ..more so the structure and typings and indepth analysis
I'm so glad that you liked it🙏
Love watching tutorials that uses VIM 🎉
Are you a vim enthusiast too?
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?
Awesome tutorial, thank you!
You are very welcome
awesome video man !!! You are a great teacher . Godspeed !
I appreciate that!
Loved your content,
Best of luck dear
I'm glad you liked it!
This video is useful. I also like your vs code setup. Can you make a separate video for your vs code setup?
Really loved your suggestion. Sure I'm gonna create a video for it bro
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.
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
Thank you, excellent explanation, pretty clear
Glad you liked it
very helpful, much appreciated
You're welcome!
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?
very nice video
Thanks
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❤.
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❤️
GREAT! Tanstack Table next please!
I'm really in love with tanstack projects! Sure my friend!
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
thank you for the tutorial. it is really good
Glad it was helpful!
Helpful video, Thank you.
Glad it was helpful!
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
Hey man, awsome tutorial! hope you keep covering tanstack libraries.
+1 sub ❤
Thanks for the sub! More to come❤️
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.
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.
@@codegenix To be honest, I don't get it. As we revalidate /todos, we get an updated list which means that the single item we have edited will be also updated. We should not need to revalidate a single item in your example. But if we have a specific edit page, revalidating a single item would make sense. Am I correct or miss something?
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.
Thanks a lot !!
You're very welcome
damn good video !!
I'm so glad you liked it
Thank you
You're welcome
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
learned a lot thank you
I'm so glad! you're welcome
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.
Good work
I'm glad🙏
Awli bood. NICE
Fadaye shoma merci😅❤️
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🙏
Awesome.
Glad you think so!
which commond we use for run backend
npm run start
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❤️
Thank you.
You're welcome
what happen if I use axio post in a query function? My understanding is we can call mutate whenever we want. But the query will be called automatically when we call useXXXX hook. Am I right?
@candyman3537 Yes you are right. But doing something in a query which leads to mutate the server state (for example updating a record on the database) is wrong and might cause many unexpected bugs although it is possible.
Another things to note is that for some specific http requests and some api endpoints, when you want to fetch data from that endpoint, you must use POST HTTP method which you can use it in a query function without any problem.-
@@codegenix ok，then what if we want to call query manually. For example，after user click a button？
@candyman3537 You can do a refetch by query.refetch(). Also you can invalidate your query using queryClient.invalidateQueries(). But I suppose you did not thoroughly understand the React Query architecture. React query itself will do all necessary fetching automatically. You just need to invalidate your queries when you need it.
Thank you!
You're welcome!
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❤️
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
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
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.
nice
Thanks
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"?
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.
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 !
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
nice
Thanks❤️🙏
Like this video a lot. But its getting really annoying that Tanstack is getting repeated over and over again..
Yes you're right
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
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.
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?
React Query!!
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.
Where are you from bro? The accent is very Familiar
I'm persian bro
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 🙏
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.
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.
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.
can i still learn this?
@reydelocon629 Yes, sure. The TanStack Query library hasn't had any major updates since this tutorial was released.
I really like your teaching style. However, I'd rather see an actual backend. Not fond of the fake server you use
Good idea👍
using callback like onsuccess is removed in latest version
Thanks for your comment my dear friend. Callbacks are removed from queries not mutations.
Please we want to explain zustand with a practical application to it
Definitely! I am working on a full Zustand course currently.
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.