Merge pull request #1818 from reduxjs/bugfix/1817-rtkq-selectors

.github/workflows/tests.yml

@@ -79,7 +79,7 @@ jobs:
  fail-fast: false
  matrix:
  node: ['14.x']
- ts: ['3.9', '4.0', '4.1', '4.2', '4.3', , '4.4', '4.5', 'next']
+ ts: ['3.9', '4.0', '4.1', '4.2', '4.3', '4.4', '4.5', 'next']
  steps:
  - name: Checkout repo
  uses: actions/checkout@v2

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)
+ })
+})

packages/toolkit/src/query/tests/optimisticUpdates.test.tsx

@@ -14,7 +14,7 @@ beforeEach(() => baseQuery.mockReset())
 const api = createApi({
  baseQuery: (...args: any[]) => {
  const result = baseQuery(...args)
- if ('then' in result)
+ if (typeof result === 'object' && 'then' in result)
  return result
  .then((data: any) => ({ data, meta: 'meta' }))
  .catch((e: any) => ({ error: e }))
@@ -131,11 +131,16 @@ describe('basic lifecycle', () => {
 
 describe('updateQueryData', () => {
  test('updates cache values, can apply inverse patch', async () => {
- baseQuery.mockResolvedValueOnce({
- id: '3',
- title: 'All about cheese.',
- contents: 'TODO',
- })
+ baseQuery
+ .mockResolvedValueOnce({
+ id: '3',
+ title: 'All about cheese.',
+ contents: 'TODO',
+ })
+ // TODO I have no idea why the query is getting called multiple times,
+ // but passing an additional mocked value (_any_ value)
+ // seems to silence some annoying "got an undefined result" logging
+ .mockResolvedValueOnce(42)
  const { result } = renderHook(() => api.endpoints.post.useQuery('3'), {
  wrapper: storeRef.wrapper,
  })
@@ -180,11 +185,14 @@ describe('updateQueryData', () => {
  })
 
  test('does not update non-existing values', async () => {
- baseQuery.mockResolvedValueOnce({
- id: '3',
- title: 'All about cheese.',
- contents: 'TODO',
- })
+ baseQuery
+ .mockImplementationOnce(async () => ({
+ id: '3',
+ title: 'All about cheese.',
+ contents: 'TODO',
+ }))
+ .mockResolvedValueOnce(42)
+
  const { result } = renderHook(() => api.endpoints.post.useQuery('3'), {
  wrapper: storeRef.wrapper,
  })
@@ -234,6 +242,7 @@ describe('full integration', () => {
  title: 'Meanwhile, this changed server-side.',
  contents: 'Delicious cheese!',
  })
+ .mockResolvedValueOnce(42)
  const { result } = renderHook(
  () => ({
  query: api.endpoints.post.useQuery('3'),
@@ -283,6 +292,7 @@ describe('full integration', () => {
  title: 'Meanwhile, this changed server-side.',
  contents: 'TODO',
  })
+ .mockResolvedValueOnce(42)
 
  const { result } = renderHook(
  () => ({