Working with External Libraries 5 exercises

Understanding React Query's Overloads

TanStack React Query: An Overview

One of the most famous and widely-used React fetching libraries is TanStack React Query. It's an incredibly powerful tool for primarily used for handling client-side and server-side data fetching.

Here we have a simple getUser function which will be used to p

Loading exercise


00:00 In this exercise, we're going to be looking at one of the most famous, biggest React fetching libraries that's out there, which is TanStack React Query. You've probably used this before, but if you haven't, it's a really powerful library for doing client-side and server-side fetching of data.

00:17 And it can be used for other things, but that's what it's mainly used for, is data fetching. We've got a getUser function here, and of course, this has nothing to do with TanStack, but it provides us a framework for, let's say, calling this on the front-end and getting back some data from a third-party API.

00:33 Now, this getUser function here just returns a full name, a job, and a promise, and we can use this in our useQuery hook, passing in our query function. Now, query function here, and query1, we can see that actually gets inferred then as our thing down here, so getUser.

00:53 This means that we can go, and with a little optional chaining here because this one is all undefined, and we can then use that in our front-end to display the full name once it's fetched. Very, very cool.

01:07 Now here, we have our useQuery with a query function, getUser, and we can pass in some initial data here. And the initial data actually means, which is really, really cool here, we don't need to, so,

01:22 it doesn't actually require us to check for undefined because it knows that the initial data is always there. If we pass something incorrect here, then it starts to break apart. So query function, object that are all like, query function does not exist, so I'm actually not sure why that's happening.

01:38 We can see, though, that useQuery here is actually like inferring full name and job in there really nicely. So this is really cool behavior. UseQuery, it changes depending on whether you pass in an initial data or not.

01:54 And we can see that on useQuery itself, it's inferring these slots in various areas. So we've got full name, job, and we've got this one here. Now, how is this different to any of the other problems that we've looked at? Well, useQuery has a lot of overloads. It's up to nine.

02:12 I think a lot of them are disappearing, but the main subject of this exercise is to work out what these overloads are doing and how they're different from each other. And specifically, I want you to look at the first three overloads and tell me what's different about them to the other six.

02:31 The first three are doing something interesting that the other six aren't doing. Now, a lot of these overloads are to support different types of APIs that useQuery has supported over the years. And I think in a major version or something, they're going to consolidate them into a single API.

02:48 But I think that one will still have a couple of overloads. So that's your job is to try to work out what the overloads are doing. And as you'll see, they're pretty hairy. There's a lot going on here. So you're going to try and corporate once you define the difference between these overloads. Good luck.