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
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!
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!
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
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 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.
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.
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 ?
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
@@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.
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
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
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?
What API are you using to transcribe the TH-cam video that you briefly demonstrated in the video on the site you working on is it a GPT API or some other API??
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
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
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
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.
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.
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...
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 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
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?
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.
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
Making hooks using React Query is killer! Thanks for the awesome tutorial!
Thanks, this was one perfect introduction to react-query in just 15 minutes!!
Just discovered your channel through Theo. Loving your content so far
Cheers man happy to hear that
Brooo, I love your videos and you've been a part of my success in past few months. Great stuff man. Thanks
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.
Thanks Bro, a perfect video of how to handle data fetching using react-query. waiting for more on react-query, probably part-2
I saw too many videos about this and this is by far the best one! thank you. liked and subscribed.
Great Video! Thanks for starting out simple and advancing through how to clean it up.
bruuuuuh
where have you been all this time
thank you for all your efforts
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
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
Love your content bro
Coming from svelte and watching how react works. It hurts my head for sure.
Exactly what I was looking for. Nice one!
Best introduction to this!
great video josh ! and it's interesting that you keep looking left and right 😂
cheers man, thats how you keep learning
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?
React query is amazing i spent a week trying it, and it's really good
agreed
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
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.
Thanks! Consider changing the video title to something like, 'Learn How to Fetch Data Easily with React Query' for better clarity.
Loved this video!
Great content bro 🍷🗿!! you are de best!
Thanks for stunning topic!
Cheers man!
amazing video man thank you!
i really like your content !! tanks a lot
Josh is hackerman. even with airplane mode on, he have internet.
hahaha
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 ?
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
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.
Finally I can ditch the ugly useEffect + loading state combo.
oh hell yeah right into the garbage with that
It is an old way of using react query. Making query options and passing to it as a prop is a better and cleaner way of using it.
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
6:04 how to do this editing trick?
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.
what extension u use for showing the size of a module like that ?
think its called "import cost" in vscode
why axios instead of fetch?
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
You missed explaining the `mutate`/`mutateAsync` functions that `useMutation` returns.
ah thats right, good catch
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?
What API are you using to transcribe the TH-cam video that you briefly demonstrated in the video on the site you working on is it a GPT API or some other API??
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
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
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.
Josh can you please make a video of React Query in Next JS server components?
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
Is this article project open source? Or will you be creating a whole video where you make this app?
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
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, 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...
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 prefer RTK-Query since it also comes for free with RTK state management
fair enough
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.
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
react-query is the 🐐
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} }
I cannot use useQuery in a server component?
Hooks in general are client-only
In next.js 13 app folder system, the Provider has to go in the main layout.tsx file, right? someone knows?
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
helpful, thanks!
cheers man
Could you create app where is Nextjs in frontend and express in backend ? Tutorial
Love the one piece wallpaper
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
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
but this is client-side fetching solution only, right? do you ever use other data fetching methods?
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?
Axios does allow Generics so no need to do As casting
does react query work on nextjs?
yeah
Are you using windows 10 or 11?
OnSuccess and OnError for useQuery (not useMutation) will be being removed in React-Query 5 I think
wait why?
Why?
how do you mutate data in nextjs 13
So cool,
what about SWR ?
as I said, they aim to accomplish a very similar thing
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?
I’m a very fan of native apis and fetch API tbh, it not hard at all.
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.
react-query is powerful
it is
useSWR is lightweight and enough for most of time.
fair enough
HOW'S THE JOSH!!!
First 🎉
you are the man
onSuccess and onError is deprecated and will be removed in next major verions, interesting
bro why do you post your selfie as your cover. like..
bro I'm confused
use-query + axios = (KB + KB)
You should learn more about use-query and axios rather then business logic.😂
awesome