Mugetsu•6mo ago

How to extract mutation type

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

8 Replies

Nick•6mo ago

~~typeof api.foo.useMutation() should be fine here~~

Alex / KATT 🐱•6mo ago

https://trpc.io/docs/client/react/infer-types

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.

Nick•6mo ago

Oh yeah I misread last night, Katt is correct this is just inferring inputs and using them

Solution

Mugetsu•6mo ago

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;

Nick•6mo ago

Don’t you want inferRouterInputs as well??

Mugetsu•6mo ago

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>;

Nick•6mo ago

What’s the problem exactly? This looks fine

Mugetsu•6mo ago

I thought I had a problem with payload: RouterInputs['batch']['triggerDownload'], but after restarting TS its working. So all good now 🙂