Fix a bug in the RTKQ selector typings causing bad state args

The `ReducerPath` type tries to extract the generic type for "the
path of the reducer" arg from `EndpointDefinitions`. However, it
looks like this was always off by one: getting the 4th arg instead
of the actual 5th arg.

This caused bad input to the generated selectors. That seems to
have worked okay with Reselect 4.0 and its looser types, but
caused problems when we updated to Reselect 4.1.x and its improved
types. The `RootState` type collapsed down to an empty object,
because there was no valid string to use as an object key.

This fixes the bug and adds a typetest to verify that the selector
types are carried through all the way.

Author: markerikson

packages/toolkit/src/query/endpointDefinitions.ts

@@ -464,8 +464,9 @@ export type QueryArgFrom<D extends BaseEndpointDefinition<any, any, any>> =
 export type ResultTypeFrom<D extends BaseEndpointDefinition<any, any, any>> =
   D extends BaseEndpointDefinition<any, any, infer RT> ? RT : unknown
 
-export type ReducerPathFrom<D extends EndpointDefinition<any, any, any, any>> =
-  D extends EndpointDefinition<any, any, any, infer RP> ? RP : unknown
+export type ReducerPathFrom<
+  D extends EndpointDefinition<any, any, any, any, any>
+> = D extends EndpointDefinition<any, any, any, any, infer RP> ? RP : unknown
 
 export type TagTypesFrom<D extends EndpointDefinition<any, any, any, any>> =
   D extends EndpointDefinition<any, any, infer RP, any> ? RP : unknown

packages/toolkit/src/query/tests/buildSelector.test.ts

@@ -0,0 +1,54 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+import { createSelector, configureStore } from '@reduxjs/toolkit'
+import { expectExactType } from './helpers'
+
+describe('buildSelector', () => {
+  test.skip('buildSelector typetest', () => {
+    interface Todo {
+      userId: number
+      id: number
+      title: string
+      completed: boolean
+    }
+
+    type Todos = Array<Todo>
+
+    const exampleApi = createApi({
+      reducerPath: 'api',
+      baseQuery: fetchBaseQuery({
+        baseUrl: 'https://jsonplaceholder.typicode.com',
+      }),
+      endpoints: (build) => ({
+        getTodos: build.query<Todos, string>({
+          query: () => '/todos',
+        }),
+      }),
+    })
+
+    const exampleQuerySelector = exampleApi.endpoints.getTodos.select('/')
+
+    const todosSelector = createSelector(
+      [exampleQuerySelector],
+      (queryState) => {
+        return queryState?.data?.[0] ?? ({} as Todo)
+      }
+    )
+    const firstTodoTitleSelector = createSelector(
+      [todosSelector],
+      (todo) => todo?.title
+    )
+
+    const store = configureStore({
+      reducer: {
+        [exampleApi.reducerPath]: exampleApi.reducer,
+      },
+    })
+
+    const todoTitle = firstTodoTitleSelector(store.getState())
+
+    // This only compiles if we carried the types through
+    const upperTitle = todoTitle.toUpperCase()
+    expectExactType<string>(upperTitle)
+  })
+})