Access input schema in the client

[solaldunckel]

Hi !

Would be awesome to have access to the input schema on the client for form validation.
It could be really useful if you pair it with packages such as react-hook-form that supports schema resolvers (zod, yup...).

Maybe it could be exposed through a utility function similar to that ?

import { useForm } from 'react-hook-form';
import { inferMutationInput, trpc } from 'utils/trpc';
import { zodResolver } from '@hookform/resolvers/zod';

type FormData = inferMutationInput<'post.create'>;

const { register, handleSubmit } = useForm<FormData>({
  resolver: zodResolver(trpc.getInputSchema(['post.create'])),
});

[KATT]

See https://kitchen-sink.trpc.io/react-hook-form

[Axxxx0n]

Is there way to get it other way around? define on server and get it from query/mutation type?

[KATT]

It's a bad idea to import from the server but you can do a shared folder

[Max-DVS]

Quick question to avoid opening another thread on the same topic.
What happens if I create a file where I have the validation and in the same file I export the type with z.infer like:

export const userValidationSchema = z.object({
  title: z.string().min(2),
  text: z.string().min(5),
});
export type User = z.infer<type of userValidationSchema>

Then use userValidationSchema on the route endpoint.

export const userRouter = createRouter()
  .mutation("createUser", {
    input: userValidation,
    async resolve({ input, ctx })

And in RHF

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<User>({
    defaultValues: {
      title: "",
      text: "",
    },
    mode: "onBlur",
    resolver: zodResolver(userValidation),
  });

I would be breaking something with that approach ?

[kaminskypavel]

@KATT this feels suboptimal tbh, maybe it's just me but it makes sense that the server will "set the tone" and define its inputs which can be exported to the clients.

It's a pretty common scenario where you have a single API serving multiple clients (web/expo/docs), whereas I haven't seen the other way around of having a single client who "demands" from several servers.

maybe it's a topic for a whole new discussion but it seems like there's a reasonable demand to develop a best practice that will unify tRPC + zod + prisma schemas.

[franco-roura]

You can create your own InferMutationInput type like this

type InferMutationInput<T extends UseTRPCMutationResult<any, any, any, any>> = NonNullable<
    T['variables']
  >

And use it like this

If that's the kind of interface you're looking for, then useForm<InferMutationInput<typeof login>>() should work

[KrallXZ]

I tried making and exporting validationSchema from the server and passing it to the zodResolver, but It's throwing error: "Error: You're trying to use @trpc/server in a non-server environment. This is not supported by default.". @KATT way is working but It seems weird to me to import validationSchema from client to server, not vice versa.

It would be great to have a method to get the validation schema from mutation.

But when it comes to type only @solaldunckel you can infer type like this:

type TEquipmentCreateInput = inferRouterInputs<Router>["create"];

where Router is type exported from your router, for example:

export type AppRouter = typeof appRouter;

[lucafaggianelli]

Hey there,

Just to share my solution, I ended up creating a shared folder in src/schemas and there I created a file for each model with all the schemas for that model, then I import the same schemas in both the tRPC routers and in the frontend.

Not optimal but at least it solves the problem and is less weird than importing something into the server from the frontend