useful-bronze

Proper types for custom query hook

Hello. I'm trying to add types to custom query hook but get an error. What do I do wrong? Here is the code:

export const useFetchUserQuery = <TSelect = UserType>({
  ...options
}: UseQueryOptions<UsersFromApiType, ErrorType, TSelect> = {}) => {
  return useQuery<UsersFromApiType, ErrorType, TSelect>({
    queryKey: users.retrieve,
    queryFn: usersRetrieve,
    select: ({ oldKey, ...rest }) => ({ newKey: oldKey, ...rest }),
    ...options,
  });
};

export const useFetchUserQuery = <TSelect = UserType>({
  ...options
}: UseQueryOptions<UsersFromApiType, ErrorType, TSelect> = {}) => {
  return useQuery<UsersFromApiType, ErrorType, TSelect>({
    queryKey: users.retrieve,
    queryFn: usersRetrieve,
    select: ({ oldKey, ...rest }) => ({ newKey: oldKey, ...rest }),
    ...options,
  });
};

Here is the error:

Diagnostics:
No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ context?: Context<QueryClient | undefined> | undefined; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TSelect | undefined, query: Query<...>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Type '{ context?: Context<QueryClient | undefined> | undefined; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TSelect | undefined, query: Query<...>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is missing the following properties from type 'readonly unknown[]': length, concat, join, slice, and 19 more.

Diagnostics:
No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ context?: Context<QueryClient | undefined> | undefined; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TSelect | undefined, query: Query<...>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Type '{ context?: Context<QueryClient | undefined> | undefined; enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TSelect | undefined, query: Query<...>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is missing the following properties from type 'readonly unknown[]': length, concat, join, slice, and 19 more.

7 Replies

ratty-blush•3y ago

Duplicate? https://discord.com/channels/719702312431386674/1060997773442424912

useful-bronzeOP•3y ago

I guess the main question is quite similar. I'm trying to make reusable wrapper hook. The main reason is to assign type correctly for resp and error. Do you think I need to get rid of this wrapper? Why?

ratty-blush•3y ago

then you need to get the generics right - all 4 of them 🙂

useful-bronzeOP•3y ago

I guess I've added three of them. Should I add generic for key? Is it a reason of error?

ratty-blush•3y ago

yes

useful-bronzeOP•3y ago

I've added forth type for query and the error still present:

export const useUsersRetrieveQuery = <TSelect = UsersRetrieveOutputType>({
  ...options
}: UseQueryOptions<
  UsersRetrieveOutputType,
  ErrorType,
  TSelect,
  string[]
> = {}) => {
  return useQuery<UsersRetrieveOutputType, ErrorType, TSelect, string[]>({
    queryKey: users.retrieve,
    queryFn: usersRetrieve,
    select: ({ mu, ...rest }) => ({ mainUser: mu, ...rest }),
    ...options,
  });
};

export const useUsersRetrieveQuery = <TSelect = UsersRetrieveOutputType>({
  ...options
}: UseQueryOptions<
  UsersRetrieveOutputType,
  ErrorType,
  TSelect,
  string[]
> = {}) => {
  return useQuery<UsersRetrieveOutputType, ErrorType, TSelect, string[]>({
    queryKey: users.retrieve,
    queryFn: usersRetrieve,
    select: ({ mu, ...rest }) => ({ mainUser: mu, ...rest }),
    ...options,
  });
};

ratty-blush•3y ago

show a typescript playground please

Gaming

Programming

Proper types for custom query hook

Did you find this page helpful?