Transcript

00:00 Let's take a look at one more exercise, which is we're creating a wrapper around useQuery. Now useQuery, what we're doing here is we're using the object API and we're wrapping it in a useAPI function. That useAPI function is going to take a token from useAuthToken,

00:17 and the query function is going to take in the key, and it's going to then pass in the token so that you can then use it in your query function. If we look at here, we should be able to call it with this query key, and then pass in our query function,

00:33 which should have the context and the token here. This is tricky because we're going to need to dive into React Query types again to figure out what type various things should be. Because the API is not exactly the same as useQuery, it's a lot simpler. In fact, we're not having to do any of

00:52 the initial data stuff that we saw in the previous exercise. But we are trying to make sure that if we pass in an array of strings for the query key, then it's going to be typed to string and make sure that the token is typed correctly, and also make sure that the data is typed correctly too. If we're returning promise.resolve ID1 name MapOC,

01:11 then that should be the type that comes back too. Your job is to type this useAPI function, figuring out exactly what types you should use, what constraints you should use from React Query, if any, and make sure that all of our tests pass. Good luck.

Problem

Wrapping useQuery

In this exercise, we will be creating a wrapper around useQuery:


const useApi = (
	queryKey: any[],
	queryFn: (key: any, token: string) => Promise<any>
) => {
	const token = useAuthToken();
	return useQuery({
		queryFn: (ctx) => queryFn(ctx, token),
		queryKey,
	});
};

We are