My Favorite Way to Fetch Data in React

React couldn't care less how you fetch your data. I use React Query to offload so many concerns we normally have when fetching data. Loading state? Graceful error handling? Caching? It's all possible.
Video links
React query: tanstack.com/query/latest
My links
My GitHub: github.com/joschan21
Discord: / discord

[@Aidorimuhausu]

00:04 React Query is a robust data fetching solution that can be implemented in your own React applications. 02:07 Provide a query client context to fetch data across the application. 04:10 React Query allows you to fetch data asynchronously and work with it synchronously 06:12 The data fetched from the query can be of different types 08:12 Using useQuery for data fetching and caching in React 10:13 Mutation is used for changing data, while query is used for getting data. 12:24 Make get requests and dynamically insert post ID in the URL 14:33 React query allows for graceful handling of success and error states

[@ninthsun]

Thanks, this was one perfect introduction to react-query in just 15 minutes!!

[@ifeanachofavour409]

Brooo, I love your videos and you've been a part of my success in past few months. Great stuff man. Thanks

[@joek696]

I saw too many videos about this and this is by far the best one! thank you. liked and subscribed.

[@developerpranav]

Making hooks using React Query is killer! Thanks for the awesome tutorial!

[@kamehameha38]

Just discovered your channel through Theo. Loving your content so far

[@joshtriedcoding]

Cheers man happy to hear that

[@user-wp4zy2fd2f]

Thanks Bro, a perfect video of how to handle data fetching using react-query. waiting for more on react-query, probably part-2

[@MilindMishra]

everytime i think of something josh somehow comes up witha tutorial for the same! how do you read my mind! jokes aside, great work pushing out the content, josh! love the work!

[@nubian_goat]

Totally! 🎉

[@joshtriedcoding]

happy to hear that man. means a lot.

[@codinginflow]

Bruder. Is your app a startup or just some fun project? I also use NextJS + Express but I use SWR

[@Luka_brx]

SWR is better option at the moment i would say

[@whizzbang7520]

Exactly what I was looking for. Nice one!

[@nicholassingh138]

Love your content bro Coming from svelte and watching how react works. It hurts my head for sure.

[@escaper2137]

bruuuuuh where have you been all this time thank you for all your efforts

[@michaelmironov3589]

this is so f*in cool because i lost 2 days to figure out how to fetch data with axios and feed it correctly to lightweight charts library, thank you very much!1

[@gradientO]

Best introduction to this!

[@alexenax1109]

Loved this video!

[@animegeek-011]

React query is amazing i spent a week trying it, and it's really good

[@joshtriedcoding]

agreed

[@germantellez2710]

amazing video man thank you!

[@speedster784]

What API are you using to transcribe the KZbin video that you briefly demonstrated in the video on the site you working on is it a GPT API or some other API??

[@EricFernandoMosqueraVelandia]

Great content bro 🍷🗿!! you are de best!

[@rahimco-su3sc]

i really like your content !! tanks a lot

[@willxiang25]

great video josh ! and it's interesting that you keep looking left and right 😂

[@joshtriedcoding]

cheers man, thats how you keep learning

[@jotaroisdarius1918]

Hey Josh, do you have any idea on how to force a fallback font in NextJS? I had a problem with the original font which triggered the fallback and I actually liked it more than the original one

[@BuyHighSellLo]

just look up what the font is and set that as your default

[@dejanobradovic9723]

Thanks for stunning topic!

[@joshtriedcoding]

Cheers man!

[@Pareshbpatel]

Very nice introductionto React-Query. Thanks. {2023-12-22}

[@storylineteam]

Using react query with axios is a great solution (tanstack also has a great solution for tables). I like to stay away from the Vercel ecosystem as they are forcing everyone to use their platform for deployment, this is why they are making clones of existing packages (swr, router, etc). Also the React Query Developer tools are great!

[@joshtriedcoding]

they really are, cheers man

[@stexorgamingHDx]

D

[@vickonsscope6477]

Exactly... Obviously forcing everyone to use their deployment platform..

[@nidhishsrivastava4868]

can we use react query with next js

[@davidkim2016]

@@vickonsscope6477 dont use them then? or better yet, become a good enough developer to not rely on their devx and eco

[@anonymoussloth6687]

Is this article project open source? Or will you be creating a whole video where you make this app?

[@lopuma1990]

Hello friend 😊, thanks for your content, I speak Spanish and I have found the best react query and zustand content here, after playing it several times because of my bad English 😂 hehehe, one question, do you have a video of zustand and react query together?

[@codingcambodia]

What state management do you use. It would be great if You can make a video on reactjs react query and state management for authentication.

[@joshtriedcoding]

honestly, I came so far just using context, never tried out anything other than zustand. Might be worth looking into tho, heard lots of good about jotai

[@BenHuxford]

I've been reading that React Query is good for state management. Is this not true?

[@outroddet_6260]

