Server State Management with TanStack Query

[00:00:00]
>> David Khourshid: All right, so I want to briefly talk about fetching data because when you look at your applications, or at least many applications in React that I've seen, some of the most, I don't want to call it egregious, but some of the most common uses of Use state and Use effect are for fetching data and React.

[00:00:23]
It gives you actually a couple patterns or, sorry, React naturally gives you a pattern right now to prevent that. And that's using Suspense and using server components. Now if you don't have the ability to do that, like you're not on the latest version of React and that's not possible.

[00:00:44]
One of the more common approaches that you could do is using a third party data fetching library. So I'm going to go to Fetch readme. Commonly we see this useEffect and useState dance when we're searching for results. You've probably seen this code all over the place. This is just a very common example of how you have accidental complexity.

[00:01:15]
This has almost nothing to do with the problem domain that we're working with. It's in fact the only line that matters is this one right here. Well, this one and the actual flight search. Everything else is just noise. And so this is an example of how it just makes things really confusing to work with, even though like it's an extremely common pattern.

[00:01:37]
So, what can we do instead? We can actually use a library like Tanstack Query. And so with Tanstack Query, it has so many features that if you were to build your own data fetching abstraction, some of these features are things that you might run into in the future and realize that.

[00:01:58]
All right, Tanstack Query already has this built in, such as being able to define how long to keep things in the cache or automatic retries and things like that. So how many of you have actually heard of or are using Tansat Query in your applications? All right, 50%, that's [LAUGH].

[00:02:21]
Yeah, and I'm sure that many of you have honestly just done this Use effect pattern. And even this isn't perfect. Like we need to set let is is canceled to like false and then we need to do some cleanup. So return is canceled. True, this used to be like the way that you would fetch data and use effects the proper way.

[00:02:47]
But now instead of that, the more modern way is like const aborts controller. You set up an abort controller and then you have abortcontroller aborts. And then you could either pass it in natively if it supports it, or you could do something where if the signal is aborted, then return, it gets really confusing.

[00:03:09]
And these are things that you're typing over and over and over again. And that's why it's tempting to make your own abstraction or to just copy paste this entire thing. And even when you ask AI coding assistants, they're probably going to create a useEffect useState mess just like this for fetching data.

[00:03:28]
But instead of that, we could just use query. So with Tanstack query, it does require a query client, and I'll show you where that's set up, but you give it a query key. And so this is going to be an array that uniquely identifies the data that you're loading.

[00:03:46]
So we scope this, we're seeing that this is flights, and we pass in the flight search data so that if the flightsearch data changes and we refetch again, we know that we're not going to reach into the cache because there is no cache item for this. Or we're going to have to make a new search, which happens over here.

[00:04:07]
And honestly, these are pretty optional. There's also mutations if you want to like, instead of fetching within a component, you want to just fetch directly when some, when some side effect is supposed to happen.