T
tRPC

❓-help

How to extract mutation type

MMugetsu2/10/2024
Is it possible to extract mutation type? I would like to pass a mutation trigger to the parent component but I dont know how I could extract the mutation type so typescript is happy
///child component

const DownloadTrigger = ({
type,
disabled,
form,
mutateTrigger,
}: Pick<ComponentProps<typeof DdsButton>, 'type' | 'disabled' | 'form'> & {
mutateTrigger // DUNNO HOW TO TYPE THIS
}) => {
const downloadMutation = api.batch.triggerDownload.useMutation();
....

const handleOnClick = () => {
console.log('CLICK');
mutateTrigger(downloadMutation.mutate);
// can I extract somehow the type of mutation so in parent component typescript follows the required mutation input type??
};

return (
<DdsButton
type={type}
form={form}
disabled={disabled}
onClick={handleOnClick}
>
Submit
</DdsButton>
);
};
///child component

const DownloadTrigger = ({
type,
disabled,
form,
mutateTrigger,
}: Pick<ComponentProps<typeof DdsButton>, 'type' | 'disabled' | 'form'> & {
mutateTrigger // DUNNO HOW TO TYPE THIS
}) => {
const downloadMutation = api.batch.triggerDownload.useMutation();
....

const handleOnClick = () => {
console.log('CLICK');
mutateTrigger(downloadMutation.mutate);
// can I extract somehow the type of mutation so in parent component typescript follows the required mutation input type??
};

return (
<DdsButton
type={type}
form={form}
disabled={disabled}
onClick={handleOnClick}
>
Submit
</DdsButton>
);
};
Solution:
Thanks guys. Altough I cant seem to get it working with InferReactQueryOptions I managed to take te routerinputs and seems working like that ```ts export type MutateTrigger = ( payload: RouterInputs['batch']['triggerDownload'],...
Jump to solution
Nnlucas2/10/2024
typeof api.foo.useMutation() should be fine here
AKAlex / KATT 🐱2/11/2024
Inferring Types | tRPC
In addition to the type inference made available by @trpc/server (see here) this integration also provides some inference helpers for usage purely in React.
Nnlucas2/11/2024
Oh yeah I misread last night, Katt is correct this is just inferring inputs and using them
Solution
MMugetsu2/12/2024
Thanks guys. Altough I cant seem to get it working with InferReactQueryOptions I managed to take te routerinputs and seems working like that
export type MutateTrigger = (
payload: RouterInputs['batch']['triggerDownload'],
) => void;
export type MutateTrigger = (
payload: RouterInputs['batch']['triggerDownload'],
) => void;
Nnlucas2/12/2024
Don’t you want inferRouterInputs as well??
MMugetsu2/12/2024
RouterInputs are these.
/**
* Inference helper for inputs.
* @example type HelloInput = RouterInputs['example']['hello']
*/
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
* Inference helper for outputs.
* @example type HelloOutput = RouterOutputs['example']['hello']
*/
export type RouterOutputs = inferRouterOutputs<AppRouter>;

export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
/**
* Inference helper for inputs.
* @example type HelloInput = RouterInputs['example']['hello']
*/
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
* Inference helper for outputs.
* @example type HelloOutput = RouterOutputs['example']['hello']
*/
export type RouterOutputs = inferRouterOutputs<AppRouter>;

export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
Nnlucas2/12/2024
What’s the problem exactly? This looks fine
MMugetsu2/14/2024
I thought I had a problem with payload: RouterInputs['batch']['triggerDownload'], but after restarting TS its working. So all good now πŸ™‚

Looking for more? Join the community!

T
tRPC

❓-help

Join Server
Recommended Posts
Mock form data middleware (Hello everyone, I'm using experimental_parseMultipartFormData on some of my procedures and i would Ability to mutate/extend `input` from middlewaresHi I have a global middleware that should run for every route. This middleware simply coerces `''` (Hot to redirect in middleware when using createCallerFactoryHello. I do have this tiny middleware: ```typescript const authMiddleware = middleware(async (opts) Remix: How can I return headers from a query or mutation back to the action/loader?I'm using Supabase Auth and a requirement is to return the headers back from its client creation funUsing output validator breaks query return type inference on react queryHi! I am not sure whether this is expected and whether there is some way to fix that but here it goeHow to pass headers from serverActions in Next.js App router.I'm using tRPC with Clerk auth provider in Next.js App directory. I created a `serverClient` to use Need Guidance Optimizing Multi-Select Typeahead### What your environment is: Node 18? Bun? pnpm / yarn / npm? - Bun v1.0.23 - Next.js v14.1.0 (app Private API, public clientsHey everyone, we're about to OSS some good stuff at my company and I'm wondering what's the best appHow to get the type of context after middleware context extension?I have a middleware where I validate and set a userId. My router knows that userId is no longer undewhat am i doing wrong?My turbo repo containing expo-clerk-trpc does NOT work. and I've tried everything I have no idea whaReusable Component to take router as props / dependency injection. How to type?for example: ```ts export const Content = async ({ api }) => { const items = await api.getAll.quertRPC mutate call firing two requests with custom linkNode: 18.16 tRPC: 10.38.0 pnpm What's wrong with this custom link that's causing it's addition to aIssue with Fastify / tRPC / AngularWe are trying to setup Angular project with tRPC. In Angular we get following error: ``` Error: nodDrizzle query not working only inside trpcMy drizzle query works inside a regular nextjs api route. The same query running inside trpc throws Server freezes when doing mutations...I have the exact same issue as mentioned in this post: https://discord-questions.trpc.io/m/117697170Create Wrapper only for Procedures that support Infinite QueryGreetings, I'm attempting to create a help that will handle some generic logic I desire for a seriWhy am I getting 'Argument type is not assignable to parameter type ProcedureResolver<unknown>'?I have this warning in my editor (jetbrains InteliJ): ``` Argument type () => any[] is not assignabEfficient way to use tRPC client with auth headers from secure storageWondering if anyone has a recommended pattern on caching the deviceId / authHeader using a React ConUsing tRPC with Expo API Routes feature?Is there a possibility to merge "tRPC Express Adapter" with "Expo API Route Express Deployment"? tRTRPC not working on multi tenant appEverything works on localhost. When I deploy it on the vercel None of the mutations work. Every q