Video details

Simple data fetching with React Query - Daniel Mocan | JSHeroes 2022

React
08.15.2022
English

Data fetching is one of the most common task for frontend applications, but it often ends up requiring a lot of code to handle different scenarios. React Query can simplify some of this tasks and even add some extra cool features. I will show you some of the most common use case, with code example so you can decide if React Query is the right tool for you.

Transcript

Thank you, Alex, for introducing me. For me, it's really special to be here because I admire JS Rose from the First Date editions. And after all these amazing talks that we had in the previous years and this year I have the opportunity to be here on stage and it's really special for me. Today we're going to speak about simple data fetching with a query. But before we do that, I want to say a few words. The thing is, with React, probably one of the most tasks that probably actually web developers in general do it's fetched data from an API. And let's make this one simpler because it sometimes gets messy. And I hope at the end of this talk you will want to at least try and have a look at the Reactivary, because I think it really helps that part. A few words about me. Alex told a big part of it. My name is Daniel. I work as a software developer at Fortek. I also help organize the local meetups. So if you ever feel like sharing something with the community, we can either do it in person or online. If you're from abroad or another city, just contact me and we'll make it happen. First, let's see how we do data fetching in React. I would say in a classical way. So probably we have something like in a used state, we do an API call. First of all, I'm going to use it a few times, so I'm going to explain it. We have an office service there. Usually what I do, I create a utility function that handles all the API integration and I just use the functions from that utility in my rec components. So, for example, if I want to change the fetching from Fetch to Axios, I just go and modify it in that utility and then it's available in all the applications, so I don't have to do this in each component. So here in the Use effect, we go and we get the products. And then when we have the products, we set them in the local state. We also have loading flag so we can show the user spinner while we're fetching the data. It's nothing complicated, but we can do this one even simpler. So here we have the same implementation with your query. So what we have to do is just import the Use query function from your query and then we use it. Usequery receives three parameters. The function, it receives a query key, which we have products here. And from service we use the Guest Products function. And it also has a third parameter that we don't use it here, but it's for extra options and we're going to see a bit later what options we have there. And if you see it's much more simpler, we dropped like at least ten lines of code. And I could have made the classical data fetching even more complicated if I wanted to add is error or other things but here I try to keep it as simple as so you can see the difference and for example if you wanted to add Easter or we didn't have to add any logic we would just import it from square and that's it. The setup is quite easy, it's nothing complicated, we just need to of course first of all install the React query library and then in the top of your component chain you wrap the query client provider from React query client and also if you want you can import the React dev tools we're going to see a bit later. They're quite nice and easy to use. So what is react query? React query is a library that helps you simplify data fetching in React or react native. It works also on react native it helps manage your server state by making fetching caching and synchronizing and update much easier. I mentioned a bit service state I want to talk a bit about what client state and server state because it's really important. Server state is your persistent data layer so it's usually behind an API. It's on the back end and it's your true data layer because that's where you have all your information kept and that's the latest update sorry it has a bit of leg so in the client state we usually fetch the data. We add it in the client state we use some kind of global state management. Maybe redux or other libraries and the thing is that data becomes stale in time so the data from the front end. From the back end it becomes not connected. Requires goal is to make you as close as possible to the server state. So by doing this, react query makes data fetching caching and synchronizing your data with the server state much easier. Now I'm going to show you a few things why I like React query. It's not all of them that I like but I had to limit a number of them. For example here we have an example of mutation that is used to add or modify some data in the server stay. So basically in the back end and what I like a lot is that after we do the call and we add the product we can easily invalidate the data by using on success we tell React query hey. If you have any components that use products invalidate the cash and what this does is they go and refresh automatically that data so you don't have to do any kind of handling of this part because they do it for you and I think that helps a lot and this is just one of the things that you can do. Also I mentioned the tools are simple and nice, you can see the data, you can invalidate the data, do refresh and they also have there if you see the stale part you can see how old when it was the last time they fetched the data. There are even more things that I like. So first of all, the things that made wow for me was you saw the difference of code. I mean, we went from 25 35 lines of code to at least ten lines less. That means less places to make bugs. Plus it's much easier to see and understand what's happening there. They have by default, automatic retries. So if you have a Flaky API, what's nice react query goes and tries to fetch the data three times before it fails. So that's by default. And it's really good because again, you don't have to add extra code to do that. They have a really nice thing in their documentation that I like. It's aggressive and same default, which I really recommend to read them because they're really important. Most of the things that they added there is value for most of the projects. So remember I told you about the option part of the query there. You can invalidate some of these defaults. For example, I don't want three retries. I just want one where I want more. You can modify it. There data caching it five minutes. If you want, you can make it less or more. You just need to change those defaults. They also have Ddopping, so if you have components that use the same endpoint, reactor will not do two fetches, it will just do one and will fetch data just once. So that improves the number of API calls that you have to do. Plus also the data. It's in sync because it's widely used. It has close to 1.4 million downloads in the past week. So you have a lot of community and a lot of projects use it. They also have a lot of features out of the box I didn't even mention. Like, for example, if you out of focus, one of the windows that your application is, and you go back, it automatically refreshes the data because you focused on that window. Thank you very much. I hope I sparked your mind with graph query, and I really recommend to use it and give it a try. I think it's going to help simplify your data fetching. Thank you.