4 Ways To Fetch Data in React

[@behold_a_son]

2:49 The result is not JSON, here's a quote from mdn on Response.json(): "Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object." So correct me if I am wrong: the result obtained after the fetch promise has fulfilled, is already in JSON. When you do res.json(), it returns another promise that converts JSON into a JavaScript Object, so you can for example use the dot operator on the data when the returned promise of res.json() is fulfilled. We all are learning! Don't let a mistake like that haunt you Pedro! You've been a great help to me! :)

[@PedroTechnologies]

Yes! The way i said it came out wrong, but you are right 🙂 The function parses a json into a js object.

[@madalinavasile5930]

Hi! I just want to say a big thank you! For my graduation project/bachelor thesis I decided to make an app using React. It was a totally new technology for me and the first app I ever made. Finding your tutorials and videos was been really helpful, they're really easy to follow and your explications and examples are great! I'll have to make sure to go back to every video I watched and leave a like. Good job and hopefully more people will find your channel!

[@PedroTechnologies]

This makes me really happy! Im glad you were able to learn from my videos 🙂

[@fandross_]

E ai mano, tu eh o melhor professor que eu ja tive, valeu ai!

[@universecode1101]

This is a very important step guys … good video Pedro 👏🏻

[@_boza]

I heard and use some basics of React Query but you mentioned many things that I did not know and they are very useful! Thank you! :)

[@pookiepats]

Thanks!

[@PedroTechnologies]

Thank you so much for the support!!

[@Moon-li9ki]

boa pedrão, teus videos sempre me ajuda demais! Nem sabia q vc era brasileiro, seu inglês é muito bom

[@arsnakehert]

Your channel is a treasure of knowledge, man

[@ioana4011]

Thank you so much, Pedro, for the video. I have been watching many videos, but yours are by far more helpful. Would you be able to do a tutorial on Nivo charts API integration? This topic is poorly documented and it would help tremendously to have your guidance. I am pretty sure I am not the only one searching for it 😅. Many thanks 😊

[@nomapos]

Hello, please we need some react native content .... Even if it's only notes ... Please share ...🙌🙌

[@diegounanue]

More videos about how to structure a large project with react query :)

[@PedroTechnologies]

Will do!

[@filipevalentegomes2383]

I’m surprised you didn’t mention rtk query, that’s another one, lots of people love using. Still great video

[@PedroTechnologies]

Rtk query is good! I didn't mention because I don't use it that much (very few times) so I can't explain it to the best of my habilities

[@theUnsungWarriorr]

RTK query is so cool 🙂

[@michealdalu8620]

This is gold .. thanks 🙌🏽👏🏾👏🏾👏🏾

[@WTFBRUTUS]

Just what I needed to know thanks!!

[@sethheinzman5823]

You can also use SWR config to set a fetcher and set the suspense for all of the useSWR so you can just include the url and nothing else. That’s how this book taught it but I kind of like having the option to change the fetcher.

[@sohadmad1823]

Thank you , very useful video ❤

[@EduardKaresli]

There is also RTK Query, from Redux Toolkit.

[@mentoriii3475]

1:55 fetch api is a browser api, technically not built in into javascript but in the browser

[@PedroTechnologies]

Yes you are right! In the video I meant to say that u can use i without installing any library (such as axios). I see how it sounds wrong now hahaha

[@tech3425]

Cool vid. Would love to see something like using react query with firebase, if that's something you find interesting.

[@user-uw1rh4dg1y]

Questions can come in⬆️.

[@Hacking-NASSA-with-HTML]

Thank you so much, sir 👍♥️🤝

[@GabrielMartinez-ez9ue]

Thank you dude. Is the suspense new feature still experimental or can it be used in production for nextjs apps?

[@PedroTechnologies]

Its not experimental anymore, it came with react 18!

[@faisalamin001]

Please also make video on testing i.e Jest etc Thanks

[@PedroTechnologies]

Just posted one a couple hours ago hahaha

[@faisalamin001]

@@PedroTechnologies wow, hahahah thanks bro ❤

[@DeepLook1]

Thank uuuuuuuu . And how many ways we have to insert record to database like mysql. Thank u again for this video

[@adarsh-chakraborty]

I wish you showed stale option in react-Query. Anyways nice video!!

[@jorge.camargo]

Fantastic. Thank you!

[@atandauthman2126]

I can see you have the copilot extension, I'm sort of having issues getting my own to work I don't know what I'm doing wrong but it shows the icon as cancelled every time

[@varaprasad6531]

Thanks Pedro!

[@shinobi_coder88]

Hey Pedro, just wanna clarify that in React 18 anytime when there's sth to do with api we no longer need to use useEffect() right? Since React Query benefits our performance better. Honestly I've tried both Pagination and Infinite Scroll in React Query which are really good in React app. However, when I use React Query in NextJs that's where I feel it slows down the app performance a bit.

[@PedroTechnologies]

I mean, it depends on how your app is running. I usually use SWR when im working in a nextjs app and react query when I am not. But both should be good, try to optimize the way your are fetching ur data and see if it is react query that is really causing the issue. For example, are you paginating by fetching data incrementally?

[@shinobi_coder88]

