The simple way to handle requests in React

Check out the repo → github.com/cosdensolutions/co...
Join The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video I show you a simple way to handle requests in React if you're not using or you can't use something like React Query. This is a simple wrapper around Axios to create a predictable way to handle success and error responses, as well as fetch any data in React. This works with server components or client components too and it's a great alternative to consider. As a bonus, we also get to play with generic types in Typescript!

[@jaycodes8790]

This is why i loved your content. As you teach the very fundamental things which one need in their programming journey.

[@maxilkiv]

8:37 - I think you could add at this step a check if e is instanceof AxiosError class, then it would get properly inferred

[@Shaheer-xs5os]

Great content as always!

[@Lykkos29]

I love that you do all of that in typescript, everything is more understandable

[@physicstom4798]

Best video ever I've seen. thank you, Cosden :)

[@abhinavdhama3014]

Great content as always♥️. We need react interview part 2 also

[@gabegabegabe573]

wow so nice, did not know that, the way i was doing my full-stack apliccations was api(controller/service/model) > lib folder with the fetchs > calling the functions from lib folder in my components, i was handling the errors cases in the api mostly, but with a request handler it seems way more organized

[@meshinazol7267]

Very nice!! I would take it a step further, and create a custom hook (assuming we’re using React, and doing some client side fetching) that utilises this logic in an effect, with states for request status (idle, loading etc.), data, and error. Great content!

[@danielmazout]

tanstack query vibes

[@user-xu9tb7oe2z]

мужик, спасибо тебе огромное за этот бесценный труд!

[@AnuMessi10]

Great, what we do at our company is also have a custom wrapper class around axios that takes in the endpoint, request type (POST, GET, PATCH etc) and the data thus exposing a simple function that can be called in the view. However I am also of the opinion that such API calls and logic should be abstracted out and kept in a hook or a store so that the view remains clean and nice.

[@SurinderSingh-jt3fs]

Very helpful ❤️

[@chienquoc4458]

very useful content. thank you

[@f-neto1]

Awesome content! Quick question: how would you handle loading/pending status within this requestHandler implementation?? Thanks! Keep it up 👌

[@cosdensolutions]

That's outside of its scope! You would have to handle them manually by setting and updating states

[@user-ej7ij2mi7l]

Amazing! What do you think about using axios over nextjs13v? If I use axios, I can't use nextjs fetch options (e.g. {cache: 'no-store' }).

[@cosdensolutions]

You can convert this to fetch without too much trouble and then use all of that!

[@user-ej7ij2mi7l]

@@cosdensolutions thank you!!

[@smithjohn2367]

Really great thx. But if you have a token in the header and depending on the requests, headers that may have other properties or specific responseType, how would you do it? Aren't you going to pass the token to each request in the header?

[@cosdensolutions]

Hmm, interesting not sure. How would you do it in React Query?

[@diegovinicius4186]

Question... since the return of the requestHandler is expecting a Promise, in the returns at the line #22 and #24, shouldnt be a Promise.resolve or reject?

[@nodirbekeshonkulov3261]

Really love your videos, thank you for your hard work, really appreciate it, could you please make some videos on next 14?

[@i_am_pasindu]

Hi love your content, you are filling the gap which other developers couldn't demonstrate. 'How it works and why we are doing it' great content!! . But one more thing that is curious to me is you are not doing any NextJS content. Any plans for nextJS videos as well ? thank you. 👊

[@cosdensolutions]

I will make some nextjs content for sure in the future, but I haven't gotten there yet!

[@lucasmachado6447]

If the resquestHandler were to be used in a client component, would the only differences be that getUsers is called inside a useEffect and that we would need to declare a piece of state to hold the response?

[@cosdensolutions]

Exactly!

[@sahilhedau7377]

Sir, can you please make a video on transforming into TypeScript from JavaScript. I build react app in JS and I find many developers suggesting to use TS for better coding. But giving a big amount of time in learning new language is sometime tough. I am looking to learn TS in such a way that I can able to code my React Application using TS. I started some projects in TS, but stuck in various things like type errors while fetching data from API and all. Can you please guide me what should I do in order to hold TS good enough. Btw, I like your videos and really find it helpful and worth giving time. Thank You :)

