I Never Want To Fetch Data Any Other Way

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!

[joseandkris]

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 🎉

[hynekss]

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.

[BuhuuRecords]

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

[miguelowd]

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

[codinginflow]

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.

[timetosleep]

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

[YuqingChan]

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

[sunny]

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.

[NotBeHaris]

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

[dkshadow]

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.

[jbrvnzh]

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

[dominikyszkowski]

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

[JukkaPekkaKeisala]

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

[dearvivekkumar]

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.

[stevebendersky]

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

[nested]

What if iwant it global how can i share the fetched data between components

[adityaj]

can trpc be used instead of react query?

[nicolas_vl]

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)

[atifulislamasif]

Awesome and on to the point video as always!

[ramanavijay]

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