useDebounceFetcher and returned action data

[caprica]

What's the idiomatic way to get returned data from useDebounceFetcher?

My use-case is to display error messages that may be returned from the action.

[sergiodxa]

The response will have the data in fetcher.data like a useFetcher.

[caprica]

Sorry, my question was a bit a vague, I think it is more related to the typing, which is maybe where my confusion comes from.

If I have an action like this:

export const action = () => {
   // ... whatever ...
   return json({ firstName, lastName})
}

Isn't this normal to type the fetcher?

const fetcher = useFetcher<typeof action>();
const data = fetcher.data

data is of this type:

const data: JsonifyObject<{
    firstName: string;
    lastName: string;
}> | undefined

With debounceFetcher:

const fetcher = useDebounceFetcher<typeof action>();
const data = fetcher.data

This time data looks like this:

const data: (({ request }: ActionFunctionArgs) => Promise<{
    firstName: string;
    lastName: string;
}>) | undefined

Which is the type of the action function itself, not what it returns.

So to use debounceFetcher with Typescript, I have to declare explicitly a new type rather than using typeof I suppose.

This would work I think:

const fetcher = useDebounceFetcher<Awaited<ReturnType<typeof action>>>()

[luisrudge]

oh, I thought I was going crazy 😅 I'm having the same issue here. @sergiodxa any ideas on how to address that? thanks!

[luisrudge]

const fetcher = useDebounceFetcher<Awaited<ReturnType<typeof action>>>()
this doesn't work because if you use json() in your action, the return type is actually TypedResponse<T>

[luisrudge]

export type UpdateSubmissionActionResult = Awaited<ReturnType<Awaited<ReturnType<typeof action>>['json']>>;

this works, but it's pretty ugly 😅

[luisrudge]

if someone is having the same issue, you can easily fix this when singleFetch is enabled

export type UpdateSubmissionActionResult = SerializeFrom<typeof action>;

maybe it works without singleFetch too

[zlach]

I also came across this issue; just going to type it manually

const fetcher = useDebounceFetcher<{myThing: string}>()