Mugetsu
Mugetsu5mo 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
infodusha5mo ago
Probably you can type it like:
{
onError: (err: TRPCClientErrorLike<unknown>) => void
}
{
onError: (err: TRPCClientErrorLike<unknown>) => void
}
Mugetsu
Mugetsu5mo 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
Juan M3mo 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.
More Posts
Can I perform react query queries without using a trpc procedure, using useQuery standaloneHey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regulTest React component using trpc client and `useSuspenseQuery`Hello ! I'm trying to test my React component that's querying through a tRPC client and `useSuspensHow to extract mutation typeIs it possible to extract mutation type? I would like to pass a mutation trigger to the parent comMock 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