I Never Want To Fetch Data Any Other Way
HTML-код
- Опубликовано: 15 апр 2023
- Data fetching in React is not easy. Especially because React couldn't care less how you get your data in the first place. Out of all options, I think there is a clear winner for React data fetching. Let's investigate different approaches of data fetching and which one might be the most convenient for you!
My GitHub: github.com/joschan21
Discord: / discord 
Наука
I profesionally use react query for fetching, it really makes sense. But privately, I have no problem with using fetch and creating my local cache and maintaining it (atm with context, but anything goes really). There's special fun in using something native 🎉
Interesting point, there's a certain level of technical know-how involved in managing the cache that beginners might not have. Good for you man, feel like the native fetch is also encouraged specifically with Next 13 where their caching behavior is built into the native fetch API
I also think there is nothing wrong with fetch. It depends on the project and if they want to use more native stuff. Code reviews also help a lot. Idk. just my opinion 😅
@@jaymartinez311 There is nothing wrong or right about anything in code really. Just depends on which trade-offs you choose - often its time for money, sometimes it's control over time spent developing a certain feature. I believe offloading that control to a data fetching library is a worthwhile tradeoff for your time, if you prefer keeping all the control and are willing to invest more time, fetch is awesome as well
can you please suggest learning materials on imlementing caching?
@@joshtriedcodingwell said.
2:50 Fun fact: while axios can indeed be considered an abstraction of a generic "fetch request", it is not an abstraction of the fetch API; it is still actually using much older XMLHttpRequest API under the hood.
Is that good or bad?
I wouldn't say neither good nor bad. In theory, Axios has better backward compatibility. However, it is 2024 now. Only very few devices are probably still around that won't support `fetch`, so it doesn't matter.
And however old the XMLHttpRequest api is, JavaScript has always been backwards compatible, so there is very little chance that XMLHttpRequest will cease to be supported in the future. @@UFO_808
Hey Josh, keep up the great content. You give programming videos a nice twist!
Very happy to hear that. cheers man
i was doing my project for a database class and i thought i was doing it all wrong since my fetch file looked like trash (even though it still works meh). thanks for this video haha. made me feel a bit better
So, everybody, please use libraries for everything! The "Do not re-invent the wheel" that everyones is repeating, is a bad thing. A developer needs to "re-invent" the wheel, to see how things work under the hood, in the process to learn new thing and design patterns and implementations, sharpen his way of thinking and more. At the end of the day if his solution is worse, use the library, but the knowledge you have gained in the process, is immeasurable. Experiment on your own, do make mistakes and learn ( nobody's gonna kill you ). As for the React Query, you can use your own abstraction around Fetch API ( as many people mentioned ) as a hook which is fairly easy ( getting errors, data, loading state, even caching some queries with a provider ). As for query parameters, you can extend your hook, observing the URL changes, extracting the query parameters and making a new URL from it, or even passing dependencies from which the query should be triggered again. Let's don't make all native Javascript APIs, sound bad. Now for the old good friend XMLHttpRequest, it provides functions that Fetch API doesn't. If you don't use any type of sockets how you're gonna know the upload progress of a file with Fetch? You may use streams (ReadableStream) but not that wide support and adds too much complexity. So yes, I have an XMLHttpRequest hook for uploading a file ( when uploading progress is necessary ). Point is, do write your own code to become better and experiment. If you're using libraries, do make the effort and read the code and understand how they work. Don't just blindly use libraries with their syntax sugar without knowing how they work. Cheers. (npm install everything-there-is)
Awesome and on to the point video as always!
As always, very enjoyable content. I've subscribed josh when he has like 8k subs and will be one of the veteran subs when he hits 100k mark :). Keep going dude
One important feature these fetching libraries (React-query, SWR) bring is race condition prevention. It's actually quite easy to create a race condition if you fetch data inside a useEffect and don't provide a cleanup function. The React docs have some examples on this.
This is the best thing for using React Query, imo.
Hey Josh, Been loving all your videos! I was wondering if you will have any testing videos in the future. One thing I struggle with a lot is testing, espically stuff like React Query.
Thank you so much for this video. I needed to know the benefits of tankstack query. I am a self-taught fs dev and smt it is hard to find the best and simple way to do something like fetching data. Thanks :)
I may be late, but I think you can add hooks from common hooks libs like useAsync from react-use. You have valid status data, on the other head I think React query is much better because of the state separation and state management, which is a game changer from my perspective, and now you can use lightweight libs like Jotai and Zustand for your's front state.
Dude, what a great add and feature. I Didn't know react query was that powerful though
Hey Josh, could you tell what extension you use when creating snippets like you do when importing fc and creating such a module quickly?
Thanks for sharing, learned a lot as usual.
Great video. I am a huge RQ fan girl. One thing though, make sure to put the queryClient outside of the App component so it doesn't rerender if for some reason App rerenders
Thank you Josh!! .. you’re the best!!!
cheers dude
I still use fetch API. It works well for me. React query is just syntactic sugar for already existing fetch API, same thing woth Axios.
Keep up the good content, show use more library’s like this, why don’t you do a tier list of sorts for library’s you use
Well explained, nice job, watching you from Syria, and hope to see a camparison between useSWR and useQuery
one my new fav channels, subbed
cheers dude, I've watched your videos before
Using Fetch is not bad, you just need yo abstract the logic so there's no spaghetti, you just need to be organized with your code and apply good practices, then you'll learn how to do things properly
Nice content you are creating on your channel as I am learning reactjs/nextjs.
I have one question related with this topic. Should react-query can be used as replacement for redux / RTK.
very well explained, very good your videos!
cheers dude
Thank you for the advice bro
josh i love you youtube channel, feel like home.
Love your content !
What about useSWR ? Could you compare those two in a future video maybe ? Thanks for your hard work man
Good idea dude
I 100% expected this video to be about SWR.
Hi Josh, Please make a complete video on clerk integeration in next13 because when i tried, After user logged in still navbar not render the authenticated user menu. And i am using serverside authentication
If i'm using next 13 app dir with react server component , would you prefer to use react query for ssr over the regular way of fetching (with a custom fetch wrapper)?
me too, but for now im using fetch api
The video is super helpful 🎉
happy to hear that
It's definitely nicer, but in an application of any real size, you're going to define your own abstraction around fetch (or axios) anyway, so you're only going to use React Query once, if your own abstraction doesn't implement a similar API all on its own.
You don't need to define any abstraction around axios/fetch manually tanstack-query has it all sorted for you. You will need to dig into docs first before making conclusions.
The kind of approach you propose is the exact nightmare in real projects. Let me guess if you work on 10 projects all 10 will have their own abstractions, right? Besides the actual fetching tanstack-query also handles state management, parallel querying, and literally a ton of other things you with your abstraction layer will never come even remotely close.
You obviously don’t know how the stack works 😂 sorry mate
@@MARKOTHEDEV The way you're putting it and what is shown in the video don't add up so something has to give.
@@zb4238 What does handling state management even mean?
I am gonna use react query on my next project 😊
you better!
Appreciate the vid.
Not the most balanced take though...
Fetch is runtime-provided so there's no need to add to your bundle size which is a plus. Also react query can be overkill for certain projects. It also defaults to being incredibly chatty with the backend which could be considered a minus to the API/syntax aspect. Additionally composing queries quickly turns into what you might refer to as spaghetti code.
Yeah and he complained about spaghetti code, and ends up writing even more confusing spaghetti lol
I agree react-query is amazing, even I use it in my personal projects.
"even I", that must mean something :D
I’m more on team RTKQuery.
It’s built on top of redux and comes with automatic caching. It’s also pretty easy to update global state everytime a query rerun with middleware!
The best part is, results of one request can be used to invalidate results of other requests and rerun them if needed. I avoid a lot of logic with just that
You should definitely give it a try
i honestly don't understand the point of using redux. could you tell me (not an offensive question, i'm just a beginner)
@@saralightbourne redux is state management tool. So it maintains information about session; this can be anything that is shared across multiple pages and not limited to a subtree of components.
Redux is usually overkill on hobby projects. That said, since RTKQuery uses redux’s tools without us having to use redux itself, it hits the perfect sweet spot
@@saralightbourne Same true.
What is the extensions that generates whole component with just 'fc' ?
Is there a way to build it a native way? I don't want to install external library for no reason
What is the plugin in VS Code that shows the package size?
I wish you used a real-example to shacase this. Maybe a weather update, it would have been much clearer.
BTW Great Video..On my way to try it..✌🏻
There is this new package called Ky. It does seem to do everything that axios does except at a much lower cost.
Can we use vanilla fetch method in the queryFn property instead of axios? Does it works the same?
Yep
Thanks Man
Liking your content! Only critique so far is no dark mode on your pages.😁
on my pages?
I think he meant the screen you were doing the comparison on was light, maybe a dark screen would be better
@@joshtriedcoding Hey Josh, Excalidraw and your other 8hr vid your site bg was stark white which was pretty jarring. Good stuff tho.
Ahaa
great content, exactly what i needed.
Isn't it better to use fetch tho instead of axios (inside of react query) in Next? I've read something like vercel did some optimizations on fetch.
I made my own version of fetch so that it behaves a bit more like axios because of this optimization thing (idk what exactly they optimized tho lol)
THIS
They added the ability to revalidate after a period of time and u now can choose to cache data or not
can trpc be used instead of react query?
Please make a video on SWR , it gives some additional features like optimistic updates
I have been trying to find out for some time now, does RTK also handle aborts when there are multiple queries taking place?
Also, I always wished that they go that last mile and make all these libraries like fetch, axios (bonus points for firebase, websocket, etc) just plug and play instead of having to write
Klasse Video kann man das auch mit react native / Expo machen?
Thanks a lot!
What if iwant it global how can i share the fetched data between components
How do i provide this data, error, isLoading to another components?
Should I prop drill them?
It depends on what your use case is.
Personally I like to just assign my response to a variable like this:
const usersResp = useQuery(…)
You can
1. Pass it as a prop
2. Take advantage of the “children” prop to avoid needless prop drilling. (Depends on your component tree)
3. Use context
4. Pretty sure you can use the ‘useQueryClient’ hook to get a queries state too.
This is awesome, but I want to ask, isn't this more written code than already?
Well I am using a wrapper around fetch. So at the end I have a function like - fetchApi(url:string, method: "post"|"get" etc, parser: "json"|"text"). And this function is being used all over my project. I am not sure how bad this approach is but works for me fine, since that function has a lot of logic to catch any bad stuff...
I'm no expert but if you've taken care of all the possible errors, then it doesn't need to be super readable, if it takes a little effort to understand the code, that's fine, not everything needs to be super easy to understand
Any specific reason you chose this approach?
@@joshtriedcoding Well I had something like this ```export const fetchAPI = async (url:string, method:FetchMethods, data?:object):Promise =>{
//Look for a token
let dataResponse:any = undefined;
try {
const token: string | null = localStorage.getItem("token");
const response:Response = await fetch(GLOBAL_URL+url,{
method,
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${token}`,
},
body:JSON.stringify(data)
})
if(response.status === 401){
//go to login page
window.location.href = "/login"
}
//Get the object based on the interface or get the Error
dataResponse = await response.json();
} catch (error) {
console.log(error)
}
/**
* Logic for the refresh token
*/
return dataResponse
}``` -> basically was just calling one little funciton that contained token, did some basic error handling and so on. But I am sure the react query is way way better approach. I just have to look at that a bit more and maybe I will have to wrap it also with additional logic.
@@joshtriedcoding I have OAuth2.0 api so I need to renew my tokens if access token is expired. So I wrapped call in function to fetch new tokens and then refetch to get actual data. So if my app state says I am logged in but my server says I am not, it means my token got expired and I need to refetch new tokens and refetch first request with new valid tokens
you can compare RTK query ?
You don't really need a library for that. Why not write just a simple hook with all of the query functionality and return those parameters like (loading, loaded, error, items, etc.)? And you don't need the context, because in this case you need a HOC. Anyway for some users it could be convenient, but all I see just another dependecy and another documentation to dig into if you need some custom functionality. Thanks for the video! :)
How does React Query compares to SWR? It could be an interesting video to make about.
but how to combine this with ssr because we can't use hooks in server component
Turn the components you'd like to use this in into client components
How do you mutate data in nextjs 13?
"We all know this so I cut it out"
Umm, I actually don't know. This is the first video I came across when I was searching up about data fetching in react project.
any performance differences?
Yooo man, you're BAAAAAAADDDD!
Axios is huge in terms of size and it comes in with so many abstractions one will never use. There is a much better solution that more and more start to use witch is : ky
what about in server components
I think you can fetch data server side as "dehydrated data" that you can then pass to the frontend, thereby making it immediately accessible
@@joshtriedcoding could you talk about this 😊
Hey Josh, any comments on Wretch fetching package?
nope, never used it
I find Your message a bit confusing. You still need fetch or axios (or something else) when using react-query.
Right now, in the project that I'm working on, I'm using axios to get data for react-query, but I'm actually considering to get rid of axios, as I don't see much value in it while combined with react-query. Syntax of fetching function can be improved with simple utility around fetch, and other features of axios are mostly covered by react-query.
Weird comparison, react query does not replace axios or fetch
What about rtk, swr, trpc?)
Tanstack-query goes much deeper than you in your video managed to cover and it doesn't expose it in real light. It's dangerous to start using it since it will be real hard to go back to the old ways once you dig deeper.
youre the jacob collier of the code
next js has useswr and react query too!
I would like to know your opinion about AI taking over software engineers.
you can do promises with axios.
i still dont get it what is the relationship beetwen spaghetti and this video?
Josh please make a video for next js 13 and reactQuery and can you please explain it with real api calls and prisma?
We can use react query the same way as in regular react. You can fetch data with prisma on the backend and then request that with react query on the FE. You mind elaborating?
Hey josh, help me understand why do you use yarn over npm? I've come across a lot of posts and people ( like theo ) who make arguments in favour of npm and as I understand it's supposed to be better than yarn.
He probably started using yarn when npm was still shitty and never looked back
Npm wasn't so good for awhile but its really good now
It all comes down to one specific time when npm would just not link two dependencies in my project together. Would not work. No matter what I tried. Used yarn, worked perfectly. As Amasoh said, never looked back since then. But thanks for the heads-up, wasn't aware it's better now
@@joshtriedcoding have u tried pnpm? I think it's more memory efficient as it uses symlinks in the node_modules folder
@@therollingambit5222 it is, never tried it tho
wow, only 7kb of library code for a xhr wrapper... you react guys are really easy to impress... 🤷♀
It just like the redux but it is much easier than that 😃
Interesting. But why fetch is still very common? I will learn reactquery
The issue isn't spaghetti code, it's just abstraction - you still need to use Axios in that query function, so it's not really helping. Any moderately skilled dev can take fetch or axios and write their own abstraction that does the exact same as this ridiculous library. It's a problem with React/Vue developers, they don't bother writing their own abstractions over lower order APIs like fetch, they just add a bloated library that still has to be imported and bundled. Just write your own code, people.... it's not that hard.
I was looking for this comment. I'm a crappy programmer but it gives me the creeps everytime I see people recommending npm install anything. This should be used as a last resource in my opinion, or you'll put yourself in dependency hell or worst, using libraries like isEven! 😂😂😂
Could you suggest some references?
Hmm this is not true within next.js 13. They modified the fetch() api. I'm sure you allready knew that.
even in next13 app router ?
What about apollo client??
what about useSWR
🎉
1:12 Lmao chad move! 😂
was way too boring
what about useSwr hook?
they both solve the same issue and go about it slightly different in the syntax department
React query + fetch is king
Now make a tutorial on react query
Mr Josh,
After 4 year of coding with react I'm just hearing about react query 😢
Man its time to get into it then! :D
Or RTK query!
Axios returns promise whi hbcan be handled with catch.
Make a video on redirect in nextjs 13
Next js 13 i face slug problem please create tutorial slug
Axios uses the OLD XHR API, pretty bad and limited...
Cool
no iwant to reinvite the wheel thanks 😂
But, why did you use fetch() on most of your videos? 😂😂😂
because I share what I learn, and I happened to learn that react query is awesome
Hi can we create something new that is not present like no one create that project that will be created by josh and there students with there different designs
Fetching data from your view is just wrong. It violates most basic programming principles.
I’m actually not convinced fetch() is not your favorite 😅
@joshtriedcoding you forgot XMLHttpRequest xD
Why axios with typescript is spaghetti??? Man remove the crown please.