How to use schema validation with Typebox

[ShivamJoker]

I am planning to use Typebox on fastify to generate schemas and types for validation (https://github.com/sinclairzx81/typebox#readme)

But I have no idea how it can be integrated with hook form as well.

Example from typebox

import { Static, Type } from '@sinclair/typebox'

//--------------------------------------------------------------------------------------------
//
// Let's say you have the following type ...
//
//--------------------------------------------------------------------------------------------

type T = {
    id: string,
    name: string,
    timestamp: number
}

//--------------------------------------------------------------------------------------------
//
// ... you can express this type in the following way.
//
//--------------------------------------------------------------------------------------------

const T = Type.Object({               // const T = {
    id: Type.String(),                //   type: 'object',
    name: Type.String(),              //   properties: { 
    timestamp: Type.Integer()         //      id: { 
})                                    //         type: 'string' 
                                      //      },
                                      //      name: { 
                                      //         type: 'string' 
                                      //      },
                                      //      timestamp: { 
                                      //         type: 'integer' 
                                      //      }
                                      //   }, 
                                      //   required: [
                                      //      "id",
                                      //      "name",
                                      //      "timestamp"
                                      //   ]
                                      // } 

//--------------------------------------------------------------------------------------------
//
// ... then infer back to the original static type this way.
//
//--------------------------------------------------------------------------------------------

type T = Static<typeof T>             // type T = {
                                      //    id: string,
                                      //    name: string,
                                      //    timestamp: number
                                      // }

//--------------------------------------------------------------------------------------------
//
// ... then use the type both as JSON schema and as a TypeScript type.
//
//--------------------------------------------------------------------------------------------

function receive(value: T) {         // ... as a Type

    if(JSON.validate(T, value)) {    // ... as a Schema

        // ok...
    }
}

[bluebill1049]

you probably have to build a custom resolver: https://react-hook-form.com/api/useform

and I am not familiar with this Typebox library as well.

[ShivamJoker]

Typebox is just generating JSON schema and it can be used with libraries like ajv - https://ajv.js.org
Is there any way we can use json schema to validate here as well ?

[bluebill1049]

there is a feature request which need help with AJV resolver: react-hook-form/resolvers#309

[silvio2402]

For anyone stumbling across this, there is actually a react-hook-form resolver for TypeBox.

Here it is mentioned in an official repo:
github.com/react-hook-form/resolvers#typebox

However, I'm not satisfied with using TypeBox as a resolver, since I couldn't find any way to customize the error messages. This is important because the error messages are mostly very generic.
Here are a couple examples:

• "Expected string length greater or equal to 8"
• "Expected string to match '^(?=.[A-Z])(?=.[0-9])(?=.[a-z]).$'"

I'm honestly considering switching to something like Zod altogether.

[LouizFC]

I had this problem too. But it was solved by the following code:

import { DefaultErrorFunction, SetErrorFunction } from "@sinclair/typebox/errors";
// this should be declared only once
SetErrorFunction((error) => {
 return error?.schema?.errorMessage ?? DefaultErrorFunction(error);
});

and declaring errorMessage on your schemas like this

Type.Object({
  description: Type.String({
    minLength: 1,
    errorMessage: "Description can't be empty",
  }),
})