Sharing schemas between server and client

In a typical nextJs setup, what is the idiomatic way to share zod schemas between frontend and backend? Suppose the following use-case: we have a mutation that takes an input:
const schema = z.object({
email: z.string().email({ message: 'Enter a valid email address' }),
subject: z.string()
message: z.string()
})
const schema = z.object({
email: z.string().email({ message: 'Enter a valid email address' }),
subject: z.string()
message: z.string()
})
on the frontend, we are building a form with react-hook-form that would also like to use this schema to validate the user input. The main question is: Where would we put this schema so that we can use it in both places. In terms of colocation, I think I would like to have it somewhere close on the server and then maybe just import it on the client from there? How are you all handling this? Thanks 🙏
T
TkDodo 🔮562d ago
it would be pretty awesome if the input schema would be available on the frontend somehow. for example:
// on the server
const router = t.router({
greeting: t.procedure
.input(z.object({ name: z.string() }))
.query(({ input }) => `Hello ${input.name}`),
});
// on the server
const router = t.router({
greeting: t.procedure
.input(z.object({ name: z.string() }))
.query(({ input }) => `Hello ${input.name}`),
});
// on the client
const query = trpc.hello.useQuery({ name: 'client' });
const input = trpc.hello.useInput() // just an idea, would yield the zod schema z.object({ name: z.string() })
// on the client
const query = trpc.hello.useQuery({ name: 'client' });
const input = trpc.hello.useInput() // just an idea, would yield the zod schema z.object({ name: z.string() })
is something like that possible?
AK
Alex / KATT 🐱562d ago
I usually do a shared folder where I keep stuff that can be used by both FE and BE But you can also import straight from the FE https://kitchen-sink.trpc.io/react-hook-form I've thought of doing it so the client could pull the input validators but zod schemas aren't serializable
T
TkDodo 🔮562d ago
yeah I've created a separate file next to the router now, which works. I'd like to keep the schemas close to the backend rather than have the frontend control them. why would the schema need to be serializable?
AK
Alex / KATT 🐱562d ago
If they were serializable we could fetch the input schema when needed There's probably some transpilation magic possible too but that's not my jam
More Posts
v10 Migration interop, router doesnt have attributesHi, i've tried to migrate like stated in the docs, these are my routers. Question: Shouldn't appRoutRecommended file structure for next.js?Hey all - using tRPC heavily with next.js and it's great. Our main `[trpc].ts` file is getting huge Unhandled Runtime ErrorTRPCClientErrorCall Stack Function.from node_modules\@trpc\client\dist\TRPCClientError-09b8a26b.esm.js (57:0) transWeird error when running unit test`10.0.0-proxy-beta.5` works just fine, error occurs on `10.0.0-proxy-beta.6` with the introduction oSharing middleware between TRPC serversWe currently have *microservices* REST API's on Cloudflare Workers and I'm thinking about moving thiIs `trpc.withTRPC` for Next supposed to work with pages or only `_app`?I'd love to only have TRPC mount on certain pages of my Next.js app. Is this currently supported?What does the WebSocketHandler do?I'm not sure what this is doing on the background.Are there any example of subscriptions working with react native ?queries and mutations are working pretty well with react native, I'm unable however to get subscriptRecommended way to prefetch client-sideIn react-query, you can do ``` queryClient.prefetchQuery(['todos', input], queryFn) ``` In trpc, IRevalidate API route from procedureHi, is there a way to revalidate a statically generated page from a trpc procedure? https://nextjs.Modifying payload client-side before cachingSay I have a payload that includes something like `category_id` in each of the items returned e.g.: errorFormatter is not being called?Could somebody confirm that this callback is called in the latest version? I call it from server sidResponse headersIs it possible to modify the response headers from server to client?API Response caching not working on vercel ⁉I've followed the instructions in https://trpc.io/docs/v9/caching for API Response caching and it's when throwing a TRPCError, is there a way to include an internal error code ?for the given screenshot, if such error happens I wanna prompt the user to login or something.Websocket connection failed.I'm following the websocket's example and it works fine as it is, however I changed some things and