Typing a wrapped createAsyncThunk call (complex TypeScript help)

[EvHaus]

Hi all,

I want to create a wrapped createASyncThunk call similar to this:

const createCustomThunk = <Return, Input, State>(name: string) => {
    return createAsyncThunk<Return, Input, {state: State}>(name, async (payload) => {
       return fetch('/my_api/');
    });
}

This allows me to create a standardized function across my application which uses a lot of very similar parameters across all my async thunks.

This works great and all the TypeScript types are inferred as desired. However, if my wrapper becomes more complex (adds custom getPendingMeta or fulfillWithValue like so:

const createCustomThunk = <Return, Input, State>(
    name: string,
    options: {
        modifyResponse: ??? // How do I type this so that `fulfilledMeta` respects it
        getPendingMeta: ??? // How do I type this so that it gets inferred properly below
    }
) => {
    return createAsyncThunk<
        Return,
        Input,
        {
            fulfilledMeta: ??? // Ideally this would infer the return type of `options.modifyResponse`,
            pendingMeta: ???, // Ideally this would infer the return type of `options.getPendingMeta`
            state: State
        }
    >(name, async (payload) => {
       return fetch('/my_api/')
           .then((response) => {
               return fulfillWithValue(...options.modifyResponse(response))
           });
    }, {
        getPendingMeta: options.getPendingMeta
    });
}

I was hoping to leverage the internal types that @reduxjs/toolkit uses, but it seems that the types I want aren't exported (eg. import type {GetPendingMeta} from '@reduxjs/toolit' doesn't work).

Any advice here would be greatly appreciated.

[phryneas]

Before we go deep into this - is there a specific reason you do not want to use RTK Query? You're essentially starting to recreate that.

[EvHaus]

Thank you for the quick response! Yes, you're right -- I'm definitely venturing into a territory closer to what RTK Query is doing. I started my project before RTK Query was more mature and at that time it was too opinionated/limited for what I needed. I just tried it again now and looks like it has a lot more features. I made a TODO for myself to explore a migration path to RTK Query, but was hoping you might have some insight into the typing question in my original thread as a temporary step.

I don't need to go any further beyond than just updating the getPendingMeta and fulfillWithValue overrides.

If your answer is, "This is going to expose too many RTK internals which is not something we want to support or recommend" -- I understand.

[phryneas]

Nah, that's not my answer, but my answer is not a lot better unfortunately:

Without an extra method call, what you are doing here will be impossible.

It seems that you want your parameters <Return, Input, State> to be explicit. You also would need additional parameters for your getPendingMeta etc., to capture their type - but of course you don't want that explicitly. Now, TS can either be explicit or implicit with arguments, but not both at the same time.

So you would need to split that into two calls so it is used like:

const thunk = createCustomThunk<Return, Input, State>("foo")({ modifyResponse: ... });

That way, the second method call could have implicit arguments and the first call explicit ones. But it's an ugly ugly notation.