Enable both `useQuery` and a raw `query` from the frontend (for use in async validation)

Hello everyone, some context:
. I'm building a project with a variant of the t3 stack (key point: using trpc layered on tanstack query: trpc.xxx.yyy.useQuery({zzz}) )

. I'm using zod with react-native-forms, using the zodResolver (key point: form validation through zod, can't add external validation without a lot of hackiness)

. Schema Looks like this:
const userDataSchema = z.object({
email: z
.string()
.min(1, { message: "Email is required" })
.email({ message: "Must be a valid email" })
.superRefine(debouncedEmailUniquenessValidator),
isDebug: z.boolean().default(true),
online: z.boolean().nullish(),
});

. Validation looks like this (called by the above debouncedEmailUniquenessValidator):
const mockDbEmailCheck = async (email: string) => {
await delay(250);
return !["taken@gmail.com", "takentaken@gmail.com"].includes(email);
};
. I'm building a project with a variant of the t3 stack (key point: using trpc layered on tanstack query: trpc.xxx.yyy.useQuery({zzz}) )

. I'm using zod with react-native-forms, using the zodResolver (key point: form validation through zod, can't add external validation without a lot of hackiness)

. Schema Looks like this:
const userDataSchema = z.object({
email: z
.string()
.min(1, { message: "Email is required" })
.email({ message: "Must be a valid email" })
.superRefine(debouncedEmailUniquenessValidator),
isDebug: z.boolean().default(true),
online: z.boolean().nullish(),
});

. Validation looks like this (called by the above debouncedEmailUniquenessValidator):
const mockDbEmailCheck = async (email: string) => {
await delay(250);
return !["taken@gmail.com", "takentaken@gmail.com"].includes(email);
};
Question: In mockDbEmailCheck, I'd like to be able to run a raw query against trpc: something like const emailIsUnique = await trpc.xxx.emailIsUnique.query({email}). Is there a way to execute raw trpc queries from the frontend, as well as maintain the useQuery tanstack query wrapper? Essentially is it possible to create this:
const validateUniqueEmail = async (email: string) => {
return await trpc.user.validate.uniqueEmail.query({ email }) <<=====
};

const userEmailSchema = z.object({
email: z
.string()
.refine(validateUniqueEmail, { message: "Email must be unique" }),
})

...

const UserEmailForm = ({ userId }: { userId: string }) => {
const [data] = trpc.user.something.useQuery({ userId }) <<=====

return (
<Form schema={userEmailSchema}>
...
</Form
)
}
const validateUniqueEmail = async (email: string) => {
return await trpc.user.validate.uniqueEmail.query({ email }) <<=====
};

const userEmailSchema = z.object({
email: z
.string()
.refine(validateUniqueEmail, { message: "Email must be unique" }),
})

...

const UserEmailForm = ({ userId }: { userId: string }) => {
const [data] = trpc.user.something.useQuery({ userId }) <<=====

return (
<Form schema={userEmailSchema}>
...
</Form
)
}
Thanks everyone!
N
Nick364d ago
How come you're using a query for sending data? It's best to use a mutation, and then react-query does give you an imperative API you can use
𝚁𝚘𝚐𝚞𝚎 𝙰𝚕𝚎𝚡𝚊𝚗𝚍𝚎𝚛364d ago
Ah I'm not, I'm using a mutation in the form submit. Thats just a oversight in the example code. I'm trying to use the query in the zod schema, where I need it to be an imperative call
N
Nick364d ago
Yes if you need an imperative call, use a mutation In general Queries are for getting data with simple parameters, mutations are for sending data. A validation procedure is more of a mutation
More Posts
Nextjs http endpoint (no prisma)I have simple pages/api/todoEndpint how do i call this endpoint with trcp? I don't want to use prismAdding clerk auth object to createServerSideHelpersSo I followed clerk's docs for TRPC (https://clerk.com/docs/nextjs/trpc) and I added `auth` to the `Call retries were exceeded with ssgI'm running a `create-t3-app` on Node 18. Has anyone seen errors trying to use SSG with TRPC and PrHow does batching work in SSR & nextjs app directory?I'm currently playing with the app directory for nextjs. If I have a SSR client set up like this: `"This is likely not portable" errorRandomly started getting this weird error on my front end, can't find anything online on it. SomethiIntegrate third-party added endpoints into the router definition?Its would be cool but not too important, so I was wondering whether or not it would be possible to hWhy am I seeing 500 errors on responses to clients in production?I'm running my trpc server with NODE_ENV=production with the expressjs adapter, and I'm getting thistrpc auto refreshes page when I lose focusHi, i thought this was a development environment only configuration, but it does it even in productiIncorrect type errorsNo idea if this is a trpc issue, but i'm having a bit of a nightmare with type errors. Nothing is shtest post 2hello againquery debounceHey there ! I wonder if anyone could point me to a standard recipe to achieve query debouncing and Type of createServerSideHelpers?I'm currently trying to implement a helper for `getServerSideProps` to reduce duplication. It's stil