@@PedroTechnologies what do you mean by incrementally? In my scenario, for example Rick and Morty API, when it comes to NextJs the only thing that React Query helps is prefetching data with SSR or SSG. But when clicking to the next new page (which is not the previous data yet) then it renders not as fast as React App. On the other hand, I have also tried to fetch Weather API with React Query in NextJs and it seems quite slow too compared to using only SSR to fetch the data from Weather API

[@shinobi_coder88]

@@PedroTechnologies I'm also curious what makes you choose SWR instead of React Query for NextJs App ?

[@ramonarthur2729]

@@shinobi_coder88 export const getStaticProps: GetStaticProps = async (context) => { const { slug } = context.params as IParams; const queryClient = new QueryClient(); await queryClient.prefetchQuery(['product', slug], () => fetchProduct(slug)); await queryClient.prefetchQuery('products', fetchProducts); return { props: { dehydratedState: dehydrate(queryClient), }, }; };

[@ramonarthur2729]

@@shinobi_coder88 export default function ProductDetails() { const router = useRouter(); const { slug } = router.query as IParams; const { data: product } = useQuery(['product', slug], () => fetchProduct(slug) ); const { data: products } = useQuery('products', fetchProducts); if (!product) return ; .....

[@Ellenox147]

Great video thanks ! What's the theme plzzzzzzz ?

[@AM-nm6ts]

please if it's possible, when u have time, ---> context api vs prop drilling thanks a lot

[@sonamohialdin3376]

Awesome tutorial

[@renesalvacion6169]

Do I need to fetch data in react, if I used nodejs for backend?

[@adarsh-chakraborty]

Yes frontend needs to do network requests to get data from backend. Doesn't matter if it's node server, python or java.

[@PedroTechnologies]

The frontend has to fetch the data from the backend in order to get the data.

[@sudiptokumarmitra9845]

Can you please make a project-based tutorial using the redux toolkit and react query and show how to create industry standard coding and folder structure??

[@songokussj4cz]

+1 ! Show us something real, please. Best practices in your opinion.

[@licokr]

Thank you so much! Great!

[@manasahr478]

Could you please help me how to fetch data from mssql database stored procedure to reactjs

[@jackiedo7370]

just cmt to say thank you ❤

[@himanshugaikwad4998]

Nice video like always. Thank you very much. Can u make a video on auto image slider in react js? i would love to learn that from u

[@icecream5335]

I want to fetch the data from the server which uses jwt auth. Please help me.

[@Lunolux]

great video, thx

[@nazmulalam1982]

18 version is fast but 16 version too slow my office project running 16 version how to fast do it?

[@sujoykrhaldar]

hi Can you make a series on how to use swr client side fetching in nextjs and react query as well.

[@patrickorji3616]

I don't have anything displaying on my browser when I use the Fetch API and Axios API. All my codes are correct just like that of Pedro's. I will appreciate a response

[@abdirahmann]

am dead 29:29 "writting code that doesn't male sense"

[@stephengatonga844]

Hi, am using axios to fetch data but am getting this kind of error...... AxiosError: Network Error

[@fullfungo]

There might be an error with your network.

[@stephengatonga844]

@@fullfungo I have come a long way😅, at that time such an error gave me headaches now am good at react.js and react native🤣 Thank you for the response anyway.

[@smartjefreycoca5425]

Brother pedro can you make a tuotrial creating a User Management System using React Js and MUI

[@user-uw1rh4dg1y]

Questions can come in⬆️.

[@vnm_8945]

love it!

[@kabagambedaniel2468]

nice one

[@MyALPHAguy]

ainda bem que vc não usou o typescript

[@ts8960]

async await is the best way.

[@aghilannathan8169]

Damn to Redux Toolkit Query.

[@abulazaiemabas5070]

Fetch api is built-in the browser not node

[@SahraClayton]

React Query is by no means a state solution, also I like your videos but just get to the point, it took you over 4 minutes from the start of the React Query part to even get to the point of React Query

[@PedroTechnologies]

Couldn’t agree more!

[@mr-36]

Fetch is not part of javascript. Fetch belongs to BOM(browser object model)

[@nanimys]

in turn, belongs to the javascript library!!

[@PedroTechnologies]

I meant that when you are using javascript, you don’t have to download any extra library to use the fetch api.

[@mentoriii3475]

@@nanimys no sir, there is a reason it's called an api, we use it on javascript but it's not built in javascript

[@mr-36]

@@mentoriii3475 Exactly!

[@RicardoGuillen]

You forgot RTK Query :/

[@PedroTechnologies]

RTK Query is interesting, but I don't use it a lot since I am not that fond about Redux

[@RicardoGuillen]

what do you recommend to use with Zustand? Zustand + React Query?

[@GabrielMartinez-ez9ue]

@@RicardoGuillen if you know RTK, stick to that one and learn it well. Its great

[@aravindsanjeev4150]

Who wants to steal his intro bgm?

[@Pareshbpatel]

Great Tutorial on four ways to fetch data in React. Thanks, Pedro {2022-06-14}, {2023-09-06}

[@andreyokhrimenko2271]

const { isLoading, error, data, isFetching } = useQuery(["dog"], () => axios .get("random.dog/woof.json") .then((res) => res.data) ); This is right way