Theo's Typesafe Cult•3y ago

Creating Zod Input Validation Error after tRPC entry

I've got a ct3a project, with all the bells and whistles (including tRPC and zod). In addition, on the frontend part of the app I've set up a couple of forms with react-hook-form, and I am sharing the zod schemas being used with tRPC. What I'm looking to achieve, is AFTER the input validation by the tRPC router mutation has been completed, and the code has moved on into the logic within the mutation itself, to be able to send back an input validation error and set these errors in react-hook-form. This would be the business logic: 1. User begins registration flow. 2. User enters their email and username along with other fields. 3. React-hook-form uses a shared schema (with tRPC) to validate items such as minLength, isEmail, regex for special characters, etc. 4. User submits valid the form-data to tRPC via a mutation. 5. tRPC accepts and validates the incoming input (since the same schema is being shared on the frontend). 6. In the mutation, the username field is checked in the database to find if it already exists. 7. If username already exists, a BAD_REQUEST error (or something equivalent in the 400 range) would be sent back to frontend, which then can be inserted into react-hook-form. P.S. I have no clue if this (https://trpc.io/docs/v9/error-formatting#all-properties-sent-to-formaterror) plays into what I'm looking for.

Error Formatting | tRPC

The error formatting in your router will be inferred all the way to your client (& React components)

41 Replies

Piotrek•3y ago

I am using the Form component from advanced guide in react-hook-form (https://react-hook-form.com/advanced-usage/#SmartFormComponent). I use my onSubmit prop of the component to return either void/null when there's no error, or MyAppError[] (which has the same type as validation errors from Zod +tRPC) Then I just set those errors to those returned from my onSubmit prop. Example implementation:

// components/my-form.tsx

// ...
    <form
      onSubmit={(e) => {
        e.preventDefault();

        handleSubmit(async (data) => {
          const errors = await onSubmit(data);

          (errors || []).forEach((error) =>
            setError((error?.path ?? "") as Path<T>, {
              message: error?.message,
            })
          );
        })(e);
      }}
// ...


// pages/sign-up

// ...
   <MyForm
      onSubmit={(data) => {
        await sendMutationAndDoStuff();

        return errors || null;
      }}
// ...

// components/my-form.tsx

// ...
    <form
      onSubmit={(e) => {
        e.preventDefault();

        handleSubmit(async (data) => {
          const errors = await onSubmit(data);

          (errors || []).forEach((error) =>
            setError((error?.path ?? "") as Path<T>, {
              message: error?.message,
            })
          );
        })(e);
      }}
// ...


// pages/sign-up

// ...
   <MyForm
      onSubmit={(data) => {
        await sendMutationAndDoStuff();

        return errors || null;
      }}
// ...

Advanced Usage

Performant, flexible and extensible forms with easy-to-use validation.

Piotrek•3y ago

I also created an error class for faster implementation for my custom errors (you can uimplement your own formatter)

import { TRPCError } from "@trpc/server";
import {
  formatCustomError,
} from "../utils/formatCustomError";

export class BadReqTRPCError extends TRPCError {
  constructor(message: string, path: string) {
    const errorConfig = {
      code: "BAD_REQUEST" as typeof TRPCError.prototype.code,
      message: formatCustomError(message, path),
    };

    super({
      ...errorConfig,
      cause: new TRPCError({
        ...errorConfig,
      }),
    });
  }

import { TRPCError } from "@trpc/server";
import {
  formatCustomError,
} from "../utils/formatCustomError";

export class BadReqTRPCError extends TRPCError {
  constructor(message: string, path: string) {
    const errorConfig = {
      code: "BAD_REQUEST" as typeof TRPCError.prototype.code,
      message: formatCustomError(message, path),
    };

    super({
      ...errorConfig,
      cause: new TRPCError({
        ...errorConfig,
      }),
    });
  }

Example usage: throw new BadReqTrpcError("message", "username")

Gaming

Programming

Creating Zod Input Validation Error after tRPC entry