Тёмный

React Query Tutorial V5 - Full Tanstack Query Tutorial for Beginners 

Code Genix
Подписаться 6 тыс.
Просмотров 56 тыс.
50% 1

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

Опубликовано:

 

13 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 227   
@codegenix
@codegenix 2 месяца назад
Between SWR library, React Query or other server state management libraries, what is your choice and why?
@RNanthuKishor
@RNanthuKishor 5 месяцев назад
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
@codegenix 5 месяцев назад
My dear friend, thank you very much for your positive energy. You made my day❤️🙏
@roninspect4357
@roninspect4357 13 дней назад
it is by far the best tutorial on react query on the internet.
@codegenix
@codegenix 13 дней назад
I'm really glad that you liked it
@roninspect4357
@roninspect4357 13 дней назад
@@codegenix A full project with React-Query & Zustand would be incredible
@lalitsingh-de1md
@lalitsingh-de1md 10 часов назад
thanks, Genix, in one video you cover all the concepts of tanstack query , keep making this valuable content
@codegenix
@codegenix 8 часов назад
You made my day bro. I'm so glad you liked it🙏❤️
@lombord69
@lombord69 3 месяца назад
The greatest explanation of the react-query period.
@codegenix
@codegenix 2 месяца назад
Thanks my friend, you made my day!
@pizaariaaa5909
@pizaariaaa5909 6 месяцев назад
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.
@codegenix
@codegenix 6 месяцев назад
You're very welcome! I hope you have learned something. You made my day!❤️❤️
@RatherBeCancelledThanHandled
@RatherBeCancelledThanHandled 13 дней назад
I love your tutorials , thanks for sharing 👍
@codegenix
@codegenix 13 дней назад
Thanks for watching!
@user-dt1uc7of1z
@user-dt1uc7of1z 3 месяца назад
This was a wonderful tutorial. Thank you! Please do more.
@codegenix
@codegenix 3 месяца назад
Thank you! Will do!
@gmjitendra
@gmjitendra 29 дней назад
This is an excellent tutorial with real example which includes most recommended features of react-query. Thanks a lot for this amazing tutorial.
@codegenix
@codegenix 29 дней назад
I'm so glad you liked it. Your welcome
@janemoroz554
@janemoroz554 4 дня назад
Awesome tutorial, thank you!
@codegenix
@codegenix 3 дня назад
You are very welcome
@pineapplejuice9814
@pineapplejuice9814 2 месяца назад
awesome video man !!! You are a great teacher . Godspeed !
@codegenix
@codegenix 2 месяца назад
I appreciate that!
@funzoned9008
@funzoned9008 6 месяцев назад
Thank you for providing a detailed tutorial on what and how about the tanstack query.
@codegenix
@codegenix 6 месяцев назад
Your welcome my dear friend❤️. I'm glad that it helped🙏
@andriikuznietsov
@andriikuznietsov 3 месяца назад
What a great tutorial! Thank you!
@codegenix
@codegenix 3 месяца назад
Glad it was helpful!
@bilal5488
@bilal5488 2 месяца назад
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❤
@codegenix
@codegenix 2 месяца назад
I'm so Glad to hear that! Welcome aboard!
@user-pq9rq7qs1l
@user-pq9rq7qs1l 2 месяца назад
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 ❤
@codegenix
@codegenix 2 месяца назад
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
@user-ll4qy6cg9i
@user-ll4qy6cg9i 5 месяцев назад
Such a great tutorial and with version 5😍 thank u!
@codegenix
@codegenix 5 месяцев назад
You're welcome 😊
@mahendranath2504
@mahendranath2504 4 месяца назад
Wow, thanks for sharing the knowledge, liked and subscribed
@codegenix
@codegenix 4 месяца назад
Thanks for the sub!
@dulnethbernard9638
@dulnethbernard9638 Месяц назад
learned a lot thank you
@codegenix
@codegenix Месяц назад
I'm so glad! you're welcome
@devsami
@devsami 5 месяцев назад
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 RU-vid 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
@codegenix 5 месяцев назад
I really appreciate your comment my dear friend. More on tanstack products!
@valeriakan6474
@valeriakan6474 5 месяцев назад
Thank you for your tutorial, I enjoyed your samples, can't wait to use it in my next project 🙃
@codegenix
@codegenix 5 месяцев назад
You are so welcome!
@hardikganatra2453
@hardikganatra2453 6 месяцев назад
This is by for most amazing video on Tanstack Query , Thanks for the video man , God bless you
@codegenix
@codegenix 6 месяцев назад
Glad it was helpful! You made my day❤️
@fahimhossen7842
@fahimhossen7842 Месяц назад
Thank you.
@codegenix
@codegenix Месяц назад
You're welcome
@andriizilnyk4927
@andriizilnyk4927 2 месяца назад
Thank you, excellent explanation, pretty clear
@codegenix
@codegenix 2 месяца назад
Glad you liked it
@zeddscarlxrd4331
@zeddscarlxrd4331 4 месяца назад
Clear and clean ❤ thank you
@codegenix
@codegenix 4 месяца назад
Glad I could help❤️
@electrofact1656
@electrofact1656 2 месяца назад
Loved your content, Best of luck dear
@codegenix
@codegenix 2 месяца назад
I'm glad you liked it!
@ScriptCodec
@ScriptCodec 2 месяца назад
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❤❤
@codegenix
@codegenix 2 месяца назад
You are very welcome!
@ScriptCodec
@ScriptCodec 2 месяца назад
@@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
@ScriptCodec
@ScriptCodec 2 месяца назад
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.
@codegenix
@codegenix 2 месяца назад
You are very welcome!
@dedanmsafari8213
@dedanmsafari8213 Месяц назад
i enjoyed this one ..more so the structure and typings and indepth analysis
@codegenix
@codegenix Месяц назад
I'm so glad that you liked it🙏
@GauravKumar-ue7nz
@GauravKumar-ue7nz 2 месяца назад
Thank you
@codegenix
@codegenix 2 месяца назад
You're welcome
@ahmadullahnikzad2850
@ahmadullahnikzad2850 5 месяцев назад
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.
@codegenix
@codegenix 5 месяцев назад
You are most welcome my dear friend❤️ You really made my day! I'm so happy right now. I'm glad that it helped.
@ahmadullahnikzad2850
@ahmadullahnikzad2850 5 месяцев назад
@@codegenix once more thank you very much
@codegenix
@codegenix 5 месяцев назад
Thank you too for your positive energy!!
@vovan2510
@vovan2510 Месяц назад
After watching 20 mins of the video, I hit the subcribe button with no thinking
@codegenix
@codegenix Месяц назад
I'm really glad that you liked it. Thanks for your sub
@IB0Mber
@IB0Mber 6 месяцев назад
Hey man, awsome tutorial! hope you keep covering tanstack libraries. +1 sub ❤
@codegenix
@codegenix 6 месяцев назад
Thanks for the sub! More to come❤️
@sashaBejenari
@sashaBejenari 2 месяца назад
Thank you!
@codegenix
@codegenix 2 месяца назад
You're welcome!
@AkashChauhan-cs3ep
@AkashChauhan-cs3ep 5 месяцев назад
Love watching tutorials that uses VIM 🎉
@codegenix
@codegenix 5 месяцев назад
Are you a vim enthusiast too?
@ardianhotii
@ardianhotii 7 месяцев назад
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
@codegenix
@codegenix 7 месяцев назад
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
@abdkelanii
@abdkelanii 4 месяца назад
Helpful video, Thank you.
@codegenix
@codegenix 4 месяца назад
Glad it was helpful!
@regilearn2138
@regilearn2138 3 дня назад
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
@mehmetbagci3447
@mehmetbagci3447 5 месяцев назад
thank you for the tutorial. it is really good
@codegenix
@codegenix 5 месяцев назад
Glad it was helpful!
@minajplisa1446
@minajplisa1446 3 месяца назад
nice
@codegenix
@codegenix 2 месяца назад
Thanks
@leviathanxid
@leviathanxid 5 месяцев назад
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
@codegenix
@codegenix 5 месяцев назад
Yes, soon! I'm very glad that you have learned something❤️
@subbulakshmiarun3568
@subbulakshmiarun3568 Месяц назад
Good work
@codegenix
@codegenix Месяц назад
I'm glad🙏
@ricardonacif5426
@ricardonacif5426 5 месяцев назад
Awesome.
@codegenix
@codegenix 5 месяцев назад
Glad you think so!
@jaymahakaal5354
@jaymahakaal5354 6 месяцев назад
firsttime here subscribed.. next framer motion, shadcn, swiper js, from docs topics wise in depth with pratical
@codegenix
@codegenix 6 месяцев назад
Noted! Thanks for your subscription❤️
@PrMovies0
@PrMovies0 4 месяца назад
​@@codegenix video's?
@user-kp6ig9yl4i
@user-kp6ig9yl4i 5 месяцев назад
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.
@codegenix
@codegenix 5 месяцев назад
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.
@user-kp6ig9yl4i
@user-kp6ig9yl4i 5 месяцев назад
@@codegenix Thanks for the response❤.
@sayedalif8209
@sayedalif8209 5 дней назад
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.
@codegenix
@codegenix 3 дня назад
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
@sayedalif8209
@sayedalif8209 2 дня назад
@@codegenix I meant teaching us with JS and jsx file type on react
@jiM3op
@jiM3op 5 месяцев назад
GREAT! Tanstack Table next please!
@codegenix
@codegenix 5 месяцев назад
I'm really in love with tanstack projects! Sure my friend!
@denisrotaru1860
@denisrotaru1860 6 месяцев назад
Thank you for tutorial :) Could you tell which extension you used in the video to view JSON in the browser?
@codegenix
@codegenix 6 месяцев назад
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.
@webophir
@webophir Месяц назад
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?
@codegenix
@codegenix Месяц назад
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.
@unknown-oc6vj
@unknown-oc6vj 7 месяцев назад
i loved this video. Can you pleases create a project which contain graphql,rtkquery and nextjs from basics to advance with authentication.
@codegenix
@codegenix 7 месяцев назад
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🙏
@unknown-oc6vj
@unknown-oc6vj 7 месяцев назад
can you provide your discord link or insta? @@codegenix
@codegenix
@codegenix 7 месяцев назад
I don't have any of them my dear friend. Why do you ask?
@lucasfranzolin
@lucasfranzolin Месяц назад
React Query!!
@aminrezaei
@aminrezaei Месяц назад
Awli bood. NICE
@codegenix
@codegenix Месяц назад
Fadaye shoma merci😅❤️
@oetsgerben
@oetsgerben 18 дней назад
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 ;)
@codegenix
@codegenix 18 дней назад
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.
@acloudonthebluestsky9687
@acloudonthebluestsky9687 Месяц назад
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
@codegenix
@codegenix Месяц назад
Glad I could help🙏
@shendrong3695
@shendrong3695 6 месяцев назад
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.
@codegenix
@codegenix 6 месяцев назад
Thank you very much for your encouraging comment. I definitely have plans for these concepts in the future.
@shendrong3695
@shendrong3695 6 месяцев назад
@@codegenix thanks, using multiple dependencies that share data is really challenging for me, and typescript error really painful
@codegenix
@codegenix 6 месяцев назад
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.
@shendrong3695
@shendrong3695 6 месяцев назад
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
@codegenix
@codegenix 6 месяцев назад
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.
@nhantrong7688
@nhantrong7688 3 месяца назад
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
@codegenix
@codegenix 3 месяца назад
It is not a big deal. I suppose it is a bug caused by the json-server itself.
@user-ll4qy6cg9i
@user-ll4qy6cg9i Месяц назад
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.
@codegenix
@codegenix Месяц назад
@user-ll4qy6cg9i Would you write your code here? the unique key error part
@user-ll4qy6cg9i
@user-ll4qy6cg9i Месяц назад
What would be the difference to invalidateQueries in onSuccess vs onSettled?
@codegenix
@codegenix Месяц назад
Both of them do the same. Invalidating on onSuccess callback is more readable to developers that many you of just mentioned.
@thearong_5853
@thearong_5853 Месяц назад
for pagination when user refresh page it redirect to first page or not sir?
@codegenix
@codegenix Месяц назад
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
@valeriakan6474
@valeriakan6474 5 месяцев назад
why I see error "key is not defined for li" in console log for first example with Todos, althogh you are defined it ?
@codegenix
@codegenix 5 месяцев назад
Would specify the exact time on the video?
@user-jo8gq9nj2q
@user-jo8gq9nj2q 4 месяца назад
can you create video about tanstack router for us ? thats amazing type safe router and i cnt find any complete free course about that !
@codegenix
@codegenix 4 месяца назад
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.
@minhtranquang9598
@minhtranquang9598 6 месяцев назад
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.
@codegenix
@codegenix 6 месяцев назад
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.
@minhtranquang9598
@minhtranquang9598 6 месяцев назад
​ @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?
@codegenix
@codegenix 6 месяцев назад
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.
@minhtranquang9598
@minhtranquang9598 6 месяцев назад
@@codegenix i love this answer, have a good day !
@codelivewithme
@codelivewithme 5 месяцев назад
cool walk through but what about data filtering will you teach more about that soon
@codegenix
@codegenix 5 месяцев назад
Thanks my friend. What do you mean by "data filtering"?
@someonenotlikeyou
@someonenotlikeyou 6 месяцев назад
45:20 can someone please explain why we are invalidating both list and single item, isn't invalidating single item enough??
@codegenix
@codegenix 6 месяцев назад
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.
@someonenotlikeyou
@someonenotlikeyou 6 месяцев назад
@@codegenix Thank you I understand now and it is a great video, I learned a lot ❤
@codegenix
@codegenix 6 месяцев назад
I'm glad that you learned something. It means a world to me❤️
@nawazishali274
@nawazishali274 5 месяцев назад
Can you tell me useQuery on success method deprecated and what's its alternative now?
@codegenix
@codegenix 5 месяцев назад
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]);
@nawazishali274
@nawazishali274 5 месяцев назад
@@codegenix thanks
@codegenix
@codegenix 5 месяцев назад
Your welcome❤️
@kasrashoonam
@kasrashoonam 2 месяца назад
thank u brother but whats the theme you're using?
@codegenix
@codegenix 2 месяца назад
I'm glad you liked it. I am using "JetbrainsMono Nerd Font" and the theme is Dracula.
@keshavgupta6549
@keshavgupta6549 7 месяцев назад
Hey bro thank you for this 🙏. Small request can you make one TODO same using SWR stale-while-revalidate.🙏 🙏🙏🙏
@codegenix
@codegenix 7 месяцев назад
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.
@keshavgupta6549
@keshavgupta6549 7 месяцев назад
@@codegenix Hey Please Next week SWR TODO tutorial🙂
@codegenix
@codegenix 7 месяцев назад
Sure my friend
@codegenix
@codegenix 7 месяцев назад
Can I ask why are you insisting on SWR? Isn't tanstack a better option?
@keshavgupta6549
@keshavgupta6549 7 месяцев назад
@@codegenix my company uses it and i am having hard time understanding SWR 🙏
@mihaichildesco8276
@mihaichildesco8276 5 месяцев назад
what font and theme do you use in your editor?
@codegenix
@codegenix 5 месяцев назад
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.
@sathvikguntuka218
@sathvikguntuka218 Месяц назад
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
@codegenix
@codegenix Месяц назад
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.
@sathvikguntuka218
@sathvikguntuka218 Месяц назад
@@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
@codegenix
@codegenix Месяц назад
@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)
@sathvikguntuka218
@sathvikguntuka218 Месяц назад
@@codegenixthank you for your valuable explanation on my doubts I appreciate it Sir
@arslanshah7472
@arslanshah7472 11 дней назад
which commond we use for run backend
@codegenix
@codegenix 11 дней назад
npm run start
@satishksharma
@satishksharma 6 месяцев назад
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.
@codegenix
@codegenix 6 месяцев назад
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.
@satishksharma
@satishksharma 6 месяцев назад
@@codegenix Thank you.
@bangunny
@bangunny 5 месяцев назад
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 ? 🤗🤗
@codegenix
@codegenix 5 месяцев назад
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.
@gabbusaii3375
@gabbusaii3375 20 дней назад
im a beginner at this so im sorry if it sounds stupid but how can I run the fake server?
@codegenix
@codegenix 20 дней назад
@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.
@gabbusaii3375
@gabbusaii3375 20 дней назад
@@codegenix thank you so much for responding!! It's working great now!
@codegenix
@codegenix 20 дней назад
@gabbusaii3375 Your welcome my dear friend. I wish you the bests
@adamseekerfan12
@adamseekerfan12 5 месяцев назад
please upload tanstack router tourtorial beginers full course with simple example from scrach
@codegenix
@codegenix 5 месяцев назад
Sure my friend. The tanstack products are amazing and I am working on new courses
@adamseekerfan12
@adamseekerfan12 5 месяцев назад
@@codegenix please provide date i have to use in my project our boilerplate has dependency of tanstak router
@codegenix
@codegenix 5 месяцев назад
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.
@onfeet_
@onfeet_ 4 месяца назад
up...waiting for that too
@kirillzlobin7135
@kirillzlobin7135 4 месяца назад
16:22 But when do we want to show ReactQueryDevtools?
@codegenix
@codegenix 4 месяца назад
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.
@How2Forex
@How2Forex 6 месяцев назад
using callback like onsuccess is removed in latest version
@codegenix
@codegenix 6 месяцев назад
Thanks for your comment my dear friend. Callbacks are removed from queries not mutations.
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
Hey can you please create a tutorial on SWR please.
@codegenix
@codegenix 7 месяцев назад
Hi my dear friend. I'm currently working on an SWR tutorial as you and many other have requested.
@codegenix
@codegenix 7 месяцев назад
Can I ask why are you insisting on SWR? Isn't tanstack a better option?
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
​@@codegenixI found that Zotai Recoil and Swr are mostly used in NextJS open source projects.
@codegenix
@codegenix 7 месяцев назад
Yes you are right. Swr is developed by vercel and because of that it is very recommended to be used in nextjs projects
@its_amiirr9319
@its_amiirr9319 2 месяца назад
Where are you from bro? The accent is very Familiar
@codegenix
@codegenix 2 месяца назад
I'm persian bro
@ShasHamood
@ShasHamood 2 месяца назад
Please we want to explain zustand with a practical application to it
@codegenix
@codegenix 2 месяца назад
Definitely! I am working on a full Zustand course currently.
@nitheshkumar.g
@nitheshkumar.g 2 месяца назад
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 ?
@codegenix
@codegenix 2 месяца назад
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.
@kirillzlobin7135
@kirillzlobin7135 4 месяца назад
My bookmark 46:27
@draylegend
@draylegend 2 месяца назад
don't use `.find(entity => entity.id === 'some-id')`. Use `Map` instead
@codegenix
@codegenix 2 месяца назад
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!
@user-jo8gq9nj2q
@user-jo8gq9nj2q 6 месяцев назад
kheili khafan dmt grm
@codegenix
@codegenix 6 месяцев назад
Mokhlesam🙏😅
@CURIOSITYcapital
@CURIOSITYcapital 7 месяцев назад
How many people still using react
@codegenix
@codegenix 7 месяцев назад
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.
@CURIOSITYcapital
@CURIOSITYcapital 7 месяцев назад
@@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 😂😂😂
@codegenix
@codegenix 7 месяцев назад
I love to try vue. How do you compare it with angular?
@CURIOSITYcapital
@CURIOSITYcapital 7 месяцев назад
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..
@CURIOSITYcapital
@CURIOSITYcapital 7 месяцев назад
Angular only thing i like is signals...not a fan not a fan...
@andrewkosenko2757
@andrewkosenko2757 6 месяцев назад
For those watching this: Enable x1.5 speed right away. You will thank me later :)
@codegenix
@codegenix 6 месяцев назад
Yeah you are right, my English is terrible😅
@andrewkosenko2757
@andrewkosenko2757 6 месяцев назад
@@codegenix your english is fine, it’s just a bit slow-paced. Nice video though! Thank you!
@codegenix
@codegenix 6 месяцев назад
Thanks my dear friend. I will consider your suggestion for my next videos. I just wanted the video to be understandable for everyone.
@2kceltics
@2kceltics 3 месяца назад
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...
@codegenix
@codegenix 3 месяца назад
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
@O-02
@O-02 6 месяцев назад
you do so many unnecessary things make this course really unpleasant to follow, sadly its the only up to date course
@codegenix
@codegenix 6 месяцев назад
Hi my dear friend. I really appreciate your comment. But can you mention the problems that you are encountering?
@biondohod
@biondohod 3 месяца назад
great tutorial thx. really helpful. may i ask u what OS do u use?
@codegenix
@codegenix 3 месяца назад
Your welcome my dear friend. I am using windows 11.
@ramromanxey1295
@ramromanxey1295 6 месяцев назад
nice
@codegenix
@codegenix 6 месяцев назад
Thanks❤️🙏
Далее
Хотите поиграть в такую?😄
00:16
Просмотров 827 тыс.
React Query tips from the maintainer @tkDodo
16:19
Просмотров 21 тыс.
The Story of React Query
8:55
Просмотров 93 тыс.
Learn React Query In 50 Minutes
51:09
Просмотров 276 тыс.
Common Mistakes and Advanced Typescript Techniques
10:49
Основы react-query за 30 минут
28:11
Просмотров 2,6 тыс.
React Query - Complete Tutorial
18:57
Просмотров 106 тыс.
How React Query Won
34:52
Просмотров 67 тыс.
React Query. Быстрый старт
30:09
Просмотров 48 тыс.