Mugetsu•6mo ago

onError callback type

I want to have a callback onError passed from parent component to the child which has mutation call. onError should be passed directly to the mutation options but also accept plan Error type and undefined. But I struggle how to type it correctly.

export const DownloadTrigger = ({
  onError,
} {
  onError: ReactQueryOptions['batch']['triggerDownload']['onError'];  // This doesn't quire work is there more generic type or I should just add Error | undefined?
}) => {
  const downloadMutation = api.batch.triggerDownload.useMutation({
    onError,
  });

  useEffect(() => {
    handleFile()
      .catch((err: Error) => {
        // @ts-ignore
        onError(err);
      })
      .finally(() => {
        // @ts-ignore
        onError(undefined);
      });

export const DownloadTrigger = ({
  onError,
} {
  onError: ReactQueryOptions['batch']['triggerDownload']['onError'];  // This doesn't quire work is there more generic type or I should just add Error | undefined?
}) => {
  const downloadMutation = api.batch.triggerDownload.useMutation({
    onError,
  });

  useEffect(() => {
    handleFile()
      .catch((err: Error) => {
        // @ts-ignore
        onError(err);
      })
      .finally(() => {
        // @ts-ignore
        onError(undefined);
      });

3 Replies

infodusha•6mo ago

Probably you can type it like:

{
  onError: (err: TRPCClientErrorLike<unknown>) => void
}

{
  onError: (err: TRPCClientErrorLike<unknown>) => void
}

Mugetsu•6mo ago

It doesnt satisfiy the constrain TS2344: Type unknown does not satisfy the constraint ErrorInferrable This seems to work but not sure if this is any better approach.

 
export type DownloadTriggerOnError =
  | TRPCClientErrorLike<AppRouter>
  | Error
  | undefined;

 
export type DownloadTriggerOnError =
  | TRPCClientErrorLike<AppRouter>
  | Error
  | undefined;

Juan M•4mo ago

@Mugetsu, did you find a solution? I'm doing something alike, my problem is the parameter type and I sorted it out like so: error: (error: TRPCError) => { return <>{error.message}</>; }, So far Im not getting any error/warning.