A problem with UseQueryOptions type (lib version 5+)

[ValentinBond]

After upgrading the @tanstack/react-query package to version 5, I ran into a problem. I am using custom hooks like this:
const useUsersRetrieveQuery = <TSelect = UsersRetrieveType>({ ...options }: UseQueryOptions< UsersRetrieveType, ErrorType, TSelect> = {} ) => { return useQuery<UsersRetrieveType, ErrorType, TSelect>({ queryKey: [...], queryFn: usersRetrieve, ...options, }); };
and set queryKey inside that hook. Everything worked fine before, but now I get the error "Property queryKey is missing in type {} but required in type". I understand why this is happening. I just want to know the best way to use custom hooks with ts for queries.

[TkDodo]

please show at least a typescript playground. The general recommendation is to not pass type parameters to useQuery: https://tanstack.com/query/latest/docs/react/typescript#type-inference

[romanslonov]

@ValentinBond Hey, did you solve your issue? I face the same problem,

import { useQuery, type UseQueryOptions } from 'react-query';

function useCustomQueryHook (id: number, options?: UseQueryOptions<number>) {
    return useQuery({
        queryKey: ['custom', id],
        queryFn: () => Promise.resolve(id),
        ...options,
    });
}

useCustomQueryHook(5, {
    // ts error: Property 'queryKey' is missing
    staleTime: Infinity,
});

So what's the right way to pass additional options to custom hooks? @TkDodo

[diegoarcega]

this will work for some instance, but not for all:

https://www.typescriptlang.org/play?ssl=9&ssc=2&pln=3&pc=1#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0cMeY6cAqhtrngPJgzAQB2qcAvnAGZQQhwA5AAEYAQzbiAxgGsA9FHRipMALQBHHPkEBuAFB7uyFiuYsUGAMJoY-GvgASECDLgAKYABMAXHBbIQACNcIghGM1QAfl86EGAYAB4qLC16cNZUBP8g3AA+IkFNWgBpdDxBOAAfISL8ADEWQVyASkQ9OA64RRhkKHM0FNo3BHbOsdq8UrxfAG1BKRt+QSIvAF0CUbGOiYbfN1aAXly4AAU+OIwAOkVUCAAbADd0D09mja3Oy6+wpgz3zo4zX0HAMA2sqFsIHseCcLjcAFYiCMxhCxHd0AAVUDoXwASRY3GALHihD0gJ0QA

UseQueryOptions has 4 generics, and by only specifying one, the others fall back to their default values. So select won't work, and you won't get type inference for params passed to the queryFn etc.

I can't use Omit because : if I try and pass placeholderData: previousData => previousData, the previousData is typed as any.

[multivoltage]

I don't think problem is related to Omit or Partial

I say that since the v5 docs is

const result = useQuery({
  queryKey: ['todos', id],
  queryFn: () => fetch(`/todos/${id}`),
  placeholderData: (previousData, previousQuery) => previousData,
})

and here previousData is any

[TkDodo]

it's any because the queryFn is not typed and fetch returns Promise<any>

[multivoltage]

Yes. My answer was for DiegoArcega

[hu-ke]

this will work for some instance, but not for all:

https://www.typescriptlang.org/play?ssl=9&ssc=2&pln=3&pc=1#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0cMeY6cAqhtrngPJgzAQB2qcAvnAGZQQhwA5AAEYAQzbiAxgGsA9FHRipMALQBHHPkEBuAFB7uyFiuYsUGAMJoY-GvgASECDLgAKYABMAXHBbIQACNcIghGM1QAfl86EGAYAB4qLC16cNZUBP8g3AA+IkFNWgBpdDxBOAAfISL8ADEWQVyASkQ9OA64RRhkKHM0FNo3BHbOsdq8UrxfAG1BKRt+QSIvAF0CUbGOiYbfN1aAXly4AAU+OIwAOkVUCAAbADd0D09mja3Oy6+wpgz3zo4zX0HAMA2sqFsIHseCcLjcAFYiCMxhCxHd0AAVUDoXwASRY3GALHihD0gJ0QA

UseQueryOptions has 4 generics, and by only specifying one, the others fall back to their default values. So select won't work, and you won't get type inference for params passed to the queryFn etc.

Hey, this solution is not working for vue-query, have you tested that in vue?