reactjs - TypeScript: Hur typas react-query useMutation onError med generisk?

Tänk på en anpassad useSignUp-hook vars mutate()-funktion tar vissa fält (name och email i detta exempel):

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

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

Jag skulle vilja att onError:s resultat är av typen ErrorResponse<"name" | "email"> i det här fallet. Men jag får ErrorResponse<string>.

Varför är det så? Hur skulle jag kunna instruera TypeScript att härleda typen till att vara specifik baserat på den passerade datan (dvs "name" | "email", inte string)?

Här är hur jag skrev 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"
              }
            ]
          });
        }
      });
    }
  );
};

Svar #1

Du har redan deklarerat en hook med ett generiskt fält för fel, om du inte tillhandahåller parametern används en sträng som standard:

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

Så se till att åsidosätta det:

type Field = 'name' | 'email';

// ...

useSignUp<Field>();

Om du vill skriva felmeddelandet baserat på de inskickade värdena:

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

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

Relaterade artiklar