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