Hey, echt cooles Video. Kannst du mal ein Video darüber machen, wie du genau vorgehst, wenn du nicht NextJS als backend verwendest, sondern dein eigenes mit express? Weil NextJS hat ja von Haus aus schon ein eigenes Backend. Würde mich echt interessieren.

[@joshtriedcoding]

both approaches are quite similar because after all, nextjs serverless functions are a "spin-off" of express. Not sure how I'd package this into a video, thanks a lot for the suggestion though. Will look into it

[@satejbidvai]

I am trying to build something using the Next13 appDir. I went through the docs and found the fetch API for data fetching in server side components. So, should I use react-query only for client side components, or for the entire app. I am a bit confused as to when to use what.

[@brenosonda8496]

I think react-query works only in client since it uses context and hooks,

[@natalianatalia1734]

If u use nextjs it is recommended to use Server side component so react hooks will not work. But imo using nextjs fetching is so simple that i wouldnt bother client side components.

[@jaroslavhuss7813]

Yeah, btw. thank you for this video. Now I can see this is a better approach comparint to what I am using now. Arghhh... I just need to rewrite the app again :D

[@joshtriedcoding]

OH NO ITS A TRAP! 'I just need this one rewrite' is a big trap my man, be very careful. It might end up in a never ending cycle of rewrites

[@jomoc6112]

great content, i never knew i could handle it this beautifully. please teach me how to reFetch the mutation if the data is still not there, maybe i did it wrong im currently trying it on onSuccess because it is still receiving data.

[@shu3684]

but this is client-side fetching solution only, right? do you ever use other data fetching methods?

[@maxime_spinard]

Is it not a better approche if we pass to the hook the api url and the onSuccess and onError functions from the components ? So we can only have two hooks, one for fetching and one for mutations with default onSuccess and onError if nothing has been passed as prop

[@istvan.design]

There is an issue with onSucces and onError (they are not reliable), they actually removed them in the latest react query version.

[@Dhruv-kumar657]

i wanted to use next js only for ssr but i don't know ssr. any video possible on it comparing ssr both react and next

[@anonymoussloth6687]

Hi, I am a beginner and I was confused between isLoading provided by react query and loading pages in-built in next js. What is the difference? do they do the same thing?

[@antoniors]

react query's loading just gives you a boolean that you can use to conditionally render some JSX based on it like so: return ( { isLoading && Loading...

[@mathiasriissorensen6994]

I have been used useSWR in the past, but this seems really good. How does it work with Next.js and the app folder considering serverside and "use client" ?

[@yarapolana]

I just saw the documentation somewhere not in their official docs. Basically you can make use of the functions with “use server” inside or decouple it to an action.ts file

[@mathiasriissorensen6994]

@@yarapolana Thanks. I’ll see how it is going to work.

[@mohitsharma-ep9iy]

in react query version 5 , it is written to support old browsers you have to transpile and polyfill yourself. Have you faced this type of issue where react query stopped working in old browsers ?

[@tanjungclan3864]

Josh, are you using state management like redux for all your project?

[@nada125love]

the same question I want to ask about

[@tanjungclan3864]

@@abhiramsatpute it's mean, we don't need redux, right?

[@abhiramsatpute]

@@tanjungclan3864 you don't need redux only when you are storing 'Fetch/Axios' data, for other data like toggling dark/light theme, you might need Redux or even better using Context API.

[@tanjungclan3864]

@@abhiramsatpute it's what i do right now

[@shakilahmed6870]

​@@abhiramsatpute Redux is not only for fetching data and sharing them among other components.

[@333ruka]

what extension u use for showing the size of a module like that ?

[@joshtriedcoding]

think its called "import cost" in vscode

[@Saltertv]

I'm struggling a bit to understand how I can use this to retrieve pre-rendered pages using static or server props. This looks like a good choice for client side rendering and fetching.

[@deiminator2]

React query is a hook so you can only use it in the react client, not in the next server

[@denissorn]

I haven't watched the video yet, but he's obviously using Next for that. The API is only for fetching data and business logic. I do wonder why didn't he use Next for this, but I have no experience with it, and my guess is, his estimate was that business logic and API are complicated/important enough to justify the use of another server/separate backend.

[@joshtriedcoding]

yeah as it's just a hook, this is meant for client use only

[@bizmich_]

can any one help i have problem with query params i cannot get them before rendering, I am using react-query by it cannot get them initial

[@xdaniels13]

In next.js 13 app folder system, the Provider has to go in the main layout.tsx file, right? someone knows?

[@waliahmed3035]

Josh can you please make a video of React Query in Next JS server components?

[@techlightdev]

So cool,

[@pelazas1]

helpful, thanks!

[@joshtriedcoding]

cheers man

[@indramal]

why axios instead of fetch?

[@Sammysapphira]

Love the one piece wallpaper

[@waleedsharif618]

Could you create app where is Nextjs in frontend and express in backend ? Tutorial

[@nubian_goat]

Josh is hackerman. even with airplane mode on, he have internet.

