React Query Tutorial V5 - Full Tanstack Query Tutorial for Beginners

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 284

  • @codegenix
    @codegenix  7 місяців тому +10

    Between SWR library, React Query or other server state management libraries, what is your choice and why?

  • @HassanAli-uk6hi
    @HassanAli-uk6hi 4 місяці тому +12

    If you dont understand the lecture , I will suggest you to listen it twice .Then you will be very thankful to this man.

    • @codegenix
      @codegenix  4 місяці тому +2

      I'm glad that it was helpful to you

    • @pranoygowda4595
      @pranoygowda4595 3 місяці тому +1

      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

  • @madeline-z
    @madeline-z 4 місяці тому +11

    OMG this is the BEST TUTORIAL in UA-cam of React Query and updated. New Sub you're gooooood. You have solved all the doubts I had

    • @codegenix
      @codegenix  4 місяці тому +3

      You cannot imagine how you made me happy with your amazing feedback. You are very welcome😍

  • @roninspect4357
    @roninspect4357 5 місяців тому +10

    it is by far the best tutorial on react query on the internet.

    • @codegenix
      @codegenix  5 місяців тому +2

      I'm really glad that you liked it

    • @roninspect4357
      @roninspect4357 5 місяців тому +1

      @@codegenix A full project with React-Query & Zustand would be incredible

  • @RNanthuKishor
    @RNanthuKishor 11 місяців тому +15

    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  11 місяців тому +3

      My dear friend, thank you very much for your positive energy. You made my day❤️🙏

  • @Szchmausser
    @Szchmausser 4 місяці тому +2

    Most complete tutorial on entire UA-cam... I saw about 10 of them, and IMHO this is one of the best. Important details are told here...

    • @codegenix
      @codegenix  4 місяці тому

      You cannot imagine how much you made me happy. I really appreciate your kindness

  • @lombord69
    @lombord69 8 місяців тому +8

    The greatest explanation of the react-query period.

    • @codegenix
      @codegenix  8 місяців тому +1

      Thanks my friend, you made my day!

  • @Md.MahamudulHasan-zp9qq
    @Md.MahamudulHasan-zp9qq 12 днів тому

    Best crash course on TanStack Query. Thanks man!

  • @pranoygowda4595
    @pranoygowda4595 3 місяці тому +1

    @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

    • @codegenix
      @codegenix  3 місяці тому +1

      Love you bro. You made my day. I'm really glad you liked it❤️

  • @НиколаМихайлов-р5ю
    @НиколаМихайлов-р5ю 3 місяці тому +1

    Absolutely incredible tutorial with relevant examples, thank you my man!

  • @g10-you
    @g10-you 6 місяців тому +1

    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  6 місяців тому

      I'm so glad you liked it. Your welcome

  • @VigilVarghese-q8l
    @VigilVarghese-q8l 8 місяців тому +2

    This was a wonderful tutorial. Thank you! Please do more.

    • @codegenix
      @codegenix  8 місяців тому

      Thank you! Will do!

  • @devsami
    @devsami 10 місяців тому +4

    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 UA-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
      @codegenix  10 місяців тому +1

      I really appreciate your comment my dear friend. More on tanstack products!

  • @WIBEDRILLMusic
    @WIBEDRILLMusic 4 місяці тому +1

    Really good tutorial. I loved that cache trick at the end. Keep up the good work buddy.

  • @مسلمموحد-ض3ش
    @مسلمموحد-ض3ش 7 місяців тому +1

    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  7 місяців тому

      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

  • @funzoned9008
    @funzoned9008 11 місяців тому +4

    Thank you for providing a detailed tutorial on what and how about the tanstack query.

    • @codegenix
      @codegenix  11 місяців тому

      Your welcome my dear friend❤️. I'm glad that it helped🙏

  • @lalitsingh-de1md
    @lalitsingh-de1md 5 місяців тому

    thanks, Genix, in one video you cover all the concepts of tanstack query , keep making this valuable content

    • @codegenix
      @codegenix  5 місяців тому

      You made my day bro. I'm so glad you liked it🙏❤️

  • @ahmadullahnikzad2850
    @ahmadullahnikzad2850 11 місяців тому +1

    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  11 місяців тому

      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 11 місяців тому

      @@codegenix once more thank you very much

    • @codegenix
      @codegenix  11 місяців тому

      Thank you too for your positive energy!!

  • @nmrisrl11
    @nmrisrl11 3 місяці тому

    Thanks for this tutorial bro! You deserve more subscribers and btw. I love your accent. Keep it up!

    • @codegenix
      @codegenix  3 місяці тому

      I'm so glad that you liked it. I really appreciate your kindness🙏❤️

  • @SyedAkhtar-c5v
    @SyedAkhtar-c5v 4 місяці тому

    this is the best ever tutorial on tan stack query. Thank you

    • @codegenix
      @codegenix  4 місяці тому

      I'm so glad you liked it🙏

  • @ygvanz
    @ygvanz 2 місяці тому +1

    Excellent explanations and examples. You earned my sub.

    • @codegenix
      @codegenix  2 місяці тому

      I really appreciate it bro

  • @moustaphaotf
    @moustaphaotf 2 місяці тому

    I really like your explanation, very clear and simplified ^^

    • @codegenix
      @codegenix  2 місяці тому +1

      Glad to hear that!

    • @moustaphaotf
      @moustaphaotf 2 місяці тому

      @@codegenix I would appreciate if you made a tutorial on SSR Components

  • @FredrikStrömberg-q5s
    @FredrikStrömberg-q5s 10 місяців тому +3

    Such a great tutorial and with version 5😍 thank u!

    • @codegenix
      @codegenix  10 місяців тому

      You're welcome 😊

  • @Ranjeetvishwakarma-72
    @Ranjeetvishwakarma-72 3 місяці тому +1

    So Elegant so beautyful Just looking like a WOW course
    Amazing Content & Course

    • @codegenix
      @codegenix  3 місяці тому +1

      You made my day. I'm so glad you liked it

  • @ScriptCodec
    @ScriptCodec 8 місяців тому +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  8 місяців тому +1

      You are very welcome!

    • @ScriptCodec
      @ScriptCodec 8 місяців тому +1

      @@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 8 місяців тому

      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  7 місяців тому

      You are very welcome!

  • @someonenotlikeyou
    @someonenotlikeyou 11 місяців тому +2

    45:20 can someone please explain why we are invalidating both list and single item, isn't invalidating single item enough??

    • @codegenix
      @codegenix  11 місяців тому +1

      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 11 місяців тому +1

      @@codegenix Thank you I understand now and it is a great video, I learned a lot ❤

    • @codegenix
      @codegenix  11 місяців тому +1

      I'm glad that you learned something. It means a world to me❤️

  • @mahendranath2504
    @mahendranath2504 9 місяців тому +2

    Wow, thanks for sharing the knowledge, liked and subscribed

    • @codegenix
      @codegenix  9 місяців тому

      Thanks for the sub!

  • @pizaariaaa5909
    @pizaariaaa5909 11 місяців тому +2

    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  11 місяців тому +1

      You're very welcome! I hope you have learned something. You made my day!❤️❤️

  • @hyp3ri0nn
    @hyp3ri0nn 4 місяці тому

    you deserve much more subscribers, thanks btw, great explanation!

    • @codegenix
      @codegenix  4 місяці тому

      Love you bro❤️🙏

  • @bake-holmes
    @bake-holmes 7 місяців тому

    After watching 20 mins of the video, I hit the subcribe button with no thinking

    • @codegenix
      @codegenix  7 місяців тому +1

      I'm really glad that you liked it. Thanks for your sub

  • @bilal5488
    @bilal5488 7 місяців тому +1

    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  7 місяців тому

      I'm so Glad to hear that! Welcome aboard!

  • @andriikuznietsov
    @andriikuznietsov 8 місяців тому +2

    What a great tutorial! Thank you!

    • @codegenix
      @codegenix  8 місяців тому

      Glad it was helpful!

  • @GabruGiggles
    @GabruGiggles 4 дні тому

    @codegenix Amazing tutorial. At around 53 minutes, when you delete a todo, everything works, but in my console, I do see the deleted todo being re-fetched as well, resulting in a 404 because it is not available. I tried searching for ways to avoid tell tanstack query to not fetch it again but still, nothing. Any idea?

  • @RatherBeCancelledThanHandled
    @RatherBeCancelledThanHandled 5 місяців тому +1

    I love your tutorials , thanks for sharing 👍

    • @codegenix
      @codegenix  5 місяців тому +1

      Thanks for watching!

  • @valeriakan6474
    @valeriakan6474 10 місяців тому +1

    Thank you for your tutorial, I enjoyed your samples, can't wait to use it in my next project 🙃

    • @codegenix
      @codegenix  10 місяців тому

      You are so welcome!

  • @webophir
    @webophir 7 місяців тому

    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  7 місяців тому

      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.

  • @electrofact1656
    @electrofact1656 7 місяців тому

    Loved your content,
    Best of luck dear

    • @codegenix
      @codegenix  7 місяців тому

      I'm glad you liked it!

  • @FredrikStrömberg-q5s
    @FredrikStrömberg-q5s 6 місяців тому +1

    What would be the difference to invalidateQueries in onSuccess vs onSettled?

    • @codegenix
      @codegenix  6 місяців тому +1

      Both of them do the same. Invalidating on onSuccess callback is more readable to developers that many you of just mentioned.

  • @pineapplejuice9814
    @pineapplejuice9814 7 місяців тому

    awesome video man !!! You are a great teacher . Godspeed !

    • @codegenix
      @codegenix  7 місяців тому

      I appreciate that!

  • @janemoroz554
    @janemoroz554 5 місяців тому +1

    Awesome tutorial, thank you!

    • @codegenix
      @codegenix  5 місяців тому

      You are very welcome

  • @zeddscarlxrd4331
    @zeddscarlxrd4331 10 місяців тому +1

    Clear and clean ❤ thank you

    • @codegenix
      @codegenix  10 місяців тому

      Glad I could help❤️

  • @josyafritudemedia551
    @josyafritudemedia551 2 місяці тому +1

    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 😢

    • @codegenix
      @codegenix  2 місяці тому

      I'm really glad that you liked it. I'm definitely gonna consider it

  • @FredrikStrömberg-q5s
    @FredrikStrömberg-q5s 6 місяців тому +1

    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  6 місяців тому

      @user-ll4qy6cg9i Would you write your code here? the unique key error part

  • @candyman3537
    @candyman3537 3 місяці тому +1

    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?

    • @codegenix
      @codegenix  3 місяці тому

      @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
      @candyman3537 3 місяці тому +1

      @@codegenix ok,then what if we want to call query manually. For example,after user click a button?

    • @codegenix
      @codegenix  3 місяці тому

      @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.

  • @hardikganatra2453
    @hardikganatra2453 11 місяців тому

    This is by for most amazing video on Tanstack Query , Thanks for the video man , God bless you

    • @codegenix
      @codegenix  11 місяців тому

      Glad it was helpful! You made my day❤️

  • @nawazishali274
    @nawazishali274 11 місяців тому +1

    Can you tell me useQuery on success method deprecated and what's its alternative now?

    • @codegenix
      @codegenix  11 місяців тому +1

      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 11 місяців тому +1

      @@codegenix thanks

    • @codegenix
      @codegenix  11 місяців тому

      Your welcome❤️

  • @jaymahakaal5354
    @jaymahakaal5354 11 місяців тому +3

    firsttime here subscribed.. next framer motion, shadcn, swiper js, from docs topics wise in depth with pratical

    • @codegenix
      @codegenix  11 місяців тому +1

      Noted! Thanks for your subscription❤️

    • @PrMovies0
      @PrMovies0 9 місяців тому +1

      ​@@codegenix video's?

  • @samiulkarim6375
    @samiulkarim6375 3 місяці тому +1

    This video is useful. I also like your vs code setup. Can you make a separate video for your vs code setup?

    • @codegenix
      @codegenix  3 місяці тому

      Really loved your suggestion. Sure I'm gonna create a video for it bro

  • @arslanshah7472
    @arslanshah7472 5 місяців тому +1

    which commond we use for run backend

  • @dedanmsafari8213
    @dedanmsafari8213 6 місяців тому

    i enjoyed this one ..more so the structure and typings and indepth analysis

    • @codegenix
      @codegenix  6 місяців тому

      I'm so glad that you liked it🙏

  • @oetsgerben
    @oetsgerben 6 місяців тому +1

    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  6 місяців тому +2

      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.

    • @devalirzayev
      @devalirzayev 4 місяці тому

      ​@@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?

  • @valeriakan6474
    @valeriakan6474 10 місяців тому

    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  10 місяців тому

      Would specify the exact time on the video?

  • @lukehightower4198
    @lukehightower4198 4 місяці тому +1

    very helpful, much appreciated

  • @kirillzlobin7135
    @kirillzlobin7135 10 місяців тому

    16:22 But when do we want to show ReactQueryDevtools?

    • @codegenix
      @codegenix  10 місяців тому

      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.

  • @gabbusaii3375
    @gabbusaii3375 6 місяців тому +1

    im a beginner at this so im sorry if it sounds stupid but how can I run the fake server?

    • @codegenix
      @codegenix  6 місяців тому +1

      @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 6 місяців тому +1

      @@codegenix thank you so much for responding!! It's working great now!

    • @codegenix
      @codegenix  6 місяців тому

      @gabbusaii3375 Your welcome my dear friend. I wish you the bests

  • @sayedalif8209
    @sayedalif8209 5 місяців тому +1

    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  5 місяців тому

      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 5 місяців тому

      @@codegenix I meant teaching us with JS and jsx file type on react

  • @AkashChauhan-cs3ep
    @AkashChauhan-cs3ep 10 місяців тому

    Love watching tutorials that uses VIM 🎉

    • @codegenix
      @codegenix  10 місяців тому

      Are you a vim enthusiast too?

  • @denisrotaru1860
    @denisrotaru1860 Рік тому +1

    Thank you for tutorial :)
    Could you tell which extension you used in the video to view JSON in the browser?

    • @codegenix
      @codegenix  Рік тому +1

      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.

  • @KommuAnjaneyulu-o6n
    @KommuAnjaneyulu-o6n 11 місяців тому +1

    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  11 місяців тому +2

      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.

    • @KommuAnjaneyulu-o6n
      @KommuAnjaneyulu-o6n 11 місяців тому

      @@codegenix
      Thanks for the response❤.

  • @azil2024
    @azil2024 8 місяців тому

    Thank you, excellent explanation, pretty clear

    • @codegenix
      @codegenix  8 місяців тому

      Glad you liked it

  • @nhantrong7688
    @nhantrong7688 8 місяців тому

    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  8 місяців тому

      It is not a big deal. I suppose it is a bug caused by the json-server itself.

  • @shendrong3695
    @shendrong3695 Рік тому +2

    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  Рік тому

      Thank you very much for your encouraging comment. I definitely have plans for these concepts in the future.

    • @shendrong3695
      @shendrong3695 Рік тому

      @@codegenix thanks, using multiple dependencies that share data is really challenging for me, and typescript error really painful

    • @codegenix
      @codegenix  Рік тому

      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 Рік тому

      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  Рік тому

      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.

  • @thearong_5853
    @thearong_5853 7 місяців тому

    for pagination when user refresh page it redirect to first page or not sir?

    • @codegenix
      @codegenix  7 місяців тому

      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

  • @minhtranquang9598
    @minhtranquang9598 Рік тому

    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  Рік тому +1

      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 Рік тому

      ​ @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  Рік тому +1

      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 Рік тому +1

      @@codegenix i love this answer, have a good day !

  • @ardianhotii
    @ardianhotii Рік тому +2

    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  Рік тому

      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

  • @regilearn2138
    @regilearn2138 5 місяців тому +2

    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

  • @sathvikguntuka218
    @sathvikguntuka218 6 місяців тому +1

    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  6 місяців тому

      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 6 місяців тому +1

      @@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  6 місяців тому

      @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 6 місяців тому

      @@codegenixthank you for your valuable explanation on my doubts
      I appreciate it Sir

  • @pankajbhadane
    @pankajbhadane 5 місяців тому +1

    damn good video !!

    • @codegenix
      @codegenix  5 місяців тому

      I'm so glad you liked it

  • @unknown-oc6vj
    @unknown-oc6vj Рік тому +3

    i loved this video. Can you pleases create a project which contain graphql,rtkquery and nextjs from basics to advance with authentication.

    • @codegenix
      @codegenix  Рік тому +2

      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 Рік тому

      can you provide your discord link or insta?
      @@codegenix

    • @codegenix
      @codegenix  Рік тому

      I don't have any of them my dear friend. Why do you ask?

  • @neoTriny
    @neoTriny 4 місяці тому +1

    very nice video

  • @kasrashoonam
    @kasrashoonam 7 місяців тому

    thank u brother but whats the theme you're using?

    • @codegenix
      @codegenix  7 місяців тому

      I'm glad you liked it. I am using "JetbrainsMono Nerd Font" and the theme is Dracula.

  • @mihaichildesco8276
    @mihaichildesco8276 11 місяців тому

    what font and theme do you use in your editor?

    • @codegenix
      @codegenix  11 місяців тому +1

      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.

  • @abdkelanii
    @abdkelanii 9 місяців тому

    Helpful video, Thank you.

    • @codegenix
      @codegenix  9 місяців тому +1

      Glad it was helpful!

  • @toleenhajkassem6154
    @toleenhajkassem6154 4 місяці тому +1

    Thanks a lot !!

    • @codegenix
      @codegenix  4 місяці тому

      You're very welcome

  • @mehmetbagci3447
    @mehmetbagci3447 10 місяців тому

    thank you for the tutorial. it is really good

    • @codegenix
      @codegenix  10 місяців тому +1

      Glad it was helpful!

  • @jiM3op
    @jiM3op 11 місяців тому

    GREAT! Tanstack Table next please!

    • @codegenix
      @codegenix  11 місяців тому

      I'm really in love with tanstack projects! Sure my friend!

  • @leviathanxid
    @leviathanxid 11 місяців тому

    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  11 місяців тому

      Yes, soon! I'm very glad that you have learned something❤️

  • @aminrezaei
    @aminrezaei 7 місяців тому

    Awli bood. NICE

    • @codegenix
      @codegenix  7 місяців тому

      Fadaye shoma merci😅❤️

  • @IB0Mber
    @IB0Mber Рік тому +1

    Hey man, awsome tutorial! hope you keep covering tanstack libraries.
    +1 sub ❤

    • @codegenix
      @codegenix  Рік тому

      Thanks for the sub! More to come❤️

  • @ahmedsamir-m8s
    @ahmedsamir-m8s Рік тому

    using callback like onsuccess is removed in latest version

    • @codegenix
      @codegenix  Рік тому +1

      Thanks for your comment my dear friend. Callbacks are removed from queries not mutations.

  • @GauravKumar-ue7nz
    @GauravKumar-ue7nz 8 місяців тому +1

    Thank you

  • @ricardonacif5426
    @ricardonacif5426 10 місяців тому +1

    Awesome.

    • @codegenix
      @codegenix  10 місяців тому

      Glad you think so!

  • @subbulakshmiarun3568
    @subbulakshmiarun3568 7 місяців тому

    Good work

  • @reydelocon629
    @reydelocon629 5 місяців тому +1

    can i still learn this?

    • @codegenix
      @codegenix  5 місяців тому

      @reydelocon629 Yes, sure. The TanStack Query library hasn't had any major updates since this tutorial was released.

  • @dulnethbernard9638
    @dulnethbernard9638 7 місяців тому

    learned a lot thank you

    • @codegenix
      @codegenix  7 місяців тому

      I'm so glad! you're welcome

  • @bangunny
    @bangunny 11 місяців тому

    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  11 місяців тому

      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.

  • @nitheshkumar.g
    @nitheshkumar.g 7 місяців тому +1

    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  7 місяців тому

      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.

  • @sashaBejenari
    @sashaBejenari 8 місяців тому

    Thank you!

  • @fahimhossen7842
    @fahimhossen7842 7 місяців тому

    Thank you.

  • @acloudonthebluestsky9687
    @acloudonthebluestsky9687 6 місяців тому +1

    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  6 місяців тому

      Glad I could help🙏

  • @codelivewithme
    @codelivewithme 10 місяців тому

    cool walk through but what about data filtering will you teach more about that soon

    • @codegenix
      @codegenix  10 місяців тому

      Thanks my friend. What do you mean by "data filtering"?

  • @mohammadzeyghami
    @mohammadzeyghami 9 місяців тому

    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  9 місяців тому

      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.

  • @minajplisa1446
    @minajplisa1446 8 місяців тому

    nice

  • @satishksharma
    @satishksharma Рік тому

    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  Рік тому

      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 Рік тому

      @@codegenix Thank you.

  • @Donchandu_667
    @Donchandu_667 10 місяців тому +1

    please upload tanstack router tourtorial beginers full course with simple example from scrach

    • @codegenix
      @codegenix  10 місяців тому +1

      Sure my friend. The tanstack products are amazing and I am working on new courses

    • @Donchandu_667
      @Donchandu_667 10 місяців тому

      @@codegenix please provide date i have to use in my project our boilerplate has dependency of tanstak router

    • @codegenix
      @codegenix  10 місяців тому

      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_ 10 місяців тому +1

      up...waiting for that too

  • @muratasarslan2359
    @muratasarslan2359 4 місяці тому +1

    Lazy query ?

    • @codegenix
      @codegenix  4 місяці тому

      @muratasarslan2359 Would you explain more? What do you want to achieve exactly?

  • @its_amiirr9319
    @its_amiirr9319 7 місяців тому +1

    Where are you from bro? The accent is very Familiar

    • @codegenix
      @codegenix  7 місяців тому +1

      I'm persian bro

  • @keshavgupta6549
    @keshavgupta6549 Рік тому

    Hey bro thank you for this 🙏.
    Small request can you make one TODO same using SWR
    stale-while-revalidate.🙏
    🙏🙏🙏

    • @codegenix
      @codegenix  Рік тому +1

      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 Рік тому

      @@codegenix Hey Please Next week SWR TODO tutorial🙂

    • @codegenix
      @codegenix  Рік тому

      Sure my friend

    • @codegenix
      @codegenix  Рік тому

      Can I ask why are you insisting on SWR? Isn't tanstack a better option?

    • @keshavgupta6549
      @keshavgupta6549 Рік тому

      @@codegenix my company uses it and i am having hard time understanding SWR 🙏

  • @ShasHamood
    @ShasHamood 7 місяців тому

    Please we want to explain zustand with a practical application to it

    • @codegenix
      @codegenix  7 місяців тому

      Definitely! I am working on a full Zustand course currently.

  • @prashlovessamosa
    @prashlovessamosa Рік тому

    Hey can you please create a tutorial on SWR please.

    • @codegenix
      @codegenix  Рік тому

      Hi my dear friend. I'm currently working on an SWR tutorial as you and many other have requested.

    • @codegenix
      @codegenix  Рік тому

      Can I ask why are you insisting on SWR? Isn't tanstack a better option?

    • @prashlovessamosa
      @prashlovessamosa Рік тому

      ​@@codegenixI found that Zotai Recoil and Swr are mostly used in NextJS open source projects.

    • @codegenix
      @codegenix  Рік тому

      Yes you are right. Swr is developed by vercel and because of that it is very recommended to be used in nextjs projects