RTK Query endpoint data selectors expecting an incorrect RootState type

[wuweiweiwu]

Say you have a redux store setup using redux toolkit. your store type will look something like this

type Store = EnhancedStore<{ sliceA: SliceA }>;

and when you integrate the autogenerated RTK Query reducer into an existing redux store (link to docs) your store type will look something like

type Store = EnhancedStore<{ sliceA: SliceA, api: CombinedState<...> }>;

which will fail type checking when passing in the state from store.getState into a RTK Query endpoint data selector which is expecting a type of:

// apiState.d.ts
export declare type RootState<Definitions extends EndpointDefinitions, TagTypes extends string, ReducerPath extends string> = {
    [P in ReducerPath]: CombinedState<Definitions, TagTypes, P>;
};

since every reducer path in the store is not of the CombinedState<...> type

[markerikson]

Can you show an actual example of this failing?

It isn't checking every single reducer in the entire store. Rather, it's just checking the specific api.reducerPath field.

[wuweiweiwu]

yeah! lemme repro in a codesandbox. can't share work code 👀

[wuweiweiwu]

https://codesandbox.io/s/rtk-query-endpoint-data-selector-typesafety-repro-9390q?file=/src/components/UsersList.tsx

just added a test slice to the existing store

you can see the type error on line 9 of UserList.tsx

the test slice doesn't satisfy the CombinedState type

Property 'test' is incompatible with index signature.
    Type '{}' is missing the following properties from type 'CombinedState<{ getUsers: QueryDefinition<number, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, "UNAUTHORIZED" | ... 1 more ... | "User", User[], string>; updateUser: MutationDefinition<...>; }, "UNAUTHORIZED" | ... 1 more ... | "User", string>': queries, mutations, provided, subscriptions, config

[wuweiweiwu]

It isn't checking every single reducer in the entire store. Rather, it's just checking the specific api.reducerPath field.

perhaps it needs to Pick<ReducerPath, RootState> so it excludes the other reducer paths or something

[markerikson]

Hmm. Okay, yeah, that does seem odd. Not sure why it wouldn't have shown up before now, though?

[wuweiweiwu]

yeah super weird. currently using version 1.7.1 of redux toolkit.

in the type error it also fallbacks to trying to match test to the first defined endpoint getUser

[markerikson]

Heh, I just ran into this myself on my own day project while upgrading to RTK 1.7.1 :)

so, yeah, very real and needs to be fixed.

[pollen8]

I have a similar issue, I have very little experience with the types but it appeared that

export declare type RootState<Definitions extends EndpointDefinitions, TagTypes extends string, ReducerPath extends string> = {
    [P in ReducerPath]: CombinedState<Definitions, TagTypes, P> |  Reducer<any> ;
};

worked but the any sucks here (not sure how you'd go about improving that though)

[phryneas]

That should be fixed by #1977. Could you please try the CI build available at https://ci.codesandbox.io/status/reduxjs/redux-toolkit/pr/1977 (see "local install instructions") and verify if it fixes the problem for you?

[phryneas]

Released in https://github.com/reduxjs/redux-toolkit/releases/tag/v1.7.2

[adamhari]

This still seems to be an issue for selectors which use endpoints that are provided via injectEndpoints.

EDIT: it works in this minimal example so it's probably just me