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 🎉

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

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.

Hey Josh, keep up the great content. You give programming videos a nice twist!

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

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.

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.

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!

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 :)

Hey Josh, could you tell what extension you use when creating snippets like you do when importing fc and creating such a module quickly?

Dude, what a great add and feature. I Didn't know react query was that powerful though

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.

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

Thanks for sharing, learned a lot as usual.

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

Thank you Josh!! .. you’re the best!!!

one my new fav channels, subbed

Well explained, nice job, watching you from Syria, and hope to see a camparison between useSWR and useQuery

very well explained, very good your videos!

Thank you for the advice bro

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.

josh i love you youtube channel, feel like home.

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)?

Love your content ! What about useSWR ? Could you compare those two in a future video maybe ? Thanks for your hard work man

The video is super helpful 🎉

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

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.

I am gonna use react query on my next project 😊

There is this new package called Ky. It does seem to do everything that axios does except at a much lower cost.

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)

Liking your content! Only critique so far is no dark mode on your pages.😁

I agree react-query is amazing, even I use it in my personal projects.

Klasse Video kann man das auch mit react native / Expo machen?

Please make a video on SWR , it gives some additional features like optimistic updates

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.

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

Thanks a lot!

Can we use vanilla fetch method in the queryFn property instead of axios? Does it works the same?

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..✌🏻

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...

This is awesome, but I want to ask, isn't this more written code than already?

Yooo man, you're BAAAAAAADDDD!

I have been trying to find out for some time now, does RTK also handle aborts when there are multiple queries taking place?

How does React Query compares to SWR? It could be an interesting video to make about.

Is there a way to build it a native way? I don't want to install external library for no reason

What is the extensions that generates whole component with just 'fc' ?

What is the plugin in VS Code that shows the package size?

can trpc be used instead of react query?

next js has useswr and react query too!

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

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.

Hey Josh, any comments on Wretch fetching package?

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.

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! :)

any performance differences?

you can compare RTK query ?

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?

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.

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.

How do you mutate data in nextjs 13?

Josh please make a video for next js 13 and reactQuery and can you please explain it with real api calls and prisma?

Weird comparison, react query does not replace axios or fetch

🎉

Or RTK query!

It just like the redux but it is much easier than that 😃

"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.

I would like to know your opinion about AI taking over software engineers.

but how to combine this with ssr because we can't use hooks in server component

What about rtk, swr, trpc?)

youre the jacob collier of the code

React query + fetch is king

you can do promises with axios.

what about in server components

1:12 Lmao chad move! 😂

Now make a tutorial on react query

Interesting. But why fetch is still very common? I will learn reactquery

i still dont get it what is the relationship beetwen spaghetti and this video?

wow, only 7kb of library code for a xhr wrapper... you react guys are really easy to impress... 🤷‍♀

What about apollo client??

even in next13 app router ?

what about useSWR

Cool

what about useSwr hook?

Axios returns promise whi hbcan be handled with catch.

Fetch syntax is great, just don't use async await so you don't have to deal with try/catch block. Also, your solution has horrible syntax, so in that department you should have the Poo emoji. Look at all the boilerplate you had to do in different files for a simple request, having to import 2 different methods and a component to wrap around.

Make a video on redirect in nextjs 13

Hmm this is not true within next.js 13. They modified the fetch() api. I'm sure you allready knew that.

Mr Josh, After 4 year of coding with react I'm just hearing about react query 😢

Next js 13 i face slug problem please create tutorial slug

no iwant to reinvite the wheel thanks 😂

Axios uses the OLD XHR API, pretty bad and limited...

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

But, why did you use fetch() on most of your videos? 😂😂😂

Fetching data from your view is just wrong. It violates most basic programming principles.

@joshtriedcoding you forgot XMLHttpRequest xD

I’m actually not convinced fetch() is not your favorite 😅