T
tRPC

Sharing schemas between server and client

Sharing schemas between server and client

TTkDodo 🔮10/7/2022
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 🙏 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?
AKAlex / KATT 🐱10/7/2022
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
TTkDodo 🔮10/7/2022
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?
AKAlex / KATT 🐱10/7/2022
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

Looking for more? Join the community!

T
tRPC

Sharing schemas between server and client

Join Server
Recommended 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) transSharing 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?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.: Response 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.extra json property added after data when consuming a query hook.I have this issue where when consuming a RQ hook there is an extra `json` object that I have to useProblem using next+ssgHi, Im trying to use the @trpc/next SSG Helper and I get content on the page. Although I noticed thaError handlingWe have some trpc routers that make requests to another api - we use axios for that. I'd like to forPlease read before creating a postWe're trying out forums for help now. Please make sure to select the relevant tags on your post. Als