[@joshtriedcoding]

hahaha

[@chesterrogersjr1737]

react-query is the 🐐

[@timetosleep8055]

Is the first load js when building the project always so huge when using react query? up to 350kb!

[@joshtriedcoding]

no something is definitely not right in your project haha

[@ninjagaskin]

Doesnt Nextjs handle the loading and error cases in the respective loading.tsx and error.tsx files? Is there still merit to using react query?

[@ninjagaskin]

Great videos btw!

[@joshtriedcoding]

Thanks man. The loading.tsx and error.tsx is for server side errors and server side loading state. If you fetch data inside a server component, your loading.tsx will show up

[@ninjagaskin]

Gotcha. Thank you for clearing that up. Would there be a purpose to run this react query in server side requests or is that not possible. Strictly for client side

[@ardianhotii]

Can you do a video how to use react-query in nextjs 13.4 app router with data fetching in hooks please , I like your videos so much keep going

[@EduardKaresli]

I'd use React Query if my app isn't using Redux, or RTK Query if I'm using Redux, I think both are awesome.

[@rl6382]

Why RTK query if using redux?

[@EduardKaresli]

@@rl6382 Because it is already integrated with RTK (Redux ToolKit), why importing other packages when you already havea query library included in RTK?

[@MrSadeeq67]

​@@EduardKaresliRTK Query is really best option if you have Redux in the app

[@guitarplayer1434]

where would I house videos and would I use react to fetch them for a video streaming site

[@joshtriedcoding]

upload them to AWS s3 or cloudinary (I prefer s3), then fetch them via a presigned url

[@keshawnsmith320]

Are you using windows 10 or 11?

[@blossomdoom7609]

how do you mutate data in nextjs 13

[@martiananomaly]

Finally I can ditch the ugly useEffect + loading state combo.

[@joshtriedcoding]

oh hell yeah right into the garbage with that

[@sinnis_879]

hey josh, can we use react query in Next js 13 with the revalidate and cache methods. or is it better to just use simple fetch api in nextjs 13 please reply

[@censmart9486]

At the top of your component write export const revalidate = 3600 // revalidate every hour, same as using using fetch API {next : { revalidate: 60} }

[@jimshtepa5423]

I didn't fully understand what query keys are for? what would not be possible in case query keys are not used? Please don't answer caching wouldnt be possible. I mean in practice how is behaviour of the fetching would be in case query key is not used?

[@zheil9152]

I prefer RTK-Query since it also comes for free with RTK state management

[@joshtriedcoding]

fair enough

[@thedevminer]

You missed explaining the `mutate`/`mutateAsync` functions that `useMutation` returns.

[@joshtriedcoding]

ah thats right, good catch

[@nada125love]

Hi josh, can you please make a video about typescript and how can it be useful than JS for beginners with little tutorial

[@nested9301]

Just google it it's 2023

[@joshtriedcoding]

thats a great suggestion

[@SanderCokart]

Axios does allow Generics so no need to do As casting

[@carlosalbertocabreraquirog8297]

does react query work on nextjs?

[@joshtriedcoding]

yeah

[@Zummota]

6:04 how to do this editing trick?

[@omarkraidie]

I cannot use useQuery in a server component?

[@joshtriedcoding]

Hooks in general are client-only

[@smotch7533]

You should reference your recent videos on fetching...I though this was the same video

[@joshtriedcoding]

true, that might be a bit confusing. Its the more in-depth version as a lot of people asked for it

[@CapzTube]

OnSuccess and OnError for useQuery (not useMutation) will be being removed in React-Query 5 I think

[@stefanplusplus917]

wait why?

[@kamehameha38]

Why?

[@imkir4n]

HOW'S THE JOSH!!!

[@ashish_prajapati_tr]

react-query is powerful

[@joshtriedcoding]

it is

[@_bigNPC_]

I’m a very fan of native apis and fetch API tbh, it not hard at all.

[@asimalqasmi7316]

First 🎉

[@joshtriedcoding]

you are the man

[@ongkay250]

what about SWR ?

[@joshtriedcoding]

as I said, they aim to accomplish a very similar thing

[@muneeburrehman547]

so you love react query ?

[@ongkay250]

i love SWR🤣

[@muneeburrehman547]

@@ongkay250 lell

[@joshtriedcoding]

wouldnt call it love but I enjoy using it

[@muneeburrehman547]

@@joshtriedcoding ohh then which library do you love personally?

[@fayez9939]

useSWR is lightweight and enough for most of time.

[@joshtriedcoding]

fair enough

[@sno-oze]

onSuccess and onError is deprecated and will be removed in next major verions, interesting

[@llmaboi]

The wording here is mis leading as React Query is not a data fetching client, axioms or fetch is. React Query is a state management tool with implementations for managing query responses.

[@rudi-batubara]

use-query + axios = (KB + KB) You should learn more about use-query and axios rather then business logic.😂

[@rojka-_-]

awesome