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

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

export type MutateTrigger = (
  payload: RouterInputs['batch']['triggerDownload'],
) => void;

export type MutateTrigger = (
  payload: RouterInputs['batch']['triggerDownload'],
) => void;

export type MutateTrigger = (
  payload: RouterInputs['batch']['triggerDownload'],
) => void;

export type MutateTrigger = (
  payload: RouterInputs['batch']['triggerDownload'],
) => void;

Jump to solution

How to extract mutation type

Similar Threads

Similar Threads

Similar Threads