React Query typing explanation

[MathisBarre]

As you can see here, this project use additional types for react query.

I honestly find it hard to understand what they are doing.

It would be great if someone could add some explanations

[diegods-ferreira]

I really would like that too. I'm now having a really hard time trying to adapt those type declarations to React Query V4 =/

[kbzowski]

+1 Also would be great if I could set onError(error: AxiosError) for QueryConfig. Only onError(error: any) works

[diegods-ferreira]

For anyone who would like to know, I was able to adapt the MutationConfig type to work with React Query v4. It is like this now:

import { AxiosError } from 'axios';
import { QueryClient, UseQueryOptions, UseMutationOptions, DefaultOptions } from '@tanstack/react-query';
import { AsyncReturnType } from 'type-fest';

...

type Fn = (...args: any) => any;

export type MutationConfig<MutationFnType extends Fn> = UseMutationOptions<
  ExtractFnReturnType<AsyncReturnType<MutationFnType>>,
  AxiosError,
  Parameters<MutationFnType>[0]
>;

[tripol]

Hi @diegods-ferreira Please where does MutationFnType come from?

[alvinvin00]

Hi @diegods-ferreira Please where does MutationFnType come from?

that's a generic

[diegods-ferreira]

Hi @diegods-ferreira Please where does MutationFnType come from?

that's a generic

That's right

[tripol]

Thanks @alvinvin00 @diegods-ferreira

[klevytskyi]

For those struggling like me. Leaving here another variation of MutationConfig compatible with react-query 4+, typescript 5.1+ and no-args mutation functions support.

type Fn = (...args: any[]) => any;

type GetTVariables<T> = T extends (...args: infer R) => any ? (R extends [infer TVar, ...any] ? TVar : void) : never;

export type MutationConfig<MutationFnType extends Fn> = UseMutationOptions<
  ExtractFnReturnType<Awaited<ReturnType<MutationFnType>>>,
  AxiosError,
  GetTVariables<MutationFnType>
>;

[galih56]

Hi @diegods-ferreira Please where does MutationFnType come from?

that's a generic

What do you mean by generic?

[mateuscqueiros]

Hi @diegods-ferreira Please where does MutationFnType come from?

that's a generic

What do you mean by generic?

A generic is a special notation in typescript that allows you to use a variety of types within the same definition. Think of it as parameters for functions, but instead of passing values, we are a passing a type itself. In the example, the code inside the <> called MutationFnType (which could be any name you want, much like a parameter for functions) is a generic. After that he can use that MutationFnType inside of the type definition, given that we know that MutationFnType is a function (MutationFnType extends Fn).

MutationFnType is called a type variable, because it is capturing and storing a type that will be used later, as we wish.

Documentation for Generics in Typescritpt: https://www.typescriptlang.org/docs/handbook/2/generics.html