React Query in 40 Minutes - Everything You Need to Know About Tanstack React Query

Ғылым және технология

Hey everyone, in this video I will be going over all of the topics I feel are really important to know when learning react query.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
Timestamps:
00:00 | Intro
01:10 | Installing the packages
02:30 | Defining the Provider
05:16 | useQuery Hook
11:16 | useMutation Hook
19:08 | Cache Explanation
30:54 | Cache Time
33:20 | Dependant Queries
34:46 | Refetching on Focus
36:40 | Potential Bugs
..........
♬ MUSIC ♬
Artist: tubebackr
Track: Chill With Me
@tubebackr
hypeddit.com/tubebackr/chillwithme-1
.............
#reactjs #coding

Пікірлер: 82

  • @orashusedmund7675
    @orashusedmund76753 ай бұрын

    thanks Pedro. I've been looking for a good video guide, just getting started with React query. was so happy when i saw yours.

  • @godofwar8262
    @godofwar82623 ай бұрын

    Hey bro add tanstack query to video title for better reach

  • @stephikebudu

    @stephikebudu

    3 ай бұрын

    Yeah not everyone knows its the same thing

  • @centrumsaiyan7623

    @centrumsaiyan7623

    14 күн бұрын

    Seriously haha you need that title

  • @shirazjaf3844
    @shirazjaf38443 ай бұрын

    amazing brother ! have been searching for a proper tutorial and found yours

  • @andrewredican1413
    @andrewredican14133 күн бұрын

    react-query is an amazing library, and great explanation!

  • @lamiaali4519
    @lamiaali45193 ай бұрын

    wow just what I was looking for, thank u for this amazing video.

  • @rin0422
    @rin0422Ай бұрын

    Thank you so much Pedro. I'm really liking your content about React because you explain very clear in your videos.

  • @anmolkharel4433
    @anmolkharel44333 ай бұрын

    i'm new to react and haven't used redux at all, i followed one of your react tutorials and have been using react query since, this video is much appreciated, thanks!

  • @vinaykumarkharwar177
    @vinaykumarkharwar1772 ай бұрын

    This was concise and informative. Thanks!

  • @quentinhall8838
    @quentinhall88383 ай бұрын

    welcome back pedro , your videos are the best

  • @italofsan
    @italofsan3 ай бұрын

    Excelente vídeo meu brother. Deu um overview massa.

  • @tomasburian6550
    @tomasburian6550Ай бұрын

    Great vid. Lots of companies now using this library, very useful.

  • @King_slayer-hd7df
    @King_slayer-hd7df3 ай бұрын

    Thanks for the refresher 👍

  • @bagheldevansh
    @bagheldevansh3 ай бұрын

    thank you so much for this!

  • @shuvoahmed5217
    @shuvoahmed52172 ай бұрын

    clean and informative . make more good video like this on various topic . eg : (react testing)

  • @melkhywong7594
    @melkhywong75943 ай бұрын

    did you read my mind bro? i was searching for this

  • @jatiquep5543
    @jatiquep55433 ай бұрын

    I have been waiting for this

  • @bobsecondbrain9330
    @bobsecondbrain93302 ай бұрын

    Fantastic tutorial!

  • @afamsval
    @afamsval3 ай бұрын

    We want to see more videos on this. 😍 Thank you

  • @sonamohialdin3376
    @sonamohialdin33763 ай бұрын

    Very helpful tutorial thank you

  • @user-hd8tc3lg7l
    @user-hd8tc3lg7lАй бұрын

    It would be great to see your next video about react-query

  • @Goku-zu3rk
    @Goku-zu3rk3 ай бұрын

    Damn yes. Exactly what i searched for!

  • @ramanjaneyuluv479
    @ramanjaneyuluv4792 ай бұрын

    we need more videos of this kind

  • @BugArray
    @BugArray3 ай бұрын

    Awesome content, I might also cover this topic in one of my videos.

  • @adi-ai-007
    @adi-ai-00711 күн бұрын

    Nicely explained

  • @giovanniferreira1706
    @giovanniferreira17063 ай бұрын

    A continuation video using complex searches, passing parameters, and such would be great.

  • @tiny_mystery
    @tiny_mystery3 ай бұрын

    thanks for the tutorial brother,

  • @KaranChauhan-fu6dy
    @KaranChauhan-fu6dy3 ай бұрын

    I just completed it... loved it

  • @codermeloman3030
    @codermeloman30303 ай бұрын

    React Query + Next.js 14 + prefetch query + using prefetched query in server side nested components ... would be amazing video!

  • @aseel1024
    @aseel10242 ай бұрын

    this is the best library to be honest, doing it native will take long time!!

  • @singhramneek3358
    @singhramneek33583 ай бұрын

    How is this even possible? Just Finished your React Query module from react js course and found it bit outdated and here you are.... Just Wow😮

  • @dyarydy6939
    @dyarydy69392 ай бұрын

    Thank you Perdo

  • @jubert2096
    @jubert209617 күн бұрын

    Thanks pedro. Your teaching is awesome. Can you make a video on tanstack react typescript. There are not that much videos on tanstack tables and I’m having lot of errors

  • @JOSEPHEZHAP
    @JOSEPHEZHAP3 ай бұрын

    Please make a video about pagination and advanced react query

  • @bruningoat
    @bruningoatАй бұрын

    it would be cool if you could bring more videos about this topic maybe a project using pagination and infinite scroll as you mentioned

  • @zalaam_0
    @zalaam_03 ай бұрын

    I am not native english speaker but some how i can understand you clearly. Maybe your way of teaching is very good

  • @PedroTechnologies

    @PedroTechnologies

    3 ай бұрын

    Glad to hear that!!

  • @DjSeymur
    @DjSeymur16 күн бұрын

    You should make your intro you spinning in a circle while the music plays "Pedro, Pedro, Pedro, Pedro Techhh" 😁

  • @cholakovit
    @cholakovit2 ай бұрын

    Hi excellent video :) Would you make a video how exactly react query can manage globally state ?

  • @brownboyintokyo7368
    @brownboyintokyo7368Ай бұрын

    Did u try it using with next js 14? When I try to use it with next js 14 and create a custom hook that fetches data from the server using tanstack .... the data seem to load properly but the html content does not appear on the page source... note am using the custom hook in a client component...

  • @waleedsharif618
    @waleedsharif6183 ай бұрын

    One question, when we are using for example Axios and want to test it using react testing library we can mock it. How can we test this react-query ?

  • @k303k
    @k303k3 ай бұрын

    We miss u pedro❤

  • @izunduchukwuemika7915
    @izunduchukwuemika79152 ай бұрын

    thanks pedro🤜

  • @izunduchukwuemika7915

    @izunduchukwuemika7915

    2 ай бұрын

    I really understood it

  • @metalfort1207
    @metalfort12073 ай бұрын

    Thanks I can now flex to my bosses some React Query stuff

  • @favanzzo
    @favanzzo3 ай бұрын

    pedrao, sua opinião sobre a fala do CEO da nvidia?

  • @ValeriiLutiy
    @ValeriiLutiy3 ай бұрын

    ty Pedro, hello from Ukraine 👋

  • @2ameridiem
    @2ameridiem3 ай бұрын

    I have been following your Reactjs course 2023 and there in the react-query tutorial, you mentioned that the queryFn should return the data fetched by the Fetch API, which then will be stored in the variable. Why are we returning a promise in this case?..considering that the json() method returns a promise.

  • @palcherin
    @palcherin3 ай бұрын

    This is great, hey bro.. can you please make a video regarding react-google-maps? I think if you do the video it could help a lot of people wasting time on alot of tutorials that doesn't teach much.

  • @bobkazamakis5169
    @bobkazamakis51692 ай бұрын

    Should I stick to RTK Query when using Redux?

  • @regilearn2138
    @regilearn21383 ай бұрын

    it would be great if you can use typescript with this

  • @abdulazeezonadipe6236
    @abdulazeezonadipe62363 ай бұрын

    Thanks so much, this was superful. I hope you could work on the pagination also, also is this proper { queryKey: ['word', 'status', 'done'] }

  • @nullwizard6335
    @nullwizard63353 ай бұрын

    Thanks for this. I was wondering what is the benefit of using this library over redux? Because I can do pretty much same using redux and more.

  • @zainn7336
    @zainn73363 ай бұрын

    please make video on infinite and pagination in react query plzzz

  • @mohammadshezan
    @mohammadshezan3 ай бұрын

    Awesome, Next time do it with Infinite Scrolling

  • @mehedihassan6904
    @mehedihassan69043 ай бұрын

    make a detailed advance video on react-query please with real backend data

  • @thebocksters2756
    @thebocksters27562 ай бұрын

    16:16 and what is the difference between isLoading and isPending

  • @ilmanmanarulqori5632
    @ilmanmanarulqori56323 ай бұрын

    make another one React Query 🎉

  • @gamingwolf3385
    @gamingwolf33853 ай бұрын

    Pedro , why you don't try svelte/kit

  • @tariqahmed2526
    @tariqahmed25262 ай бұрын

    Plzz make a latest firebase tutorial or app write it will be helpful

  • @gregorysk_lviv
    @gregorysk_lviv18 күн бұрын

    I wonder, what is the name of the extension which shows size of npm lib

  • @dedanmsafari8213

    @dedanmsafari8213

    14 күн бұрын

    its called import cost

  • @emmanuelxs6143
    @emmanuelxs61433 ай бұрын

    Pedro 😊

  • @mihaichildesco8276
    @mihaichildesco82763 ай бұрын

    i dont understand why your code was working and my code not. When you use useQuery for fetching data with id and title i was getting data undefined, after i added isLoading and isError it worked. "In the initial render without isLoading and isError checks, your component tries to map over data, which is undefined, hence causing an error. React doesn't render components with errors, so your component won't be displayed." This was an explication from chatGpt and still dont get it why handling isLoading and isError made the code to work and fetch the data

  • @coderintrovert

    @coderintrovert

    3 ай бұрын

    you can set initial data as empty array, like this const { data = [] } = useQuery….. If you dont want to set initial data then when you are mapping over it have some check like data?.map or data && data.map

  • @chippandenga6722

    @chippandenga6722

    11 күн бұрын

    I am also getting data undefined error but my code is an exact copy of his???? Thanks for this comment. I was thinking I am losing my mind😂

  • @joeblack8843
    @joeblack8843Ай бұрын

    i found out that it doest work with axios

  • @user-uw6pr7gv5x
    @user-uw6pr7gv5x3 ай бұрын

    Why using CRA and not VITE ? CRA is so slow!

  • @anburaghu6294
    @anburaghu62942 ай бұрын

    can we get the source code bro??

  • @hooooman.
    @hooooman.3 ай бұрын

    one request, not about the teaching ,but about the video. Most of the time , in addition to the youtube, viewers, mostly beginners ,also needs to open multiple apps, such as vs code or any code editor, ,browser with multiple tabs, other softwares such as postman etc, so students like me, who has a midrange pc, it would be a slightly heavy load for the device. so in addition to this, if the youtube video itself is also 60fps, it will just double the ram consumption and load to the CPU. Unlike a gaming video which requires 60fps, 1080px @ 30 fps is more than enough for coding videos. so please consider this request in the future videos.

  • @DrippedFilms
    @DrippedFilms3 ай бұрын

    No. 3 - 😂

  • @sandunlasantha
    @sandunlasantha3 ай бұрын

  • @Pareshbpatel
    @PareshbpatelАй бұрын

    {2024-04-29}

  • @jetskeeter69
    @jetskeeter692 ай бұрын

    Is there one that uses with nodejs to my database using MySQL?

Келесі