typescript issue when using useInfiniteQuery with select

[iamhaaamed]

I want to konw how can I use useInfiniteQuery with select. This is what I did:

export interface User {
  id: number;
  first_name: string;
  last_name: string;
  username: string;
  email: string;
  password?: string;
  branch: string;
  role: 'administrator' | 'user';
  phone?: string;
  avatar?: any;
  active?: number;
}

type Params = { pageParam?: number };
type Response = { users: User[] };

async function getUsers({ pageParam = 1 }: Params): Promise<Response> {
  const response = await client({
    url: `system/users?page=${pageParam}`,
    method: 'GET',
  });
  return response.data;
}

export function useUsers(config: UseInfiniteQueryOptions<Response>) {
  const queryKey = getQueryKey('users');
  return useInfiniteQuery(queryKey, getUsers, {
    getNextPageParam: (lastPage, allPages) => {
      const morePagesExist = lastPage?.users?.length === 10;
      if (!morePagesExist) return false;
      return allPages.length + 1;
    },
    select: (data) => ({
      ...data,
      pages: data.pages.flatMap((page) => page.users),
    }),
    ...config,
  });
}

but it shows me this error:

Type '(data: InfiniteData<Response>) => { pages: User[]; pageParams: unknown[]; }' is not assignable to type '(data: InfiniteData<Response>) => InfiniteData<Response>'.
  Call signature return types '{ pages: User[]; pageParams: unknown[]; }' and 'InfiniteData<Response>' are incompatible.
    The types of 'pages' are incompatible between these types.
      Type 'User[]' is not assignable to type 'Response[]'.
        Property 'users' is missing in type 'User' but required in type 'Response'.ts(2322)

[TkDodo]

show a typescript playground please

[iamhaaamed]

show a typescript playground please

This is the playground:
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnm...

[TkDodo]

UseInfiniteQueryOptions takes generics, which you've just left out:

fixed playground

the problem is though that you are creating a very wide interface. TypeScript would be fine with passing in a new queryKey or queryFn via options. It's usually not a good abstraction to allow "all options of useQuery" to be passed to your custom hook. There are also options that likely should be the same per observer, like staleTime, that you do not want consumers to pass in.

[daisymaclennan]

@TkDodo I am struggling to get useInfiniteQuery working due to "Expected 1-2 arguments, but got 3." which is also demonstrated in this fixed playground example you've posted. Is there any way to get around this issue?

[TkDodo]

because v5 has a different syntax and this playground is half a year old....

v5 syntax playground