My Favorite Way to Fetch Data in React
Vložit
- čas přidán 25. 04. 2023
- 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 - Věda a technologie
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
Thanks, this was one perfect introduction to react-query in just 15 minutes!!
Brooo, I love your videos and you've been a part of my success in past few months. Great stuff man. Thanks
Making hooks using React Query is killer! Thanks for the awesome tutorial!
I saw too many videos about this and this is by far the best one! thank you. liked and subscribed.
Just discovered your channel through Theo. Loving your content so far
Cheers man happy to hear that
Thanks Bro, a perfect video of how to handle data fetching using react-query. waiting for more on react-query, probably part-2
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!
Totally! 🎉
happy to hear that man. means a lot.
Exactly what I was looking for. Nice one!
bruuuuuh
where have you been all this time
thank you for all your efforts
Love your content bro
Coming from svelte and watching how react works. It hurts my head for sure.
Best introduction to this!
i really like your content !! tanks a lot
React query is amazing i spent a week trying it, and it's really good
agreed
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
Great content bro 🍷🗿!! you are de best!
amazing video man thank you!
great video josh ! and it's interesting that you keep looking left and right 😂
cheers man, thats how you keep learning
Loved this video!
Thanks for stunning topic!
Cheers man!
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!
they really are, cheers man
D
Exactly... Obviously forcing everyone to use their deployment platform..
can we use react query with next js
@@vickonsscope6477 dont use them then? or better yet, become a good enough developer to not rely on their devx and eco
Very nice introductionto React-Query. Thanks.
{2023-12-22}
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
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
What API are you using to transcribe the CZcams video that you briefly demonstrated in the video on the site you working on is it a GPT API or some other API??
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?
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
just look up what the font is and set that as your default
Is this article project open source? Or will you be creating a whole video where you make this app?
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 ?
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.
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
I've been reading that React Query is good for state management. Is this not true?
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.
I think react-query works only in client since it uses context and hooks,
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.
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
why axios instead of fetch?
Bruder. Is your app a startup or just some fun project?
I also use NextJS + Express but I use SWR
SWR is better option at the moment i would say
helpful, thanks!
cheers man
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.
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.
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
In next.js 13 app folder system, the Provider has to go in the main layout.tsx file, right? someone knows?
react-query is the 🐐
Finally I can ditch the ugly useEffect + loading state combo.
oh hell yeah right into the garbage with that
Could you create app where is Nextjs in frontend and express in backend ? Tutorial
So cool,
Love the one piece wallpaper
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
Josh can you please make a video of React Query in Next JS server components?
but this is client-side fetching solution only, right? do you ever use other data fetching methods?
how do you mutate data in nextjs 13
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
There is an issue with onSucces and onError (they are not reliable), they actually removed them in the latest react query version.
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
what extension u use for showing the size of a module like that ?
think its called "import cost" in vscode
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" ?
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
@@yarapolana Thanks. I’ll see how it is going to work.
Axios does allow Generics so no need to do As casting
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.
React query is a hook so you can only use it in the react client, not in the next server
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.
yeah as it's just a hook, this is meant for client use only
Josh, are you using state management like redux for all your project?
the same question I want to ask about
@@abhiramsatpute it's mean, we don't need redux, right?
@@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.
@@abhiramsatpute it's what i do right now
@@abhiramsatpute Redux is not only for fetching data and sharing them among other components.
Josh is hackerman. even with airplane mode on, he have internet.
hahaha
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.
Why RTK query if using redux?
@@rl6382 Because it is already integrated with RTK (Redux ToolKit), why importing other packages when you already havea query library included in RTK?
@@EduardKaresliRTK Query is really best option if you have Redux in the app
Are you using windows 10 or 11?
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?
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...
6:04 how to do this editing trick?
I prefer RTK-Query since it also comes for free with RTK state management
fair enough
where would I house videos and would I use react to fetch them for a video streaming site
upload them to AWS s3 or cloudinary (I prefer s3), then fetch them via a presigned url
Hi josh, can you please make a video about typescript and how can it be useful than JS for beginners with little tutorial
Just google it it's 2023
thats a great suggestion
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?
HOW'S THE JOSH!!!
You missed explaining the `mutate`/`mutateAsync` functions that `useMutation` returns.
ah thats right, good catch
I cannot use useQuery in a server component?
Hooks in general are client-only
Is the first load js when building the project always so huge when using react query? up to 350kb!
no something is definitely not right in your project haha
I’m a very fan of native apis and fetch API tbh, it not hard at all.
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?
Great videos btw!
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
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
You should reference your recent videos on fetching...I though this was the same video
true, that might be a bit confusing. Its the more in-depth version as a lot of people asked for it
react-query is powerful
it is
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
At the top of your component write
export const revalidate = 3600 // revalidate every hour,
same as using using fetch API {next : { revalidate: 60} }
so you love react query ?
i love SWR🤣
@@ongkay250 lell
wouldnt call it love but I enjoy using it
@@joshtriedcoding ohh then which library do you love personally?
does react query work on nextjs?
yeah
OnSuccess and OnError for useQuery (not useMutation) will be being removed in React-Query 5 I think
wait why?
Why?
useSWR is lightweight and enough for most of time.
fair enough
awesome
what about SWR ?
as I said, they aim to accomplish a very similar thing
onSuccess and onError is deprecated and will be removed in next major verions, interesting
First 🎉
you are the man
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.
use-query + axios = (KB + KB)
You should learn more about use-query and axios rather then business logic.😂