4 Ways To Fetch Data in React
Вставка
- Опубліковано 20 лип 2024
- In this video I will go over 4 ways you can fetch data in react from most basic to more advanced. I will also introduce the topic of best practices while fetching data.
Code: github.com/machadop1407/react...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
* React Fetch Data*
00:00 | Intro
00:52 | Fetch API
03:43 | Axios
06:27 | useSWR
14:30 | React Query Library
#reactjs #data - Наука та технологія
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! :)
Yes! The way i said it came out wrong, but you are right 🙂 The function parses a json into a js object.
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!
This makes me really happy! Im glad you were able to learn from my videos 🙂
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! :)
This is a very important step guys … good video Pedro 👏🏻
boa pedrão, teus videos sempre me ajuda demais! Nem sabia q vc era brasileiro, seu inglês é muito bom
E ai mano, tu eh o melhor professor que eu ja tive, valeu ai!
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 😊
Your channel is a treasure of knowledge, man
This is gold .. thanks 🙌🏽👏🏾👏🏾👏🏾
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.
Just what I needed to know thanks!!
Hello, please we need some react native content ....
Even if it's only notes ...
Please share ...🙌🙌
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
Thank you , very useful video ❤
Thanks Pedro!
Thank you so much! Great!
Thank uuuuuuuu . And how many ways we have to insert record to database like mysql. Thank u again for this video
Thank you so much, sir 👍♥️🤝
Cool vid. Would love to see something like using react query with firebase, if that's something you find interesting.
Questions can come in⬆️.
There is also RTK Query, from Redux Toolkit.
Awesome tutorial
hi
Can you make a series on how to use swr client side fetching in nextjs and react query as well.
great video, thx
love it!
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
Fantastic. Thank you!
More videos about how to structure a large project with react query :)
Will do!
I wish you showed stale option in react-Query. Anyways nice video!!
please if it's possible, when u have time, ---> context api vs prop drilling thanks a lot
Great video thanks ! What's the theme plzzzzzzz ?
I’m surprised you didn’t mention rtk query, that’s another one, lots of people love using. Still great video
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
RTK query is so cool 🙂
Thank you dude. Is the suspense new feature still experimental or can it be used in production for nextjs apps?
Its not experimental anymore, it came with react 18!
just cmt to say thank you ❤
Could you please help me how to fetch data from mssql database stored procedure to reactjs
nice one
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??
+1 ! Show us something real, please. Best practices in your opinion.
Thanks!
Thank you so much for the support!!
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
I want to fetch the data from the server which uses jwt auth. Please help me.
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.
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?
@@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
@@PedroTechnologies I'm also curious what makes you choose SWR instead of React Query for NextJs App ?
@@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),
},
};
};
@@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 ;
.....
18 version is fast but 16 version too slow my office project running 16 version how to fast do it?
Please also make video on testing i.e Jest etc
Thanks
Just posted one a couple hours ago hahaha
@@PedroTechnologies wow, hahahah
thanks bro ❤
Brother pedro can you make a tuotrial creating a User Management System using React Js and MUI
Questions can come in⬆️.
1:55 fetch api is a browser api, technically not built in into javascript but in the browser
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
Do I need to fetch data in react, if I used nodejs for backend?
Yes frontend needs to do network requests to get data from backend. Doesn't matter if it's node server, python or java.
The frontend has to fetch the data from the backend in order to get the data.
ainda bem que vc não usou o typescript
Damn to Redux Toolkit Query.
Hi, am using axios to fetch data but am getting this kind of error...... AxiosError: Network Error
There might be an error with your network.
@@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.
async await is the best way.
am dead 29:29 "writting code that doesn't male sense"
Fetch api is built-in the browser not node
Fetch is not part of javascript. Fetch belongs to BOM(browser object model)
in turn, belongs to the javascript library!!
I meant that when you are using javascript, you don’t have to download any extra library to use the fetch api.
@@nanimys no sir, there is a reason it's called an api, we use it on javascript but it's not built in javascript
@@mentoriii3475 Exactly!
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
Couldn’t agree more!
You forgot RTK Query :/
RTK Query is interesting, but I don't use it a lot since I am not that fond about Redux
what do you recommend to use with Zustand?
Zustand + React Query?
@@RicardoGuillen if you know RTK, stick to that one and learn it well. Its great
Who wants to steal his intro bgm?
Great Tutorial on four ways to fetch data in React. Thanks, Pedro
{2022-06-14}, {2023-09-06}
const { isLoading, error, data, isFetching } = useQuery(["dog"], () =>
axios
.get("random.dog/woof.json")
.then((res) => res.data)
);
This is right way