[@alirezaspeedy5951]

Have a question, what if we wants to use POST/PUT methods that required the data before configs as the second parameter?

[@cosdensolutions]

this will work out of the box with POST/PUT requests, but if you need to pass around some extra variables, you would have to add those to the types based on your needs!

[@user-ke8of5mn1u]

Amazing video can you cover some topics like CI/CD for react, Docker and all for full stack developer

[@hareeshbhittam8069]

Hello, How can we handle post request with headers and body included?

[@haoz5259]

best ts course lol

[@Huboh]

Just by the way, at 8:37, you can annotate “e” right there in the catch statement (eg: “} catch (e: E) {“ ). So you don’t have to cast e as E

[@cosdensolutions]

actually you can't. Typescript is strict about how you type errors

[@viallymboma9874]

Not a lover of typescript...but i have to get along and catch up with the tech pendulum

[@matheuspassos8650]

Incredible! How can I do this without Axios? Just use Fetch?

[@cosdensolutions]

Yeah, but you'd need to change some types around like the axios response. Try it and see if you can figure it out ☺️

[@Imam.Mehdi_]

Can you make video on typescript+ asynchronous js,,,, as there are some promises types and some pre given interfaces which API gives , for example geoLocation API in js,,,as it give two callback,,,, and there interface are pre defined.....

[@codingcitymini]

That's a great video, but why not use one axios instance to set up a base URL, eventually if we need to add tokens or any extra information in the header or anything else, I think it's way more comfortable.

[@cosdensolutions]

Absolutely you should do that! I just left that out because that part would be different across tools like fetch and I wanted to focus on what's common

[@md.asifal-mahmud5952]

cool

[@tristianchung8383]

Will we see Remix content on your channel soon instead of nextjs

[@cosdensolutions]

I still primarily only make pure React videos, not even with nextjs. This just happend to have been running on a next project but it's the exception

[@prashlovessamosa]

Thanks. What's coming next please tell

[@ankitpradhan4183]

better to just make one response type, i dont know but I dont like multiple union types, you still have to check for condition of success or failure anyway

[@NathanLevia]

Nice content. That help me so much

[@nayandey5010]

Hey I'm working on a project in react native but i really want to learn typescript , please make a video on it

[@cosdensolutions]

Well, there's great lessons here!

[@Shawn-Mosher]

Could you make a fetch example?

[@cosdensolutions]

just try it yourself, try replacing axios with fetch in the type definitions and see how you figure it out! Most of it will be the same just some types will be different and how your return the data

[@igormizyk9437]

Why wouldnt one just use axios interceptor instead?

[@cosdensolutions]

I'm not sure you can do this with interceptors in this way

[@2gbeh]

MORE CONFUSED

[@robinparadise]

Why axios, why it requires in avery project to add 30kB of a library that "fetch" can do it for 0Kb? Why 😫? whyyyyyyy 😫📣?

[@cosdensolutions]

You can use fetch if you want 😋

[@HelenaDuGraus]

"Simple"

[@Grom1477]

You should've mention that this is Next.js video. This whole thing is not applicable to pure React

[@cosdensolutions]

This has nothing to do with next js my dude, watch it again!

[@kenzo3477]

Typescript just brings unnecessary complexity to ur code. Anyway, great content

[@cosdensolutions]

I would disagree actually, because with this you get type inference automatically and it really helps. You just have to deal with the complexity once when setting up so it's no big deal imo

[@user-ku2sn1wz1c]

Only the people who have never used typescript could say it is not of help or unnecessary 😂

[@user-ku2sn1wz1c]

Sorry, a little mistake, people who have never used it smartly

[@GavHTFC]

I can understand your viewpoint at the very start of using it, or very early development of a system, but as time has progressed it really is a life-saver in catching bugs at build-time before they become run-time bugs.

[@DioArsya]

yup, and javascript itself brings unnecessary debugging process to ur code. Anyway, happy weekend