Fix return types for matchers (#70)

* Fix return types for matchers
* use action matchers, retype matched types, tests
* extract error types for thunk matchers

Co-authored-by: Lenz Weber <[email protected]>

Author: msutkowski

examples/react/src/app/services/posts.ts

@@ -1,5 +1,4 @@
 import { createApi, fetchBaseQuery, retry } from '@rtk-incubator/rtk-query';
-import { setCredentials } from 'src/features/auth/authSlice';
 import { RootState } from '../store';
 
 export interface Post {
@@ -30,19 +29,20 @@ const baseQuery = fetchBaseQuery({
   },
 });
 
-const staggeredBaseQuery = retry(baseQuery, { maxRetries: 6 });
+const baseQueryWithRetry = retry(baseQuery, { maxRetries: 6 });
 
 export const postApi = createApi({
   reducerPath: 'postsApi', // We only specify this because there are many services. This would not be common in most applications
-  baseQuery: staggeredBaseQuery,
+  baseQuery: baseQueryWithRetry,
   entityTypes: ['Posts'],
   endpoints: (build) => ({
     login: build.mutation<{ token: string; user: User }, any>({
       query: (credentials: any) => ({ url: 'login', method: 'POST', body: credentials }),
-      onSuccess: (arg, mutationApi, result) => {
-        const { token, user } = result;
-        // Set our user and token in the store for future requests
-        mutationApi.dispatch(setCredentials({ token, user }));
+      extraOptions: {
+        backoff: () => {
+          // We intentionally error once on login, and this breaks out of retrying. The next login attempt will succeed.
+          retry.fail({ fake: 'error' });
+        },
       },
     }),
     getPosts: build.query<PostsResponse, void>({

examples/react/src/features/auth/authSlice.ts

@@ -1,5 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { User } from '../../app/services/posts';
+import { createSlice } from '@reduxjs/toolkit';
+import { postApi, User } from '../../app/services/posts';
 import { RootState } from '../../app/store';
 
 const initialState = {
@@ -12,16 +12,25 @@ const slice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    setCredentials: (state, { payload }: PayloadAction<{ token: string; user: User }>) => {
-      state.user = payload.user;
-      state.token = payload.token;
-      state.isAuthenticated = true;
-    },
     logout: () => initialState,
   },
+  extraReducers: (builder) => {
+    builder
+      .addMatcher(postApi.endpoints.login.matchPending, (state, action) => {
+        console.log('pending', action);
+      })
+      .addMatcher(postApi.endpoints.login.matchFulfilled, (state, action) => {
+        console.log('fulfilled', action);
+        state.user = action.payload.result.user;
+        state.token = action.payload.result.token;
+      })
+      .addMatcher(postApi.endpoints.login.matchRejected, (state, action) => {
+        console.log('rejected', action);
+      });
+  },
 });
 
-export const { setCredentials, logout } = slice.actions;
+export const { logout } = slice.actions;
 export default slice.reducer;
 
 export const selectIsAuthenticated = (state: RootState) => state.auth.isAuthenticated;

examples/react/src/mocks/handlers.ts

@@ -51,7 +51,10 @@ export const handlers = [
   }),
 
   rest.post('/login', (req, res, ctx) => {
-    return res(ctx.json({ token }));
+    return res.once(ctx.json({ message: 'i fail once' }), ctx.status(500));
+  }),
+  rest.post('/login', (req, res, ctx) => {
+    return res(ctx.json({ token, user: { first_name: 'Test', last_name: 'User' } }));
   }),
 
   rest.get('/posts', (req, res, ctx) => {

src/buildThunks.ts

@@ -1,5 +1,5 @@
 import { InternalSerializeQueryArgs } from '.';
-import { Api, ApiEndpointQuery, BaseQueryFn, BaseQueryArg } from './apiTypes';
+import { Api, ApiEndpointQuery, BaseQueryFn, BaseQueryArg, BaseQueryError } from './apiTypes';
 import { InternalRootState, QueryKeys, QueryStatus, QuerySubstateIdentifier } from './apiState';
 import { StartQueryActionCreatorOptions } from './buildActionMaps';
 import {
@@ -11,12 +11,11 @@ import {
   QueryDefinition,
   ResultTypeFrom,
 } from './endpointDefinitions';
-import { Draft } from '@reduxjs/toolkit';
+import { Draft, isAllOf, isFulfilled, isPending, isRejected } from '@reduxjs/toolkit';
 import { Patch, isDraftable, produceWithPatches, enablePatches } from 'immer';
 import { AnyAction, createAsyncThunk, ThunkAction, ThunkDispatch, AsyncThunk } from '@reduxjs/toolkit';
 
 import { PrefetchOptions } from './buildHooks';
-import { Id } from './tsHelpers';
 
 declare module './apiTypes' {
   export interface ApiEndpointQuery<
@@ -30,37 +29,33 @@ declare module './apiTypes' {
   > extends Matchers<MutationThunk, Definition> {}
 }
 
-export type PendingAction<
+type EndpointThunk<
   Thunk extends AsyncThunk<any, any, any>,
   Definition extends EndpointDefinition<any, any, any, any>
-> = Definition extends EndpointDefinition<infer QueryArg, any, any, infer ResultType>
-  ? OverrideActionProps<ReturnType<Thunk['pending']>, QueryArg>
+> = Definition extends EndpointDefinition<infer QueryArg, infer BaseQueryFn, any, infer ResultType>
+  ? Thunk extends AsyncThunk<infer ATResult, infer ATArg, infer ATConfig>
+    ? AsyncThunk<
+        ATResult & { result: ResultType },
+        ATArg & { originalArgs: QueryArg },
+        ATConfig & { rejectValue: BaseQueryError<BaseQueryFn> }
+      >
+    : never
   : never;
 
+export type PendingAction<
+  Thunk extends AsyncThunk<any, any, any>,
+  Definition extends EndpointDefinition<any, any, any, any>
+> = ReturnType<EndpointThunk<Thunk, Definition>['pending']>;
+
 export type FulfilledAction<
   Thunk extends AsyncThunk<any, any, any>,
   Definition extends EndpointDefinition<any, any, any, any>
-> = Definition extends EndpointDefinition<infer QueryArg, any, any, infer ResultType>
-  ? OverrideActionProps<ReturnType<Thunk['fulfilled']>, QueryArg, ResultType>
-  : never;
+> = ReturnType<EndpointThunk<Thunk, Definition>['fulfilled']>;
 
 export type RejectedAction<
   Thunk extends AsyncThunk<any, any, any>,
   Definition extends EndpointDefinition<any, any, any, any>
-> = Definition extends EndpointDefinition<infer QueryArg, any, any, infer ResultType>
-  ? OverrideActionProps<ReturnType<Thunk['rejected']>, QueryArg>
-  : never;
-
-type OverrideActionProps<
-  A extends { payload?: any; meta: { arg: { originalArgs: any } } },
-  QueryArg,
-  Payload = void
-> = Id<
-  Omit<A, 'payload' | 'meta'> & {
-    payload: [void] extends [Payload] ? A['payload'] : Payload;
-    meta: Id<Omit<A['meta'], 'arg'> & { arg: Id<Omit<A['meta']['arg'], 'originalArgs'> & { originalArgs: QueryArg }> }>;
-  }
->;
+> = ReturnType<EndpointThunk<Thunk, Definition>['rejected']>;
 
 export type Matcher<M> = (value: any) => value is M;
 
@@ -292,17 +287,18 @@ export function buildThunks<
     }
   };
 
+  function matchesEndpoint(endpoint: string) {
+    return (action: any): action is AnyAction => action?.meta?.arg?.endpoint === endpoint;
+  }
+
   function buildMatchThunkActions<
     Thunk extends AsyncThunk<any, QueryThunkArg<any>, any> | AsyncThunk<any, MutationThunkArg<any>, any>
-  >(thunk: Thunk, endpoint: string): Matchers<Thunk, any> {
+  >(thunk: Thunk, endpoint: string) {
     return {
-      matchPending: (action): action is PendingAction<Thunk, any> =>
-        thunk.pending.match(action) && action.meta.arg.endpoint === endpoint,
-      matchFulfilled: (action): action is FulfilledAction<Thunk, any> =>
-        thunk.fulfilled.match(action) && action.meta.arg.endpoint === endpoint,
-      matchRejected: (action): action is RejectedAction<Thunk, any> =>
-        thunk.rejected.match(action) && action.meta.arg.endpoint === endpoint,
-    };
+      matchPending: isAllOf(isPending(thunk), matchesEndpoint(endpoint)),
+      matchFulfilled: isAllOf(isFulfilled(thunk), matchesEndpoint(endpoint)),
+      matchRejected: isAllOf(isRejected(thunk), matchesEndpoint(endpoint)),
+    } as Matchers<Thunk, any>;
   }
 
   return { queryThunk, mutationThunk, prefetchThunk, updateQueryResult, patchQueryResult, buildMatchThunkActions };

test/matchers.test.tsx

@@ -1,14 +1,23 @@
-import { AnyAction } from '@reduxjs/toolkit';
+import { AnyAction, createSlice, SerializedError } from '@reduxjs/toolkit';
 import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';
 import { renderHook, act } from '@testing-library/react-hooks';
-import { hookWaitFor, setupApiStore } from './helpers';
+import { expectExactType, hookWaitFor, setupApiStore } from './helpers';
+
+interface ResultType {
+  result: 'complex';
+}
+
+interface ArgType {
+  foo: 'bar';
+  count: 3;
+}
 
 const baseQuery = fetchBaseQuery({ baseUrl: 'http://example.com' });
 const api = createApi({
   baseQuery,
   endpoints(build) {
     return {
-      querySuccess: build.query({ query: () => '/success' }),
+      querySuccess: build.query<ResultType, ArgType>({ query: () => '/success' }),
       querySuccess2: build.query({ query: () => '/success' }),
       queryFail: build.query({ query: () => '/fail' }),
       mutationSuccess: build.mutation({ query: () => ({ url: '/success', method: 'POST' }) }),
@@ -57,7 +66,7 @@ const otherEndpointMatchers = [
 
 test('matches query pending & fulfilled actions for the own endpoint', async () => {
   const endpoint = querySuccess;
-  const { result } = renderHook(() => endpoint.useQuery({}), { wrapper: storeRef.wrapper });
+  const { result } = renderHook(() => endpoint.useQuery({} as any), { wrapper: storeRef.wrapper });
   await hookWaitFor(() => expect(result.current.isLoading).toBeFalsy());
 
   matchSequence(storeRef.store.getState().actions, endpoint.matchPending, endpoint.matchFulfilled);
@@ -105,3 +114,30 @@ test('matches mutation pending & rejected actions for the own endpoint', async (
     [endpoint.matchPending, endpoint.matchFulfilled, ...otherEndpointMatchers]
   );
 });
+
+test('inferred types', () => {
+  createSlice({
+    name: 'auth',
+    initialState: {},
+    reducers: {},
+    extraReducers: (builder) => {
+      builder
+        .addMatcher(api.endpoints.querySuccess.matchPending, (state, action) => {
+          expectExactType(undefined)(action.payload);
+          // @ts-expect-error
+          console.log(action.error);
+          expectExactType({} as ArgType)(action.meta.arg.originalArgs);
+        })
+        .addMatcher(api.endpoints.querySuccess.matchFulfilled, (state, action) => {
+          expectExactType({} as ResultType)(action.payload.result);
+          // @ts-expect-error
+          console.log(action.error);
+          expectExactType({} as ArgType)(action.meta.arg.originalArgs);
+        })
+        .addMatcher(api.endpoints.querySuccess.matchRejected, (state, action) => {
+          expectExactType({} as SerializedError)(action.error);
+          expectExactType({} as ArgType)(action.meta.arg.originalArgs);
+        });
+    },
+  });
+});