TypeScript: Selectors for inifinite query less expressive

[jasperkuperus]

Describe the bug
Selectors in combination with useQuery look very good. Creating multiple hooks on top of the original useQuery hook, allowing you to get different parts of the data out the query result as described in https://tkdodo.eu/blog/react-query-data-transformations in particular (e.g. useTodosCount, useTodos, useTodo(id)).

Now, when using useInfiniteQuery, I'm able to do the same thing. But TypeScript won't let me. It forces me into the InfiniteData type, hence the { pages, pageParams } format.

To Reproduce

What I'd like to do is twofold:

• Get an array of all items concatenated over all pages
• Get the total count of items available in the backend

Type definitions of a simplified example:

interface Entity {
 id: string;
 // ...
}

interface APIResponse {
 total: number; // Total number of entities available in the backend
 totalPages: number; // Total number of pages with entities
 items: Entity[]; // The entities for this requested page
}

interface DesiredDataResult {
 total: number; // Same value as total in APIResponse
 items: Entity[]; // Concatenation of all items on all fetched pages (flatMap of `page.items`)
}

Now, I try to build the DesiredDataResult in the selector:

const { data: result } = useInfiniteQuery(
 ['entities', 'list'],
 async ({ pageParam = 0 }) => getPageFromAPI(pageParam),
 {
 getNextPageParam: (lastPage, allPages) =>
 lastPage.totalPages > allPages.length ? allPages.length : undefined,
 select: React.useCallback(
 (data: InfiniteData<APIResponse>) => ({
 total: data.pages[0].total,
 entities: data.pages.flatMap((page) => page.items),
 }),
 [],
 ),
 },
);

And I get this TypeScript error. It wants me to use the { pages, pageParams } type.

Type '(data: InfiniteData<APIResponse>) => { total: number; entities: Entity[]; }' is not assignable to type '(data: InfiniteData<APIResponse>) => InfiniteData<APIResponse>'.
 Type '{ total: number; entities: Entity[]; }' is missing the following properties from type 'InfiniteData<APIResponse>': pages, pageParams ts(2322)

Therefore, selectors in combination with useInfiniteQuery are less expressive than with useQuery. Maybe I'm missing something?

Expected behavior
I would have expected to be able to apply selectors with the same expressiveness as useQuery on useInfiniteQuery.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.2

[TkDodo]

@jasperkuperus I think I was able to do this for v4. can you have a test with the codesandbox preview build to see if that screwed something up?

#3088 (comment)

[jasperkuperus]

@TkDodo I've forked the TypeScript sandbox from your PR and converted the useQuery into useInfiniteQuery, faking an infinite scroll by keeping the posts HTTP request with just 1 page. In this sandbox, I've chosen to just return an array with all Posts from select. I've tried with and without the generics.

Check out line 56, it has a console.log with the data, which you can use to easily inspect the type of the data, it's still InfiniteData<...>.

What you can see in this sandbox, is that it works like a charm. The only culprit are the typings 😊

[TkDodo]

Do you have a link to that sandbox?

[jasperkuperus]

Oops, sorry about that: https://codesandbox.io/s/tannerlinsley-react-query-basic-typescript-forked-qh3e6?file=/src/index.tsx:166-169 🥲

[TkDodo]

@jasperkuperus thanks, you are right. I also need to adapt the UseInfiniteQueryResult- not only the InfiniteQueryObserverOptions. Also, I better add some type assertion tests because I totally missed this :)

[TkDodo]

I sadly couldn't get anywhere. This is super complicated. I got stuck with fetchNextPage / fetchPreviousPage. Not even sure if the return value of these functions runs through select or not.

Since this is the 3rd time that I've tried to implement this, thinking "how hard can it be", I'm gonna leave this note to myself: It's quite hard.

Feel free to pick it up if you want :)

[TkDodo]

sorry, I wanted to close the PR, not the issue

[jasperkuperus]

I could give it a shot, but I have no idea when I'll be able to find the time for it. Maybe the great @tannerlinsley himself? 😃