TypeScript: How to type react-query useMutation onError with generic?

Question

Consider a custom useSignUp hook which mutate() function takes some fields (name and email in this example):

export default function App() {
  const name = "David";
  const email = "[email protected]";
  const signupMutation = useSignUp();

  return (
    <button
      onClick={() => {
        signupMutation.mutate(
          { name, email },
          {
            onSuccess: (result) => {
              ...
            },
            onError: (result) => {
              // Wanted: result of type ErrorResult<"name" | "email">
            }
          }
        );
      }}
    >
      Sign Up
    </button>
  );
}

I'd like onError's result to be of type ErrorResponse<"name" | "email"> in this case. But, I get ErrorResponse<string>.

Why is that? How could I instruct TypeScript to infer the type to be specific based on the passed data (i.e. "name" | "email", not string)?

Here is how I typed useSignUp:

type SuccessResponse = {
  userId: string;
};

type ErrorResponse<T> = {
  userId?: string;
  formErrors?: Array<{
    field: T;
    type: string;
  }>;
};

export const useSignUp = <T extends string>() => {
  return useMutation<SuccessResponse, ErrorResponse<T>, Record<T, string>>(
    (data) => {
      return new Promise((resolve, reject) => {
        // Some logic here to either return a success or an error response
        if (Math.random() > 0.5) {
          resolve({
            userId: "1234"
          });
        } else {
          reject({
            formErrors: [
              {
                field: "email", // I want TypeScript to complain if it's neither "name" nor "email"
                type: "ALREADY_EXISTS"
              }
            ]
          });
        }
      });
    }
  );
};

About your reject signature, the param can't be changed. See this answer. — NearHuscarl
– NearHuscarl, Commented Oct 10, 2021 at 11:51
@MishaMoroshko could you please provide reproducible example? — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Oct 10, 2021 at 13:01

NearHuscarl · Accepted Answer · 2021-10-10 11:26:15Z

6

You've already declared a hook with a generic error field, if you don't provide the param, it defaults to a string:

export const useSignUp = <T extends string>() => {
  return useMutation<SuccessResponse, ErrorResponse<T>, Record<T, string>>(...)
}

So make sure to override it:

type Field = 'name' | 'email';

// ...

useSignUp<Field>();

If you want to type the error based on the submitted values:

const mutatedValues = {
  name: "David",
  email: "[email protected]"
};
const signupMutation = useSignUp<keyof typeof mutatedValues>();

onError: (result) => {
  result.formErrors?.forEach((e) => {
    const { field } = e; // field is 'name' | 'email'
  });
}

answered Oct 10, 2021 at 11:26

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Misha Moroshko Over a year ago

Is it possible to avoid providing the generic to useSignUp and let TypeScript to infer it somehow?

NearHuscarl Over a year ago

@MishaMoroshko In theory, I think Typescript can infer the params of the onError callback based on the mutatedValues by making the mutate() function from react-query aware of the key of the data, but the library doesn't support it. They only allow you to override TData or TError individually.

TkDodo Over a year ago

the types need to be defined on the useMutation call. You can't have useMutation infer it's types based on what you will then eventually pass to mutate. Either pass the generics explicitly as suggested here, or make a specific mutation that is tied to userName / email (no generics), or pass the fields directly to useMutation (if available) so that you can infer from it: const signupMutation = useSignUp({ name, email });. You can then call .mutate() without params and closure over what you've passed to useMutation. Then, inference should work.

Collectives™ on Stack Overflow

TypeScript: How to type react-query useMutation onError with generic?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related