Kent C. Dodds: 0:00 One of the hardest problems in computer science is a cache. How do you know when you can invalidate a cache? How do you know whether your cache is stale, or if it has valid data? It's a really difficult problem.

0:11 To compound that problem, we also have state that we need to manage in our UI. What happens often is people will lump things together, where we have our UI and our server cache, all put together in one big global store for our application, all in one place.

0:26 It makes things really complex, where we can actually simplify things considerably if we choose a good abstraction for our server cache, and then separate our UI state from that server cache, because they are two different things.

0:39 The data that you get from your backend, when you bring it over to the frontend, that frontend data is just a copy of what's on the backend, and you don't know if that copy is stale or invalid. Keeping that up to date is a tricky problem. My favorite solution for tackling that problem is React Query.

0:57 I give you an example of how to use React Query here in the background, and you also have some links to documentation in here. Definitely take a look at that. For our exercise, we've got our application all fleshed out, except we don't request any of the data yet because we're going to be doing that with React Query.

1:16 Our backend developers have created a bunch of endpoints for us that we're going to use, so we're going to get all of the list items. We can create a new list item for our reading list. We can update an existing list item, delete an existing list item and then get a specific book.

1:31 You'll notice that you don't have an API for getting a single list item even though there are some areas in the UI that you only need one list item. For those areas, you'll just have to get all of the list items and then grab the list item that is relevant to the page that you're on. The emoji will be around to help you out with that.

1:49 This exercise touches a lot of files. There's a fair amount of copy-paste that you'll be doing. We'll clean that up in some of the extra credit, but don't feel super uncomfortable if that's something that you're doing a lot. It is something that you're going to need to do. I also give you a little tip about the query key and the query function that you'll want to keep in mind as well.

2:10 Here's all the files you're going to be touching. Some of these are just a couple of lines or so, but it is a bunch of stuff in a lot of places.

2:18 I did put them in a specific order, so I do recommend that you go top to bottom here as you're working through this. Then, you can make your life a lot better by using hooks to reduce the amount of repetition that you're doing throughout the code base.

2:33 You'll be touching pretty much all of the same files to switch from the duplication to this abstraction with hooks. Then, we're going to use the React Query config provider to twist a couple of knobs to make React Query operate the way that we want it to for this specific application. Enjoy that. That one is just a single file, so that will be nice.

2:54 Then we need to handle mutation errors. I've got some examples of two specific situations where we want to show an error to the user if there was a failure in updating some of their data. Then we want to add a loading spinner for as the user is typing their notes for the list item, to indicate to the user that we are updating that data.

3:14 Then we've got a couple other optimizations that we're going to be making here as well with refetching the query on the Discover page and adding books to the query cache, so things load really fast. To make things even more interesting, we've got optimistic updates and recovery.

3:30 That's going to be a lot of fun. I think you'll really enjoy this. React Query is silly powerful, lots of opportunity for optimization and control over this cache, which is really a difficult problem. I'm excited to teach you all about React Query. Have a good time with this exercise.