node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
import type { Middleware } from 'redux'
import { isActionCreator as isRTKAction } from './createAction'
export interface ActionCreatorInvariantMiddlewareOptions {
/**
* The function to identify whether a value is an action creator.
* The default checks for a function with a static type property and match method.
*/
isActionCreator?: (action: unknown) => action is Function & { type?: unknown }
}
export function getMessage(type?: unknown) {
const splitType = type ? `${type}`.split('/') : []
const actionName = splitType[splitType.length - 1] || 'actionCreator'
return `Detected an action creator with type "${
type || 'unknown'
}" being dispatched.
Make sure you're calling the action creator before dispatching, i.e. \`dispatch(${actionName}())\` instead of \`dispatch(${actionName})\`. This is necessary even if the action has no payload.`
}
export function createActionCreatorInvariantMiddleware(
options: ActionCreatorInvariantMiddlewareOptions = {}
): Middleware {
if (process.env.NODE_ENV === 'production') {
return () => (next) => (action) => next(action)
}
const { isActionCreator = isRTKAction } = options
return () => (next) => (action) => {
if (isActionCreator(action)) {
console.warn(getMessage(action.type))
}
return next(action)
}
}

View File

@@ -0,0 +1,152 @@
import type { StoreEnhancer } from 'redux'
export const SHOULD_AUTOBATCH = 'RTK_autoBatch'
export const prepareAutoBatched =
<T>() =>
(payload: T): { payload: T; meta: unknown } => ({
payload,
meta: { [SHOULD_AUTOBATCH]: true },
})
// TODO Remove this in 2.0
// Copied from https://github.com/feross/queue-microtask
let promise: Promise<any>
const queueMicrotaskShim =
typeof queueMicrotask === 'function'
? queueMicrotask.bind(
typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: globalThis
)
: // reuse resolved promise, and allocate it lazily
(cb: () => void) =>
(promise || (promise = Promise.resolve())).then(cb).catch((err: any) =>
setTimeout(() => {
throw err
}, 0)
)
const createQueueWithTimer = (timeout: number) => {
return (notify: () => void) => {
setTimeout(notify, timeout)
}
}
// requestAnimationFrame won't exist in SSR environments.
// Fall back to a vague approximation just to keep from erroring.
const rAF =
typeof window !== 'undefined' && window.requestAnimationFrame
? window.requestAnimationFrame
: createQueueWithTimer(10)
export type AutoBatchOptions =
| { type: 'tick' }
| { type: 'timer'; timeout: number }
| { type: 'raf' }
| { type: 'callback'; queueNotification: (notify: () => void) => void }
/**
* A Redux store enhancer that watches for "low-priority" actions, and delays
* notifying subscribers until either the queued callback executes or the
* next "standard-priority" action is dispatched.
*
* This allows dispatching multiple "low-priority" actions in a row with only
* a single subscriber notification to the UI after the sequence of actions
* is finished, thus improving UI re-render performance.
*
* Watches for actions with the `action.meta[SHOULD_AUTOBATCH]` attribute.
* This can be added to `action.meta` manually, or by using the
* `prepareAutoBatched` helper.
*
* By default, it will queue a notification for the end of the event loop tick.
* However, you can pass several other options to configure the behavior:
* - `{type: 'tick'}: queues using `queueMicrotask` (default)
* - `{type: 'timer, timeout: number}`: queues using `setTimeout`
* - `{type: 'raf'}`: queues using `requestAnimationFrame`
* - `{type: 'callback', queueNotification: (notify: () => void) => void}: lets you provide your own callback
*
*
*/
export const autoBatchEnhancer =
(options: AutoBatchOptions = { type: 'raf' }): StoreEnhancer =>
(next) =>
(...args) => {
const store = next(...args)
let notifying = true
let shouldNotifyAtEndOfTick = false
let notificationQueued = false
const listeners = new Set<() => void>()
const queueCallback =
options.type === 'tick'
? queueMicrotaskShim
: options.type === 'raf'
? rAF
: options.type === 'callback'
? options.queueNotification
: createQueueWithTimer(options.timeout)
const notifyListeners = () => {
// We're running at the end of the event loop tick.
// Run the real listener callbacks to actually update the UI.
notificationQueued = false
if (shouldNotifyAtEndOfTick) {
shouldNotifyAtEndOfTick = false
listeners.forEach((l) => l())
}
}
return Object.assign({}, store, {
// Override the base `store.subscribe` method to keep original listeners
// from running if we're delaying notifications
subscribe(listener: () => void) {
// Each wrapped listener will only call the real listener if
// the `notifying` flag is currently active when it's called.
// This lets the base store work as normal, while the actual UI
// update becomes controlled by this enhancer.
const wrappedListener: typeof listener = () => notifying && listener()
const unsubscribe = store.subscribe(wrappedListener)
listeners.add(listener)
return () => {
unsubscribe()
listeners.delete(listener)
}
},
// Override the base `store.dispatch` method so that we can check actions
// for the `shouldAutoBatch` flag and determine if batching is active
dispatch(action: any) {
try {
// If the action does _not_ have the `shouldAutoBatch` flag,
// we resume/continue normal notify-after-each-dispatch behavior
notifying = !action?.meta?.[SHOULD_AUTOBATCH]
// If a `notifyListeners` microtask was queued, you can't cancel it.
// Instead, we set a flag so that it's a no-op when it does run
shouldNotifyAtEndOfTick = !notifying
if (shouldNotifyAtEndOfTick) {
// We've seen at least 1 action with `SHOULD_AUTOBATCH`. Try to queue
// a microtask to notify listeners at the end of the event loop tick.
// Make sure we only enqueue this _once_ per tick.
if (!notificationQueued) {
notificationQueued = true
queueCallback(notifyListeners)
}
}
// Go ahead and process the action as usual, including reducers.
// If normal notification behavior is enabled, the store will notify
// all of its own listeners, and the wrapper callbacks above will
// see `notifying` is true and pass on to the real listener callbacks.
// If we're "batching" behavior, then the wrapped callbacks will
// bail out, causing the base store notification behavior to be no-ops.
return store.dispatch(action)
} finally {
// Assume we're back to normal behavior after each action
notifying = true
}
},
})
}

View File

@@ -0,0 +1,215 @@
import type {
Reducer,
ReducersMapObject,
Middleware,
Action,
AnyAction,
StoreEnhancer,
Store,
Dispatch,
PreloadedState,
CombinedState,
} from 'redux'
import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
import type { DevToolsEnhancerOptions as DevToolsOptions } from './devtoolsExtension'
import { composeWithDevTools } from './devtoolsExtension'
import isPlainObject from './isPlainObject'
import type {
ThunkMiddlewareFor,
CurriedGetDefaultMiddleware,
} from './getDefaultMiddleware'
import { curryGetDefaultMiddleware } from './getDefaultMiddleware'
import type {
NoInfer,
ExtractDispatchExtensions,
ExtractStoreExtensions,
ExtractStateExtensions,
} from './tsHelpers'
import { EnhancerArray } from './utils'
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
/**
* Callback function type, to be used in `ConfigureStoreOptions.enhancers`
*
* @public
*/
export type ConfigureEnhancersCallback<E extends Enhancers = Enhancers> = (
defaultEnhancers: EnhancerArray<[StoreEnhancer<{}, {}>]>
) => E
/**
* Options for `configureStore()`.
*
* @public
*/
export interface ConfigureStoreOptions<
S = any,
A extends Action = AnyAction,
M extends Middlewares<S> = Middlewares<S>,
E extends Enhancers = Enhancers
> {
/**
* A single reducer function that will be used as the root reducer, or an
* object of slice reducers that will be passed to `combineReducers()`.
*/
reducer: Reducer<S, A> | ReducersMapObject<S, A>
/**
* An array of Redux middleware to install. If not supplied, defaults to
* the set of middleware returned by `getDefaultMiddleware()`.
*
* @example `middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)`
* @see https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage
*/
middleware?: ((getDefaultMiddleware: CurriedGetDefaultMiddleware<S>) => M) | M
/**
* Whether to enable Redux DevTools integration. Defaults to `true`.
*
* Additional configuration can be done by passing Redux DevTools options
*/
devTools?: boolean | DevToolsOptions
/**
* The initial state, same as Redux's createStore.
* You may optionally specify it to hydrate the state
* from the server in universal apps, or to restore a previously serialized
* user session. If you use `combineReducers()` to produce the root reducer
* function (either directly or indirectly by passing an object as `reducer`),
* this must be an object with the same shape as the reducer map keys.
*/
/*
Not 100% correct but the best approximation we can get:
- if S is a `CombinedState` applying a second `CombinedState` on it does not change anything.
- if it is not, there could be two cases:
- `ReducersMapObject<S, A>` is being passed in. In this case, we will call `combineReducers` on it and `CombinedState<S>` is correct
- `Reducer<S, A>` is being passed in. In this case, actually `CombinedState<S>` is wrong and `S` would be correct.
As we cannot distinguish between those two cases without adding another generic parameter,
we just make the pragmatic assumption that the latter almost never happens.
*/
preloadedState?: PreloadedState<CombinedState<NoInfer<S>>>
/**
* The store enhancers to apply. See Redux's `createStore()`.
* All enhancers will be included before the DevTools Extension enhancer.
* If you need to customize the order of enhancers, supply a callback
* function that will receive the original array (ie, `[applyMiddleware]`),
* and should return a new array (such as `[applyMiddleware, offline]`).
* If you only need to add middleware, you can use the `middleware` parameter instead.
*/
enhancers?: E | ConfigureEnhancersCallback<E>
}
type Middlewares<S> = ReadonlyArray<Middleware<{}, S>>
type Enhancers = ReadonlyArray<StoreEnhancer>
export interface ToolkitStore<
S = any,
A extends Action = AnyAction,
M extends Middlewares<S> = Middlewares<S>
> extends Store<S, A> {
/**
* The `dispatch` method of your store, enhanced by all its middlewares.
*
* @inheritdoc
*/
dispatch: ExtractDispatchExtensions<M> & Dispatch<A>
}
/**
* A Redux store returned by `configureStore()`. Supports dispatching
* side-effectful _thunks_ in addition to plain actions.
*
* @public
*/
export type EnhancedStore<
S = any,
A extends Action = AnyAction,
M extends Middlewares<S> = Middlewares<S>,
E extends Enhancers = Enhancers
> = ToolkitStore<S & ExtractStateExtensions<E>, A, M> &
ExtractStoreExtensions<E>
/**
* A friendly abstraction over the standard Redux `createStore()` function.
*
* @param options The store configuration.
* @returns A configured Redux store.
*
* @public
*/
export function configureStore<
S = any,
A extends Action = AnyAction,
M extends Middlewares<S> = [ThunkMiddlewareFor<S>],
E extends Enhancers = [StoreEnhancer]
>(options: ConfigureStoreOptions<S, A, M, E>): EnhancedStore<S, A, M, E> {
const curriedGetDefaultMiddleware = curryGetDefaultMiddleware<S>()
const {
reducer = undefined,
middleware = curriedGetDefaultMiddleware(),
devTools = true,
preloadedState = undefined,
enhancers = undefined,
} = options || {}
let rootReducer: Reducer<S, A>
if (typeof reducer === 'function') {
rootReducer = reducer
} else if (isPlainObject(reducer)) {
rootReducer = combineReducers(reducer) as unknown as Reducer<S, A>
} else {
throw new Error(
'"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers'
)
}
let finalMiddleware = middleware
if (typeof finalMiddleware === 'function') {
finalMiddleware = finalMiddleware(curriedGetDefaultMiddleware)
if (!IS_PRODUCTION && !Array.isArray(finalMiddleware)) {
throw new Error(
'when using a middleware builder function, an array of middleware must be returned'
)
}
}
if (
!IS_PRODUCTION &&
finalMiddleware.some((item: any) => typeof item !== 'function')
) {
throw new Error(
'each middleware provided to configureStore must be a function'
)
}
const middlewareEnhancer: StoreEnhancer = applyMiddleware(...finalMiddleware)
let finalCompose = compose
if (devTools) {
finalCompose = composeWithDevTools({
// Enable capture of stack traces for dispatched Redux actions
trace: !IS_PRODUCTION,
...(typeof devTools === 'object' && devTools),
})
}
const defaultEnhancers = new EnhancerArray(middlewareEnhancer)
let storeEnhancers: Enhancers = defaultEnhancers
if (Array.isArray(enhancers)) {
storeEnhancers = [middlewareEnhancer, ...enhancers]
} else if (typeof enhancers === 'function') {
storeEnhancers = enhancers(defaultEnhancers)
}
const composedEnhancer = finalCompose(...storeEnhancers) as StoreEnhancer<any>
return createStore(rootReducer, preloadedState, composedEnhancer)
}

View File

@@ -0,0 +1,353 @@
import type { Action } from 'redux'
import type {
IsUnknownOrNonInferrable,
IfMaybeUndefined,
IfVoid,
IsAny,
} from './tsHelpers'
import { hasMatchFunction } from './tsHelpers'
import isPlainObject from './isPlainObject'
/**
* An action with a string type and an associated payload. This is the
* type of action returned by `createAction()` action creators.
*
* @template P The type of the action's payload.
* @template T the type used for the action type.
* @template M The type of the action's meta (optional)
* @template E The type of the action's error (optional)
*
* @public
*/
export type PayloadAction<
P = void,
T extends string = string,
M = never,
E = never
> = {
payload: P
type: T
} & ([M] extends [never]
? {}
: {
meta: M
}) &
([E] extends [never]
? {}
: {
error: E
})
/**
* A "prepare" method to be used as the second parameter of `createAction`.
* Takes any number of arguments and returns a Flux Standard Action without
* type (will be added later) that *must* contain a payload (might be undefined).
*
* @public
*/
export type PrepareAction<P> =
| ((...args: any[]) => { payload: P })
| ((...args: any[]) => { payload: P; meta: any })
| ((...args: any[]) => { payload: P; error: any })
| ((...args: any[]) => { payload: P; meta: any; error: any })
/**
* Internal version of `ActionCreatorWithPreparedPayload`. Not to be used externally.
*
* @internal
*/
export type _ActionCreatorWithPreparedPayload<
PA extends PrepareAction<any> | void,
T extends string = string
> = PA extends PrepareAction<infer P>
? ActionCreatorWithPreparedPayload<
Parameters<PA>,
P,
T,
ReturnType<PA> extends {
error: infer E
}
? E
: never,
ReturnType<PA> extends {
meta: infer M
}
? M
: never
>
: void
/**
* Basic type for all action creators.
*
* @inheritdoc {redux#ActionCreator}
*/
export interface BaseActionCreator<P, T extends string, M = never, E = never> {
type: T
match: (action: Action<unknown>) => action is PayloadAction<P, T, M, E>
}
/**
* An action creator that takes multiple arguments that are passed
* to a `PrepareAction` method to create the final Action.
* @typeParam Args arguments for the action creator function
* @typeParam P `payload` type
* @typeParam T `type` name
* @typeParam E optional `error` type
* @typeParam M optional `meta` type
*
* @inheritdoc {redux#ActionCreator}
*
* @public
*/
export interface ActionCreatorWithPreparedPayload<
Args extends unknown[],
P,
T extends string = string,
E = never,
M = never
> extends BaseActionCreator<P, T, M, E> {
/**
* Calling this {@link redux#ActionCreator} with `Args` will return
* an Action with a payload of type `P` and (depending on the `PrepareAction`
* method used) a `meta`- and `error` property of types `M` and `E` respectively.
*/
(...args: Args): PayloadAction<P, T, M, E>
}
/**
* An action creator of type `T` that takes an optional payload of type `P`.
*
* @inheritdoc {redux#ActionCreator}
*
* @public
*/
export interface ActionCreatorWithOptionalPayload<P, T extends string = string>
extends BaseActionCreator<P, T> {
/**
* Calling this {@link redux#ActionCreator} with an argument will
* return a {@link PayloadAction} of type `T` with a payload of `P`.
* Calling it without an argument will return a PayloadAction with a payload of `undefined`.
*/
(payload?: P): PayloadAction<P, T>
}
/**
* An action creator of type `T` that takes no payload.
*
* @inheritdoc {redux#ActionCreator}
*
* @public
*/
export interface ActionCreatorWithoutPayload<T extends string = string>
extends BaseActionCreator<undefined, T> {
/**
* Calling this {@link redux#ActionCreator} will
* return a {@link PayloadAction} of type `T` with a payload of `undefined`
*/
(noArgument: void): PayloadAction<undefined, T>
}
/**
* An action creator of type `T` that requires a payload of type P.
*
* @inheritdoc {redux#ActionCreator}
*
* @public
*/
export interface ActionCreatorWithPayload<P, T extends string = string>
extends BaseActionCreator<P, T> {
/**
* Calling this {@link redux#ActionCreator} with an argument will
* return a {@link PayloadAction} of type `T` with a payload of `P`
*/
(payload: P): PayloadAction<P, T>
}
/**
* An action creator of type `T` whose `payload` type could not be inferred. Accepts everything as `payload`.
*
* @inheritdoc {redux#ActionCreator}
*
* @public
*/
export interface ActionCreatorWithNonInferrablePayload<
T extends string = string
> extends BaseActionCreator<unknown, T> {
/**
* Calling this {@link redux#ActionCreator} with an argument will
* return a {@link PayloadAction} of type `T` with a payload
* of exactly the type of the argument.
*/
<PT extends unknown>(payload: PT): PayloadAction<PT, T>
}
/**
* An action creator that produces actions with a `payload` attribute.
*
* @typeParam P the `payload` type
* @typeParam T the `type` of the resulting action
* @typeParam PA if the resulting action is preprocessed by a `prepare` method, the signature of said method.
*
* @public
*/
export type PayloadActionCreator<
P = void,
T extends string = string,
PA extends PrepareAction<P> | void = void
> = IfPrepareActionMethodProvided<
PA,
_ActionCreatorWithPreparedPayload<PA, T>,
// else
IsAny<
P,
ActionCreatorWithPayload<any, T>,
IsUnknownOrNonInferrable<
P,
ActionCreatorWithNonInferrablePayload<T>,
// else
IfVoid<
P,
ActionCreatorWithoutPayload<T>,
// else
IfMaybeUndefined<
P,
ActionCreatorWithOptionalPayload<P, T>,
// else
ActionCreatorWithPayload<P, T>
>
>
>
>
>
/**
* A utility function to create an action creator for the given action type
* string. The action creator accepts a single argument, which will be included
* in the action object as a field called payload. The action creator function
* will also have its toString() overridden so that it returns the action type,
* allowing it to be used in reducer logic that is looking for that action type.
*
* @param type The action type to use for created actions.
* @param prepare (optional) a method that takes any number of arguments and returns { payload } or { payload, meta }.
* If this is given, the resulting action creator will pass its arguments to this method to calculate payload & meta.
*
* @public
*/
export function createAction<P = void, T extends string = string>(
type: T
): PayloadActionCreator<P, T>
/**
* A utility function to create an action creator for the given action type
* string. The action creator accepts a single argument, which will be included
* in the action object as a field called payload. The action creator function
* will also have its toString() overridden so that it returns the action type,
* allowing it to be used in reducer logic that is looking for that action type.
*
* @param type The action type to use for created actions.
* @param prepare (optional) a method that takes any number of arguments and returns { payload } or { payload, meta }.
* If this is given, the resulting action creator will pass its arguments to this method to calculate payload & meta.
*
* @public
*/
export function createAction<
PA extends PrepareAction<any>,
T extends string = string
>(
type: T,
prepareAction: PA
): PayloadActionCreator<ReturnType<PA>['payload'], T, PA>
export function createAction(type: string, prepareAction?: Function): any {
function actionCreator(...args: any[]) {
if (prepareAction) {
let prepared = prepareAction(...args)
if (!prepared) {
throw new Error('prepareAction did not return an object')
}
return {
type,
payload: prepared.payload,
...('meta' in prepared && { meta: prepared.meta }),
...('error' in prepared && { error: prepared.error }),
}
}
return { type, payload: args[0] }
}
actionCreator.toString = () => `${type}`
actionCreator.type = type
actionCreator.match = (action: Action<unknown>): action is PayloadAction =>
action.type === type
return actionCreator
}
/**
* Returns true if value is a plain object with a `type` property.
*/
export function isAction(action: unknown): action is Action<unknown> {
return isPlainObject(action) && 'type' in action
}
/**
* Returns true if value is an RTK-like action creator, with a static type property and match method.
*/
export function isActionCreator(
action: unknown
): action is BaseActionCreator<unknown, string> & Function {
return (
typeof action === 'function' &&
'type' in action &&
// hasMatchFunction only wants Matchers but I don't see the point in rewriting it
hasMatchFunction(action as any)
)
}
/**
* Returns true if value is an action with a string type and valid Flux Standard Action keys.
*/
export function isFSA(action: unknown): action is {
type: string
payload?: unknown
error?: unknown
meta?: unknown
} {
return (
isAction(action) &&
typeof action.type === 'string' &&
Object.keys(action).every(isValidKey)
)
}
function isValidKey(key: string) {
return ['type', 'payload', 'error', 'meta'].indexOf(key) > -1
}
/**
* Returns the action type of the actions created by the passed
* `createAction()`-generated action creator (arbitrary action creators
* are not supported).
*
* @param action The action creator whose action type to get.
* @returns The action type used by the action creator.
*
* @public
*/
export function getType<T extends string>(
actionCreator: PayloadActionCreator<any, T>
): T {
return `${actionCreator}` as T
}
// helper types for more readable typings
type IfPrepareActionMethodProvided<
PA extends PrepareAction<any> | void,
True,
False
> = PA extends (...args: any[]) => any ? True : False

View File

@@ -0,0 +1,752 @@
import type { Dispatch, AnyAction } from 'redux'
import type {
PayloadAction,
ActionCreatorWithPreparedPayload,
} from './createAction'
import { createAction } from './createAction'
import type { ThunkDispatch } from 'redux-thunk'
import type { FallbackIfUnknown, Id, IsAny, IsUnknown } from './tsHelpers'
import { nanoid } from './nanoid'
// @ts-ignore we need the import of these types due to a bundling issue.
type _Keep = PayloadAction | ActionCreatorWithPreparedPayload<any, unknown>
export type BaseThunkAPI<
S,
E,
D extends Dispatch = Dispatch,
RejectedValue = unknown,
RejectedMeta = unknown,
FulfilledMeta = unknown
> = {
dispatch: D
getState: () => S
extra: E
requestId: string
signal: AbortSignal
abort: (reason?: string) => void
rejectWithValue: IsUnknown<
RejectedMeta,
(value: RejectedValue) => RejectWithValue<RejectedValue, RejectedMeta>,
(
value: RejectedValue,
meta: RejectedMeta
) => RejectWithValue<RejectedValue, RejectedMeta>
>
fulfillWithValue: IsUnknown<
FulfilledMeta,
<FulfilledValue>(value: FulfilledValue) => FulfilledValue,
<FulfilledValue>(
value: FulfilledValue,
meta: FulfilledMeta
) => FulfillWithMeta<FulfilledValue, FulfilledMeta>
>
}
/**
* @public
*/
export interface SerializedError {
name?: string
message?: string
stack?: string
code?: string
}
const commonProperties: Array<keyof SerializedError> = [
'name',
'message',
'stack',
'code',
]
class RejectWithValue<Payload, RejectedMeta> {
/*
type-only property to distinguish between RejectWithValue and FulfillWithMeta
does not exist at runtime
*/
private readonly _type!: 'RejectWithValue'
constructor(
public readonly payload: Payload,
public readonly meta: RejectedMeta
) {}
}
class FulfillWithMeta<Payload, FulfilledMeta> {
/*
type-only property to distinguish between RejectWithValue and FulfillWithMeta
does not exist at runtime
*/
private readonly _type!: 'FulfillWithMeta'
constructor(
public readonly payload: Payload,
public readonly meta: FulfilledMeta
) {}
}
/**
* Serializes an error into a plain object.
* Reworked from https://github.com/sindresorhus/serialize-error
*
* @public
*/
export const miniSerializeError = (value: any): SerializedError => {
if (typeof value === 'object' && value !== null) {
const simpleError: SerializedError = {}
for (const property of commonProperties) {
if (typeof value[property] === 'string') {
simpleError[property] = value[property]
}
}
return simpleError
}
return { message: String(value) }
}
type AsyncThunkConfig = {
state?: unknown
dispatch?: Dispatch
extra?: unknown
rejectValue?: unknown
serializedErrorType?: unknown
pendingMeta?: unknown
fulfilledMeta?: unknown
rejectedMeta?: unknown
}
type GetState<ThunkApiConfig> = ThunkApiConfig extends {
state: infer State
}
? State
: unknown
type GetExtra<ThunkApiConfig> = ThunkApiConfig extends { extra: infer Extra }
? Extra
: unknown
type GetDispatch<ThunkApiConfig> = ThunkApiConfig extends {
dispatch: infer Dispatch
}
? FallbackIfUnknown<
Dispatch,
ThunkDispatch<
GetState<ThunkApiConfig>,
GetExtra<ThunkApiConfig>,
AnyAction
>
>
: ThunkDispatch<GetState<ThunkApiConfig>, GetExtra<ThunkApiConfig>, AnyAction>
export type GetThunkAPI<ThunkApiConfig> = BaseThunkAPI<
GetState<ThunkApiConfig>,
GetExtra<ThunkApiConfig>,
GetDispatch<ThunkApiConfig>,
GetRejectValue<ThunkApiConfig>,
GetRejectedMeta<ThunkApiConfig>,
GetFulfilledMeta<ThunkApiConfig>
>
type GetRejectValue<ThunkApiConfig> = ThunkApiConfig extends {
rejectValue: infer RejectValue
}
? RejectValue
: unknown
type GetPendingMeta<ThunkApiConfig> = ThunkApiConfig extends {
pendingMeta: infer PendingMeta
}
? PendingMeta
: unknown
type GetFulfilledMeta<ThunkApiConfig> = ThunkApiConfig extends {
fulfilledMeta: infer FulfilledMeta
}
? FulfilledMeta
: unknown
type GetRejectedMeta<ThunkApiConfig> = ThunkApiConfig extends {
rejectedMeta: infer RejectedMeta
}
? RejectedMeta
: unknown
type GetSerializedErrorType<ThunkApiConfig> = ThunkApiConfig extends {
serializedErrorType: infer GetSerializedErrorType
}
? GetSerializedErrorType
: SerializedError
type MaybePromise<T> = T | Promise<T> | (T extends any ? Promise<T> : never)
/**
* A type describing the return value of the `payloadCreator` argument to `createAsyncThunk`.
* Might be useful for wrapping `createAsyncThunk` in custom abstractions.
*
* @public
*/
export type AsyncThunkPayloadCreatorReturnValue<
Returned,
ThunkApiConfig extends AsyncThunkConfig
> = MaybePromise<
| IsUnknown<
GetFulfilledMeta<ThunkApiConfig>,
Returned,
FulfillWithMeta<Returned, GetFulfilledMeta<ThunkApiConfig>>
>
| RejectWithValue<
GetRejectValue<ThunkApiConfig>,
GetRejectedMeta<ThunkApiConfig>
>
>
/**
* A type describing the `payloadCreator` argument to `createAsyncThunk`.
* Might be useful for wrapping `createAsyncThunk` in custom abstractions.
*
* @public
*/
export type AsyncThunkPayloadCreator<
Returned,
ThunkArg = void,
ThunkApiConfig extends AsyncThunkConfig = {}
> = (
arg: ThunkArg,
thunkAPI: GetThunkAPI<ThunkApiConfig>
) => AsyncThunkPayloadCreatorReturnValue<Returned, ThunkApiConfig>
/**
* A ThunkAction created by `createAsyncThunk`.
* Dispatching it returns a Promise for either a
* fulfilled or rejected action.
* Also, the returned value contains an `abort()` method
* that allows the asyncAction to be cancelled from the outside.
*
* @public
*/
export type AsyncThunkAction<
Returned,
ThunkArg,
ThunkApiConfig extends AsyncThunkConfig
> = (
dispatch: GetDispatch<ThunkApiConfig>,
getState: () => GetState<ThunkApiConfig>,
extra: GetExtra<ThunkApiConfig>
) => Promise<
| ReturnType<AsyncThunkFulfilledActionCreator<Returned, ThunkArg>>
| ReturnType<AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>>
> & {
abort: (reason?: string) => void
requestId: string
arg: ThunkArg
unwrap: () => Promise<Returned>
}
type AsyncThunkActionCreator<
Returned,
ThunkArg,
ThunkApiConfig extends AsyncThunkConfig
> = IsAny<
ThunkArg,
// any handling
(arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>,
// unknown handling
unknown extends ThunkArg
? (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument not specified or specified as void or undefined
: [ThunkArg] extends [void] | [undefined]
? () => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument contains void
: [void] extends [ThunkArg] // make optional
? (arg?: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument contains undefined
: [undefined] extends [ThunkArg]
? WithStrictNullChecks<
// with strict nullChecks: make optional
(
arg?: ThunkArg
) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>,
// without strict null checks this will match everything, so don't make it optional
(arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>
> // default case: normal argument
: (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>
>
/**
* Options object for `createAsyncThunk`.
*
* @public
*/
export type AsyncThunkOptions<
ThunkArg = void,
ThunkApiConfig extends AsyncThunkConfig = {}
> = {
/**
* A method to control whether the asyncThunk should be executed. Has access to the
* `arg`, `api.getState()` and `api.extra` arguments.
*
* @returns `false` if it should be skipped
*/
condition?(
arg: ThunkArg,
api: Pick<GetThunkAPI<ThunkApiConfig>, 'getState' | 'extra'>
): MaybePromise<boolean | undefined>
/**
* If `condition` returns `false`, the asyncThunk will be skipped.
* This option allows you to control whether a `rejected` action with `meta.condition == false`
* will be dispatched or not.
*
* @default `false`
*/
dispatchConditionRejection?: boolean
serializeError?: (x: unknown) => GetSerializedErrorType<ThunkApiConfig>
/**
* A function to use when generating the `requestId` for the request sequence.
*
* @default `nanoid`
*/
idGenerator?: (arg: ThunkArg) => string
} & IsUnknown<
GetPendingMeta<ThunkApiConfig>,
{
/**
* A method to generate additional properties to be added to `meta` of the pending action.
*
* Using this optional overload will not modify the types correctly, this overload is only in place to support JavaScript users.
* Please use the `ThunkApiConfig` parameter `pendingMeta` to get access to a correctly typed overload
*/
getPendingMeta?(
base: {
arg: ThunkArg
requestId: string
},
api: Pick<GetThunkAPI<ThunkApiConfig>, 'getState' | 'extra'>
): GetPendingMeta<ThunkApiConfig>
},
{
/**
* A method to generate additional properties to be added to `meta` of the pending action.
*/
getPendingMeta(
base: {
arg: ThunkArg
requestId: string
},
api: Pick<GetThunkAPI<ThunkApiConfig>, 'getState' | 'extra'>
): GetPendingMeta<ThunkApiConfig>
}
>
export type AsyncThunkPendingActionCreator<
ThunkArg,
ThunkApiConfig = {}
> = ActionCreatorWithPreparedPayload<
[string, ThunkArg, GetPendingMeta<ThunkApiConfig>?],
undefined,
string,
never,
{
arg: ThunkArg
requestId: string
requestStatus: 'pending'
} & GetPendingMeta<ThunkApiConfig>
>
export type AsyncThunkRejectedActionCreator<
ThunkArg,
ThunkApiConfig = {}
> = ActionCreatorWithPreparedPayload<
[
Error | null,
string,
ThunkArg,
GetRejectValue<ThunkApiConfig>?,
GetRejectedMeta<ThunkApiConfig>?
],
GetRejectValue<ThunkApiConfig> | undefined,
string,
GetSerializedErrorType<ThunkApiConfig>,
{
arg: ThunkArg
requestId: string
requestStatus: 'rejected'
aborted: boolean
condition: boolean
} & (
| ({ rejectedWithValue: false } & {
[K in keyof GetRejectedMeta<ThunkApiConfig>]?: undefined
})
| ({ rejectedWithValue: true } & GetRejectedMeta<ThunkApiConfig>)
)
>
export type AsyncThunkFulfilledActionCreator<
Returned,
ThunkArg,
ThunkApiConfig = {}
> = ActionCreatorWithPreparedPayload<
[Returned, string, ThunkArg, GetFulfilledMeta<ThunkApiConfig>?],
Returned,
string,
never,
{
arg: ThunkArg
requestId: string
requestStatus: 'fulfilled'
} & GetFulfilledMeta<ThunkApiConfig>
>
/**
* A type describing the return value of `createAsyncThunk`.
* Might be useful for wrapping `createAsyncThunk` in custom abstractions.
*
* @public
*/
export type AsyncThunk<
Returned,
ThunkArg,
ThunkApiConfig extends AsyncThunkConfig
> = AsyncThunkActionCreator<Returned, ThunkArg, ThunkApiConfig> & {
pending: AsyncThunkPendingActionCreator<ThunkArg, ThunkApiConfig>
rejected: AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>
fulfilled: AsyncThunkFulfilledActionCreator<
Returned,
ThunkArg,
ThunkApiConfig
>
typePrefix: string
}
type OverrideThunkApiConfigs<OldConfig, NewConfig> = Id<
NewConfig & Omit<OldConfig, keyof NewConfig>
>
type CreateAsyncThunk<CurriedThunkApiConfig extends AsyncThunkConfig> = {
/**
*
* @param typePrefix
* @param payloadCreator
* @param options
*
* @public
*/
// separate signature without `AsyncThunkConfig` for better inference
<Returned, ThunkArg = void>(
typePrefix: string,
payloadCreator: AsyncThunkPayloadCreator<
Returned,
ThunkArg,
CurriedThunkApiConfig
>,
options?: AsyncThunkOptions<ThunkArg, CurriedThunkApiConfig>
): AsyncThunk<Returned, ThunkArg, CurriedThunkApiConfig>
/**
*
* @param typePrefix
* @param payloadCreator
* @param options
*
* @public
*/
<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig>(
typePrefix: string,
payloadCreator: AsyncThunkPayloadCreator<
Returned,
ThunkArg,
OverrideThunkApiConfigs<CurriedThunkApiConfig, ThunkApiConfig>
>,
options?: AsyncThunkOptions<
ThunkArg,
OverrideThunkApiConfigs<CurriedThunkApiConfig, ThunkApiConfig>
>
): AsyncThunk<
Returned,
ThunkArg,
OverrideThunkApiConfigs<CurriedThunkApiConfig, ThunkApiConfig>
>
withTypes<ThunkApiConfig extends AsyncThunkConfig>(): CreateAsyncThunk<
OverrideThunkApiConfigs<CurriedThunkApiConfig, ThunkApiConfig>
>
}
export const createAsyncThunk = (() => {
function createAsyncThunk<
Returned,
ThunkArg,
ThunkApiConfig extends AsyncThunkConfig
>(
typePrefix: string,
payloadCreator: AsyncThunkPayloadCreator<
Returned,
ThunkArg,
ThunkApiConfig
>,
options?: AsyncThunkOptions<ThunkArg, ThunkApiConfig>
): AsyncThunk<Returned, ThunkArg, ThunkApiConfig> {
type RejectedValue = GetRejectValue<ThunkApiConfig>
type PendingMeta = GetPendingMeta<ThunkApiConfig>
type FulfilledMeta = GetFulfilledMeta<ThunkApiConfig>
type RejectedMeta = GetRejectedMeta<ThunkApiConfig>
const fulfilled: AsyncThunkFulfilledActionCreator<
Returned,
ThunkArg,
ThunkApiConfig
> = createAction(
typePrefix + '/fulfilled',
(
payload: Returned,
requestId: string,
arg: ThunkArg,
meta?: FulfilledMeta
) => ({
payload,
meta: {
...((meta as any) || {}),
arg,
requestId,
requestStatus: 'fulfilled' as const,
},
})
)
const pending: AsyncThunkPendingActionCreator<ThunkArg, ThunkApiConfig> =
createAction(
typePrefix + '/pending',
(requestId: string, arg: ThunkArg, meta?: PendingMeta) => ({
payload: undefined,
meta: {
...((meta as any) || {}),
arg,
requestId,
requestStatus: 'pending' as const,
},
})
)
const rejected: AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig> =
createAction(
typePrefix + '/rejected',
(
error: Error | null,
requestId: string,
arg: ThunkArg,
payload?: RejectedValue,
meta?: RejectedMeta
) => ({
payload,
error: ((options && options.serializeError) || miniSerializeError)(
error || 'Rejected'
) as GetSerializedErrorType<ThunkApiConfig>,
meta: {
...((meta as any) || {}),
arg,
requestId,
rejectedWithValue: !!payload,
requestStatus: 'rejected' as const,
aborted: error?.name === 'AbortError',
condition: error?.name === 'ConditionError',
},
})
)
let displayedWarning = false
const AC =
typeof AbortController !== 'undefined'
? AbortController
: class implements AbortController {
signal = {
aborted: false,
addEventListener() {},
dispatchEvent() {
return false
},
onabort() {},
removeEventListener() {},
reason: undefined,
throwIfAborted() {},
}
abort() {
if (process.env.NODE_ENV !== 'production') {
if (!displayedWarning) {
displayedWarning = true
console.info(
`This platform does not implement AbortController.
If you want to use the AbortController to react to \`abort\` events, please consider importing a polyfill like 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'.`
)
}
}
}
}
function actionCreator(
arg: ThunkArg
): AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> {
return (dispatch, getState, extra) => {
const requestId = options?.idGenerator
? options.idGenerator(arg)
: nanoid()
const abortController = new AC()
let abortReason: string | undefined
let started = false
function abort(reason?: string) {
abortReason = reason
abortController.abort()
}
const promise = (async function () {
let finalAction: ReturnType<typeof fulfilled | typeof rejected>
try {
let conditionResult = options?.condition?.(arg, { getState, extra })
if (isThenable(conditionResult)) {
conditionResult = await conditionResult
}
if (conditionResult === false || abortController.signal.aborted) {
// eslint-disable-next-line no-throw-literal
throw {
name: 'ConditionError',
message: 'Aborted due to condition callback returning false.',
}
}
started = true
const abortedPromise = new Promise<never>((_, reject) =>
abortController.signal.addEventListener('abort', () =>
reject({
name: 'AbortError',
message: abortReason || 'Aborted',
})
)
)
dispatch(
pending(
requestId,
arg,
options?.getPendingMeta?.(
{ requestId, arg },
{ getState, extra }
)
)
)
finalAction = await Promise.race([
abortedPromise,
Promise.resolve(
payloadCreator(arg, {
dispatch,
getState,
extra,
requestId,
signal: abortController.signal,
abort,
rejectWithValue: ((
value: RejectedValue,
meta?: RejectedMeta
) => {
return new RejectWithValue(value, meta)
}) as any,
fulfillWithValue: ((value: unknown, meta?: FulfilledMeta) => {
return new FulfillWithMeta(value, meta)
}) as any,
})
).then((result) => {
if (result instanceof RejectWithValue) {
throw result
}
if (result instanceof FulfillWithMeta) {
return fulfilled(result.payload, requestId, arg, result.meta)
}
return fulfilled(result as any, requestId, arg)
}),
])
} catch (err) {
finalAction =
err instanceof RejectWithValue
? rejected(null, requestId, arg, err.payload, err.meta)
: rejected(err as any, requestId, arg)
}
// We dispatch the result action _after_ the catch, to avoid having any errors
// here get swallowed by the try/catch block,
// per https://twitter.com/dan_abramov/status/770914221638942720
// and https://github.com/reduxjs/redux-toolkit/blob/e85eb17b39a2118d859f7b7746e0f3fee523e089/docs/tutorials/advanced-tutorial.md#async-error-handling-logic-in-thunks
const skipDispatch =
options &&
!options.dispatchConditionRejection &&
rejected.match(finalAction) &&
(finalAction as any).meta.condition
if (!skipDispatch) {
dispatch(finalAction)
}
return finalAction
})()
return Object.assign(promise as Promise<any>, {
abort,
requestId,
arg,
unwrap() {
return promise.then<any>(unwrapResult)
},
})
}
}
return Object.assign(
actionCreator as AsyncThunkActionCreator<
Returned,
ThunkArg,
ThunkApiConfig
>,
{
pending,
rejected,
fulfilled,
typePrefix,
}
)
}
createAsyncThunk.withTypes = () => createAsyncThunk
return createAsyncThunk as CreateAsyncThunk<AsyncThunkConfig>
})()
interface UnwrappableAction {
payload: any
meta?: any
error?: any
}
type UnwrappedActionPayload<T extends UnwrappableAction> = Exclude<
T,
{ error: any }
>['payload']
/**
* @public
*/
export function unwrapResult<R extends UnwrappableAction>(
action: R
): UnwrappedActionPayload<R> {
if (action.meta && action.meta.rejectedWithValue) {
throw action.payload
}
if (action.error) {
throw action.error
}
return action.payload
}
type WithStrictNullChecks<True, False> = undefined extends boolean
? False
: True
function isThenable(value: any): value is PromiseLike<any> {
return (
value !== null &&
typeof value === 'object' &&
typeof value.then === 'function'
)
}

View File

@@ -0,0 +1,18 @@
import { current, isDraft } from 'immer'
import { createSelector } from 'reselect'
/**
* "Draft-Safe" version of `reselect`'s `createSelector`:
* If an `immer`-drafted object is passed into the resulting selector's first argument,
* the selector will act on the current draft value, instead of returning a cached value
* that might be possibly outdated if the draft has been modified since.
* @public
*/
export const createDraftSafeSelector: typeof createSelector = (
...args: unknown[]
) => {
const selector = (createSelector as any)(...args)
const wrappedSelector = (value: unknown, ...rest: unknown[]) =>
selector(isDraft(value) ? current(value) : value, ...rest)
return wrappedSelector as any
}

View File

@@ -0,0 +1,306 @@
import type { Draft } from 'immer'
import createNextState, { isDraft, isDraftable } from 'immer'
import type { AnyAction, Action, Reducer } from 'redux'
import type { ActionReducerMapBuilder } from './mapBuilders'
import { executeReducerBuilderCallback } from './mapBuilders'
import type { NoInfer } from './tsHelpers'
import { freezeDraftable } from './utils'
/**
* Defines a mapping from action types to corresponding action object shapes.
*
* @deprecated This should not be used manually - it is only used for internal
* inference purposes and should not have any further value.
* It might be removed in the future.
* @public
*/
export type Actions<T extends keyof any = string> = Record<T, Action>
/**
* @deprecated use `TypeGuard` instead
*/
export interface ActionMatcher<A extends AnyAction> {
(action: AnyAction): action is A
}
export type ActionMatcherDescription<S, A extends AnyAction> = {
matcher: ActionMatcher<A>
reducer: CaseReducer<S, NoInfer<A>>
}
export type ReadonlyActionMatcherDescriptionCollection<S> = ReadonlyArray<
ActionMatcherDescription<S, any>
>
export type ActionMatcherDescriptionCollection<S> = Array<
ActionMatcherDescription<S, any>
>
/**
* A *case reducer* is a reducer function for a specific action type. Case
* reducers can be composed to full reducers using `createReducer()`.
*
* Unlike a normal Redux reducer, a case reducer is never called with an
* `undefined` state to determine the initial state. Instead, the initial
* state is explicitly specified as an argument to `createReducer()`.
*
* In addition, a case reducer can choose to mutate the passed-in `state`
* value directly instead of returning a new state. This does not actually
* cause the store state to be mutated directly; instead, thanks to
* [immer](https://github.com/mweststrate/immer), the mutations are
* translated to copy operations that result in a new state.
*
* @public
*/
export type CaseReducer<S = any, A extends Action = AnyAction> = (
state: Draft<S>,
action: A
) => NoInfer<S> | void | Draft<NoInfer<S>>
/**
* A mapping from action types to case reducers for `createReducer()`.
*
* @deprecated This should not be used manually - it is only used
* for internal inference purposes and using it manually
* would lead to type erasure.
* It might be removed in the future.
* @public
*/
export type CaseReducers<S, AS extends Actions> = {
[T in keyof AS]: AS[T] extends Action ? CaseReducer<S, AS[T]> : void
}
export type NotFunction<T> = T extends Function ? never : T
function isStateFunction<S>(x: unknown): x is () => S {
return typeof x === 'function'
}
export type ReducerWithInitialState<S extends NotFunction<any>> = Reducer<S> & {
getInitialState: () => S
}
let hasWarnedAboutObjectNotation = false
/**
* A utility function that allows defining a reducer as a mapping from action
* type to *case reducer* functions that handle these action types. The
* reducer's initial state is passed as the first argument.
*
* @remarks
* The body of every case reducer is implicitly wrapped with a call to
* `produce()` from the [immer](https://github.com/mweststrate/immer) library.
* This means that rather than returning a new state object, you can also
* mutate the passed-in state object directly; these mutations will then be
* automatically and efficiently translated into copies, giving you both
* convenience and immutability.
*
* @overloadSummary
* This overload accepts a callback function that receives a `builder` object as its argument.
* That builder provides `addCase`, `addMatcher` and `addDefaultCase` functions that may be
* called to define what actions this reducer will handle.
*
* @param initialState - `State | (() => State)`: The initial state that should be used when the reducer is called the first time. This may also be a "lazy initializer" function, which should return an initial state value when called. This will be used whenever the reducer is called with `undefined` as its state value, and is primarily useful for cases like reading initial state from `localStorage`.
* @param builderCallback - `(builder: Builder) => void` A callback that receives a *builder* object to define
* case reducers via calls to `builder.addCase(actionCreatorOrType, reducer)`.
* @example
```ts
import {
createAction,
createReducer,
AnyAction,
PayloadAction,
} from "@reduxjs/toolkit";
const increment = createAction<number>("increment");
const decrement = createAction<number>("decrement");
function isActionWithNumberPayload(
action: AnyAction
): action is PayloadAction<number> {
return typeof action.payload === "number";
}
const reducer = createReducer(
{
counter: 0,
sumOfNumberPayloads: 0,
unhandledActions: 0,
},
(builder) => {
builder
.addCase(increment, (state, action) => {
// action is inferred correctly here
state.counter += action.payload;
})
// You can chain calls, or have separate `builder.addCase()` lines each time
.addCase(decrement, (state, action) => {
state.counter -= action.payload;
})
// You can apply a "matcher function" to incoming actions
.addMatcher(isActionWithNumberPayload, (state, action) => {})
// and provide a default case if no other handlers matched
.addDefaultCase((state, action) => {});
}
);
```
* @public
*/
export function createReducer<S extends NotFunction<any>>(
initialState: S | (() => S),
builderCallback: (builder: ActionReducerMapBuilder<S>) => void
): ReducerWithInitialState<S>
/**
* A utility function that allows defining a reducer as a mapping from action
* type to *case reducer* functions that handle these action types. The
* reducer's initial state is passed as the first argument.
*
* The body of every case reducer is implicitly wrapped with a call to
* `produce()` from the [immer](https://github.com/mweststrate/immer) library.
* This means that rather than returning a new state object, you can also
* mutate the passed-in state object directly; these mutations will then be
* automatically and efficiently translated into copies, giving you both
* convenience and immutability.
*
* @overloadSummary
* This overload accepts an object where the keys are string action types, and the values
* are case reducer functions to handle those action types.
*
* @param initialState - `State | (() => State)`: The initial state that should be used when the reducer is called the first time. This may also be a "lazy initializer" function, which should return an initial state value when called. This will be used whenever the reducer is called with `undefined` as its state value, and is primarily useful for cases like reading initial state from `localStorage`.
* @param actionsMap - An object mapping from action types to _case reducers_, each of which handles one specific action type.
* @param actionMatchers - An array of matcher definitions in the form `{matcher, reducer}`.
* All matching reducers will be executed in order, independently if a case reducer matched or not.
* @param defaultCaseReducer - A "default case" reducer that is executed if no case reducer and no matcher
* reducer was executed for this action.
*
* @example
```js
const counterReducer = createReducer(0, {
increment: (state, action) => state + action.payload,
decrement: (state, action) => state - action.payload
})
// Alternately, use a "lazy initializer" to provide the initial state
// (works with either form of createReducer)
const initialState = () => 0
const counterReducer = createReducer(initialState, {
increment: (state, action) => state + action.payload,
decrement: (state, action) => state - action.payload
})
```
* Action creators that were generated using [`createAction`](./createAction) may be used directly as the keys here, using computed property syntax:
```js
const increment = createAction('increment')
const decrement = createAction('decrement')
const counterReducer = createReducer(0, {
[increment]: (state, action) => state + action.payload,
[decrement.type]: (state, action) => state - action.payload
})
```
* @public
*/
export function createReducer<
S extends NotFunction<any>,
CR extends CaseReducers<S, any> = CaseReducers<S, any>
>(
initialState: S | (() => S),
actionsMap: CR,
actionMatchers?: ActionMatcherDescriptionCollection<S>,
defaultCaseReducer?: CaseReducer<S>
): ReducerWithInitialState<S>
export function createReducer<S extends NotFunction<any>>(
initialState: S | (() => S),
mapOrBuilderCallback:
| CaseReducers<S, any>
| ((builder: ActionReducerMapBuilder<S>) => void),
actionMatchers: ReadonlyActionMatcherDescriptionCollection<S> = [],
defaultCaseReducer?: CaseReducer<S>
): ReducerWithInitialState<S> {
if (process.env.NODE_ENV !== 'production') {
if (typeof mapOrBuilderCallback === 'object') {
if (!hasWarnedAboutObjectNotation) {
hasWarnedAboutObjectNotation = true
console.warn(
"The object notation for `createReducer` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer"
)
}
}
}
let [actionsMap, finalActionMatchers, finalDefaultCaseReducer] =
typeof mapOrBuilderCallback === 'function'
? executeReducerBuilderCallback(mapOrBuilderCallback)
: [mapOrBuilderCallback, actionMatchers, defaultCaseReducer]
// Ensure the initial state gets frozen either way (if draftable)
let getInitialState: () => S
if (isStateFunction(initialState)) {
getInitialState = () => freezeDraftable(initialState())
} else {
const frozenInitialState = freezeDraftable(initialState)
getInitialState = () => frozenInitialState
}
function reducer(state = getInitialState(), action: any): S {
let caseReducers = [
actionsMap[action.type],
...finalActionMatchers
.filter(({ matcher }) => matcher(action))
.map(({ reducer }) => reducer),
]
if (caseReducers.filter((cr) => !!cr).length === 0) {
caseReducers = [finalDefaultCaseReducer]
}
return caseReducers.reduce((previousState, caseReducer): S => {
if (caseReducer) {
if (isDraft(previousState)) {
// If it's already a draft, we must already be inside a `createNextState` call,
// likely because this is being wrapped in `createReducer`, `createSlice`, or nested
// inside an existing draft. It's safe to just pass the draft to the mutator.
const draft = previousState as Draft<S> // We can assume this is already a draft
const result = caseReducer(draft, action)
if (result === undefined) {
return previousState
}
return result as S
} else if (!isDraftable(previousState)) {
// If state is not draftable (ex: a primitive, such as 0), we want to directly
// return the caseReducer func and not wrap it with produce.
const result = caseReducer(previousState as any, action)
if (result === undefined) {
if (previousState === null) {
return previousState
}
throw Error(
'A case reducer on a non-draftable value must not return undefined'
)
}
return result as S
} else {
// @ts-ignore createNextState() produces an Immutable<Draft<S>> rather
// than an Immutable<S>, and TypeScript cannot find out how to reconcile
// these two types.
return createNextState(previousState, (draft: Draft<S>) => {
return caseReducer(draft, action)
})
}
}
return previousState
}, state)
}
reducer.getInitialState = getInitialState
return reducer as ReducerWithInitialState<S>
}

382
server/node_modules/@reduxjs/toolkit/src/createSlice.ts generated vendored Normal file
View File

@@ -0,0 +1,382 @@
import type { AnyAction, Reducer } from 'redux'
import { createNextState } from '.'
import type {
ActionCreatorWithoutPayload,
PayloadAction,
PayloadActionCreator,
PrepareAction,
_ActionCreatorWithPreparedPayload,
} from './createAction'
import { createAction } from './createAction'
import type {
CaseReducer,
CaseReducers,
ReducerWithInitialState,
} from './createReducer'
import { createReducer, NotFunction } from './createReducer'
import type { ActionReducerMapBuilder } from './mapBuilders'
import { executeReducerBuilderCallback } from './mapBuilders'
import type { NoInfer } from './tsHelpers'
import { freezeDraftable } from './utils'
let hasWarnedAboutObjectNotation = false
/**
* An action creator attached to a slice.
*
* @deprecated please use PayloadActionCreator directly
*
* @public
*/
export type SliceActionCreator<P> = PayloadActionCreator<P>
/**
* The return value of `createSlice`
*
* @public
*/
export interface Slice<
State = any,
CaseReducers extends SliceCaseReducers<State> = SliceCaseReducers<State>,
Name extends string = string
> {
/**
* The slice name.
*/
name: Name
/**
* The slice's reducer.
*/
reducer: Reducer<State>
/**
* Action creators for the types of actions that are handled by the slice
* reducer.
*/
actions: CaseReducerActions<CaseReducers, Name>
/**
* The individual case reducer functions that were passed in the `reducers` parameter.
* This enables reuse and testing if they were defined inline when calling `createSlice`.
*/
caseReducers: SliceDefinedCaseReducers<CaseReducers>
/**
* Provides access to the initial state value given to the slice.
* If a lazy state initializer was provided, it will be called and a fresh value returned.
*/
getInitialState: () => State
}
/**
* Options for `createSlice()`.
*
* @public
*/
export interface CreateSliceOptions<
State = any,
CR extends SliceCaseReducers<State> = SliceCaseReducers<State>,
Name extends string = string
> {
/**
* The slice's name. Used to namespace the generated action types.
*/
name: Name
/**
* The initial state that should be used when the reducer is called the first time. This may also be a "lazy initializer" function, which should return an initial state value when called. This will be used whenever the reducer is called with `undefined` as its state value, and is primarily useful for cases like reading initial state from `localStorage`.
*/
initialState: State | (() => State)
/**
* A mapping from action types to action-type-specific *case reducer*
* functions. For every action type, a matching action creator will be
* generated using `createAction()`.
*/
reducers: ValidateSliceCaseReducers<State, CR>
/**
* A callback that receives a *builder* object to define
* case reducers via calls to `builder.addCase(actionCreatorOrType, reducer)`.
*
* Alternatively, a mapping from action types to action-type-specific *case reducer*
* functions. These reducers should have existing action types used
* as the keys, and action creators will _not_ be generated.
*
* @example
```ts
import { createAction, createSlice, Action, AnyAction } from '@reduxjs/toolkit'
const incrementBy = createAction<number>('incrementBy')
const decrement = createAction('decrement')
interface RejectedAction extends Action {
error: Error
}
function isRejectedAction(action: AnyAction): action is RejectedAction {
return action.type.endsWith('rejected')
}
createSlice({
name: 'counter',
initialState: 0,
reducers: {},
extraReducers: builder => {
builder
.addCase(incrementBy, (state, action) => {
// action is inferred correctly here if using TS
})
// You can chain calls, or have separate `builder.addCase()` lines each time
.addCase(decrement, (state, action) => {})
// You can match a range of action types
.addMatcher(
isRejectedAction,
// `action` will be inferred as a RejectedAction due to isRejectedAction being defined as a type guard
(state, action) => {}
)
// and provide a default case if no other handlers matched
.addDefaultCase((state, action) => {})
}
})
```
*/
extraReducers?:
| CaseReducers<NoInfer<State>, any>
| ((builder: ActionReducerMapBuilder<NoInfer<State>>) => void)
}
/**
* A CaseReducer with a `prepare` method.
*
* @public
*/
export type CaseReducerWithPrepare<State, Action extends PayloadAction> = {
reducer: CaseReducer<State, Action>
prepare: PrepareAction<Action['payload']>
}
/**
* The type describing a slice's `reducers` option.
*
* @public
*/
export type SliceCaseReducers<State> = {
[K: string]:
| CaseReducer<State, PayloadAction<any>>
| CaseReducerWithPrepare<State, PayloadAction<any, string, any, any>>
}
type SliceActionType<
SliceName extends string,
ActionName extends keyof any
> = ActionName extends string | number ? `${SliceName}/${ActionName}` : string
/**
* Derives the slice's `actions` property from the `reducers` options
*
* @public
*/
export type CaseReducerActions<
CaseReducers extends SliceCaseReducers<any>,
SliceName extends string
> = {
[Type in keyof CaseReducers]: CaseReducers[Type] extends { prepare: any }
? ActionCreatorForCaseReducerWithPrepare<
CaseReducers[Type],
SliceActionType<SliceName, Type>
>
: ActionCreatorForCaseReducer<
CaseReducers[Type],
SliceActionType<SliceName, Type>
>
}
/**
* Get a `PayloadActionCreator` type for a passed `CaseReducerWithPrepare`
*
* @internal
*/
type ActionCreatorForCaseReducerWithPrepare<
CR extends { prepare: any },
Type extends string
> = _ActionCreatorWithPreparedPayload<CR['prepare'], Type>
/**
* Get a `PayloadActionCreator` type for a passed `CaseReducer`
*
* @internal
*/
type ActionCreatorForCaseReducer<CR, Type extends string> = CR extends (
state: any,
action: infer Action
) => any
? Action extends { payload: infer P }
? PayloadActionCreator<P, Type>
: ActionCreatorWithoutPayload<Type>
: ActionCreatorWithoutPayload<Type>
/**
* Extracts the CaseReducers out of a `reducers` object, even if they are
* tested into a `CaseReducerWithPrepare`.
*
* @internal
*/
type SliceDefinedCaseReducers<CaseReducers extends SliceCaseReducers<any>> = {
[Type in keyof CaseReducers]: CaseReducers[Type] extends {
reducer: infer Reducer
}
? Reducer
: CaseReducers[Type]
}
/**
* Used on a SliceCaseReducers object.
* Ensures that if a CaseReducer is a `CaseReducerWithPrepare`, that
* the `reducer` and the `prepare` function use the same type of `payload`.
*
* Might do additional such checks in the future.
*
* This type is only ever useful if you want to write your own wrapper around
* `createSlice`. Please don't use it otherwise!
*
* @public
*/
export type ValidateSliceCaseReducers<
S,
ACR extends SliceCaseReducers<S>
> = ACR &
{
[T in keyof ACR]: ACR[T] extends {
reducer(s: S, action?: infer A): any
}
? {
prepare(...a: never[]): Omit<A, 'type'>
}
: {}
}
function getType(slice: string, actionKey: string): string {
return `${slice}/${actionKey}`
}
/**
* A function that accepts an initial state, an object full of reducer
* functions, and a "slice name", and automatically generates
* action creators and action types that correspond to the
* reducers and state.
*
* The `reducer` argument is passed to `createReducer()`.
*
* @public
*/
export function createSlice<
State,
CaseReducers extends SliceCaseReducers<State>,
Name extends string = string
>(
options: CreateSliceOptions<State, CaseReducers, Name>
): Slice<State, CaseReducers, Name> {
const { name } = options
if (!name) {
throw new Error('`name` is a required option for createSlice')
}
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
if (options.initialState === undefined) {
console.error(
'You must provide an `initialState` value that is not `undefined`. You may have misspelled `initialState`'
)
}
}
const initialState =
typeof options.initialState == 'function'
? options.initialState
: freezeDraftable(options.initialState)
const reducers = options.reducers || {}
const reducerNames = Object.keys(reducers)
const sliceCaseReducersByName: Record<string, CaseReducer> = {}
const sliceCaseReducersByType: Record<string, CaseReducer> = {}
const actionCreators: Record<string, Function> = {}
reducerNames.forEach((reducerName) => {
const maybeReducerWithPrepare = reducers[reducerName]
const type = getType(name, reducerName)
let caseReducer: CaseReducer<State, any>
let prepareCallback: PrepareAction<any> | undefined
if ('reducer' in maybeReducerWithPrepare) {
caseReducer = maybeReducerWithPrepare.reducer
prepareCallback = maybeReducerWithPrepare.prepare
} else {
caseReducer = maybeReducerWithPrepare
}
sliceCaseReducersByName[reducerName] = caseReducer
sliceCaseReducersByType[type] = caseReducer
actionCreators[reducerName] = prepareCallback
? createAction(type, prepareCallback)
: createAction(type)
})
function buildReducer() {
if (process.env.NODE_ENV !== 'production') {
if (typeof options.extraReducers === 'object') {
if (!hasWarnedAboutObjectNotation) {
hasWarnedAboutObjectNotation = true
console.warn(
"The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice"
)
}
}
}
const [
extraReducers = {},
actionMatchers = [],
defaultCaseReducer = undefined,
] =
typeof options.extraReducers === 'function'
? executeReducerBuilderCallback(options.extraReducers)
: [options.extraReducers]
const finalCaseReducers = { ...extraReducers, ...sliceCaseReducersByType }
return createReducer(initialState, (builder) => {
for (let key in finalCaseReducers) {
builder.addCase(key, finalCaseReducers[key] as CaseReducer<any>)
}
for (let m of actionMatchers) {
builder.addMatcher(m.matcher, m.reducer)
}
if (defaultCaseReducer) {
builder.addDefaultCase(defaultCaseReducer)
}
})
}
let _reducer: ReducerWithInitialState<State>
return {
name,
reducer(state, action) {
if (!_reducer) _reducer = buildReducer()
return _reducer(state, action)
},
actions: actionCreators as any,
caseReducers: sliceCaseReducersByName as any,
getInitialState() {
if (!_reducer) _reducer = buildReducer()
return _reducer.getInitialState()
},
}
}

View File

@@ -0,0 +1,251 @@
import type { Action, ActionCreator, StoreEnhancer } from 'redux'
import { compose } from 'redux'
/**
* @public
*/
export interface DevToolsEnhancerOptions {
/**
* the instance name to be showed on the monitor page. Default value is `document.title`.
* If not specified and there's no document title, it will consist of `tabId` and `instanceId`.
*/
name?: string
/**
* action creators functions to be available in the Dispatcher.
*/
actionCreators?: ActionCreator<any>[] | { [key: string]: ActionCreator<any> }
/**
* if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once.
* It is the joint between performance and speed. When set to `0`, all actions will be sent instantly.
* Set it to a higher value when experiencing perf issues (also `maxAge` to a lower value).
*
* @default 500 ms.
*/
latency?: number
/**
* (> 1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance.
*
* @default 50
*/
maxAge?: number
/**
* Customizes how actions and state are serialized and deserialized. Can be a boolean or object. If given a boolean, the behavior is the same as if you
* were to pass an object and specify `options` as a boolean. Giving an object allows fine-grained customization using the `replacer` and `reviver`
* functions.
*/
serialize?:
| boolean
| {
/**
* - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
* - `false` - will handle also circular references.
* - `true` - will handle also date, regex, undefined, error objects, symbols, maps, sets and functions.
* - object, which contains `date`, `regex`, `undefined`, `error`, `symbol`, `map`, `set` and `function` keys.
* For each of them you can indicate if to include (by setting as `true`).
* For `function` key you can also specify a custom function which handles serialization.
* See [`jsan`](https://github.com/kolodny/jsan) for more details.
*/
options?:
| undefined
| boolean
| {
date?: true
regex?: true
undefined?: true
error?: true
symbol?: true
map?: true
set?: true
function?: true | ((fn: (...args: any[]) => any) => string)
}
/**
* [JSON replacer function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) used for both actions and states stringify.
* In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4)
* key. So you can deserialize it back while importing or persisting data.
* Moreover, it will also [show a nice preview showing the provided custom type](https://cloud.githubusercontent.com/assets/7957859/21814330/a17d556a-d761-11e6-85ef-159dd12f36c5.png):
*/
replacer?: (key: string, value: unknown) => any
/**
* [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter)
* used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41)
* as an example on how to serialize special data types and get them back.
*/
reviver?: (key: string, value: unknown) => any
/**
* Automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize).
* Just pass the Immutable library. It will support all ImmutableJS structures. You can even export them into a file and get them back.
* The only exception is `Record` class, for which you should pass this in addition the references to your classes in `refs`.
*/
immutable?: any
/**
* ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting...
*/
refs?: any
}
/**
* function which takes `action` object and id number as arguments, and should return `action` object back.
*/
actionSanitizer?: <A extends Action>(action: A, id: number) => A
/**
* function which takes `state` object and index as arguments, and should return `state` object back.
*/
stateSanitizer?: <S>(state: S, index: number) => S
/**
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
* If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
* @deprecated Use actionsDenylist instead.
*/
actionsBlacklist?: string | string[]
/**
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
* If `actionsWhitelist` specified, `actionsBlacklist` is ignored.
* @deprecated Use actionsAllowlist instead.
*/
actionsWhitelist?: string | string[]
/**
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
* If `actionsAllowlist` specified, `actionsDenylist` is ignored.
*/
actionsDenylist?: string | string[]
/**
* *string or array of strings as regex* - actions types to be hidden / shown in the monitors (while passed to the reducers).
* If `actionsAllowlist` specified, `actionsDenylist` is ignored.
*/
actionsAllowlist?: string | string[]
/**
* called for every action before sending, takes `state` and `action` object, and returns `true` in case it allows sending the current data to the monitor.
* Use it as a more advanced version of `actionsDenylist`/`actionsAllowlist` parameters.
*/
predicate?: <S, A extends Action>(state: S, action: A) => boolean
/**
* if specified as `false`, it will not record the changes till clicking on `Start recording` button.
* Available only for Redux enhancer, for others use `autoPause`.
*
* @default true
*/
shouldRecordChanges?: boolean
/**
* if specified, whenever clicking on `Pause recording` button and there are actions in the history log, will add this action type.
* If not specified, will commit when paused. Available only for Redux enhancer.
*
* @default "@@PAUSED""
*/
pauseActionType?: string
/**
* auto pauses when the extensions window is not opened, and so has zero impact on your app when not in use.
* Not available for Redux enhancer (as it already does it but storing the data to be sent).
*
* @default false
*/
autoPause?: boolean
/**
* if specified as `true`, it will not allow any non-monitor actions to be dispatched till clicking on `Unlock changes` button.
* Available only for Redux enhancer.
*
* @default false
*/
shouldStartLocked?: boolean
/**
* if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Available only for Redux enhancer.
*
* @default true
*/
shouldHotReload?: boolean
/**
* if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
*
* @default false
*/
shouldCatchErrors?: boolean
/**
* If you want to restrict the extension, specify the features you allow.
* If not specified, all of the features are enabled. When set as an object, only those included as `true` will be allowed.
* Note that except `true`/`false`, `import` and `export` can be set as `custom` (which is by default for Redux enhancer), meaning that the importing/exporting occurs on the client side.
* Otherwise, you'll get/set the data right from the monitor part.
*/
features?: {
/**
* start/pause recording of dispatched actions
*/
pause?: boolean
/**
* lock/unlock dispatching actions and side effects
*/
lock?: boolean
/**
* persist states on page reloading
*/
persist?: boolean
/**
* export history of actions in a file
*/
export?: boolean | 'custom'
/**
* import history of actions from a file
*/
import?: boolean | 'custom'
/**
* jump back and forth (time travelling)
*/
jump?: boolean
/**
* skip (cancel) actions
*/
skip?: boolean
/**
* drag and drop actions in the history list
*/
reorder?: boolean
/**
* dispatch custom actions or action creators
*/
dispatch?: boolean
/**
* generate tests for the selected actions
*/
test?: boolean
}
/**
* Set to true or a stacktrace-returning function to record call stack traces for dispatched actions.
* Defaults to false.
*/
trace?: boolean | (<A extends Action>(action: A) => string)
/**
* The maximum number of stack trace entries to record per action. Defaults to 10.
*/
traceLimit?: number
}
type Compose = typeof compose
interface ComposeWithDevTools {
(options: DevToolsEnhancerOptions): Compose
<StoreExt>(...funcs: StoreEnhancer<StoreExt>[]): StoreEnhancer<StoreExt>
}
/**
* @public
*/
export const composeWithDevTools: ComposeWithDevTools =
typeof window !== 'undefined' &&
(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: function () {
if (arguments.length === 0) return undefined
if (typeof arguments[0] === 'object') return compose
return compose.apply(null, arguments as any as Function[])
}
/**
* @public
*/
export const devToolsEnhancer: {
(options: DevToolsEnhancerOptions): StoreEnhancer<any>
} =
typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__
? (window as any).__REDUX_DEVTOOLS_EXTENSION__
: function () {
return function (noop) {
return noop
}
}

View File

@@ -0,0 +1,43 @@
import type {
EntityDefinition,
Comparer,
IdSelector,
EntityAdapter,
} from './models'
import { createInitialStateFactory } from './entity_state'
import { createSelectorsFactory } from './state_selectors'
import { createSortedStateAdapter } from './sorted_state_adapter'
import { createUnsortedStateAdapter } from './unsorted_state_adapter'
/**
*
* @param options
*
* @public
*/
export function createEntityAdapter<T>(
options: {
selectId?: IdSelector<T>
sortComparer?: false | Comparer<T>
} = {}
): EntityAdapter<T> {
const { selectId, sortComparer }: EntityDefinition<T> = {
sortComparer: false,
selectId: (instance: any) => instance.id,
...options,
}
const stateFactory = createInitialStateFactory<T>()
const selectorsFactory = createSelectorsFactory<T>()
const stateAdapter = sortComparer
? createSortedStateAdapter(selectId, sortComparer)
: createUnsortedStateAdapter(selectId)
return {
selectId,
sortComparer,
...stateFactory,
...selectorsFactory,
...stateAdapter,
}
}

View File

@@ -0,0 +1,20 @@
import type { EntityState } from './models'
export function getInitialEntityState<V>(): EntityState<V> {
return {
ids: [],
entities: {},
}
}
export function createInitialStateFactory<V>() {
function getInitialState(): EntityState<V>
function getInitialState<S extends object>(
additionalState: S
): EntityState<V> & S
function getInitialState(additionalState: any = {}): any {
return Object.assign(getInitialEntityState(), additionalState)
}
return { getInitialState }
}

View File

@@ -0,0 +1,9 @@
export { createEntityAdapter } from './create_adapter'
export type {
Dictionary,
EntityState,
EntityAdapter,
Update,
IdSelector,
Comparer,
} from './models'

View File

@@ -0,0 +1,171 @@
import type { PayloadAction } from '../createAction'
import type { IsAny } from '../tsHelpers'
/**
* @public
*/
export type EntityId = number | string
/**
* @public
*/
export type Comparer<T> = (a: T, b: T) => number
/**
* @public
*/
export type IdSelector<T> = (model: T) => EntityId
/**
* @public
*/
export interface DictionaryNum<T> {
[id: number]: T | undefined
}
/**
* @public
*/
export interface Dictionary<T> extends DictionaryNum<T> {
[id: string]: T | undefined
}
/**
* @public
*/
export type Update<T> = { id: EntityId; changes: Partial<T> }
/**
* @public
*/
export interface EntityState<T> {
ids: EntityId[]
entities: Dictionary<T>
}
/**
* @public
*/
export interface EntityDefinition<T> {
selectId: IdSelector<T>
sortComparer: false | Comparer<T>
}
export type PreventAny<S, T> = IsAny<S, EntityState<T>, S>
/**
* @public
*/
export interface EntityStateAdapter<T> {
addOne<S extends EntityState<T>>(state: PreventAny<S, T>, entity: T): S
addOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
action: PayloadAction<T>
): S
addMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: readonly T[] | Record<EntityId, T>
): S
addMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: PayloadAction<readonly T[] | Record<EntityId, T>>
): S
setOne<S extends EntityState<T>>(state: PreventAny<S, T>, entity: T): S
setOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
action: PayloadAction<T>
): S
setMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: readonly T[] | Record<EntityId, T>
): S
setMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: PayloadAction<readonly T[] | Record<EntityId, T>>
): S
setAll<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: readonly T[] | Record<EntityId, T>
): S
setAll<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: PayloadAction<readonly T[] | Record<EntityId, T>>
): S
removeOne<S extends EntityState<T>>(state: PreventAny<S, T>, key: EntityId): S
removeOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
key: PayloadAction<EntityId>
): S
removeMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
keys: readonly EntityId[]
): S
removeMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
keys: PayloadAction<readonly EntityId[]>
): S
removeAll<S extends EntityState<T>>(state: PreventAny<S, T>): S
updateOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
update: Update<T>
): S
updateOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
update: PayloadAction<Update<T>>
): S
updateMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
updates: ReadonlyArray<Update<T>>
): S
updateMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
updates: PayloadAction<ReadonlyArray<Update<T>>>
): S
upsertOne<S extends EntityState<T>>(state: PreventAny<S, T>, entity: T): S
upsertOne<S extends EntityState<T>>(
state: PreventAny<S, T>,
entity: PayloadAction<T>
): S
upsertMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: readonly T[] | Record<EntityId, T>
): S
upsertMany<S extends EntityState<T>>(
state: PreventAny<S, T>,
entities: PayloadAction<readonly T[] | Record<EntityId, T>>
): S
}
/**
* @public
*/
export interface EntitySelectors<T, V> {
selectIds: (state: V) => EntityId[]
selectEntities: (state: V) => Dictionary<T>
selectAll: (state: V) => T[]
selectTotal: (state: V) => number
selectById: (state: V, id: EntityId) => T | undefined
}
/**
* @public
*/
export interface EntityAdapter<T> extends EntityStateAdapter<T> {
selectId: IdSelector<T>
sortComparer: false | Comparer<T>
getInitialState(): EntityState<T>
getInitialState<S extends object>(state: S): EntityState<T> & S
getSelectors(): EntitySelectors<T, EntityState<T>>
getSelectors<V>(
selectState: (state: V) => EntityState<T>
): EntitySelectors<T, V>
}

View File

@@ -0,0 +1,168 @@
import type {
EntityState,
IdSelector,
Comparer,
EntityStateAdapter,
Update,
EntityId,
} from './models'
import { createStateOperator } from './state_adapter'
import { createUnsortedStateAdapter } from './unsorted_state_adapter'
import {
selectIdValue,
ensureEntitiesArray,
splitAddedUpdatedEntities,
} from './utils'
export function createSortedStateAdapter<T>(
selectId: IdSelector<T>,
sort: Comparer<T>
): EntityStateAdapter<T> {
type R = EntityState<T>
const { removeOne, removeMany, removeAll } =
createUnsortedStateAdapter(selectId)
function addOneMutably(entity: T, state: R): void {
return addManyMutably([entity], state)
}
function addManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
const models = newEntities.filter(
(model) => !(selectIdValue(model, selectId) in state.entities)
)
if (models.length !== 0) {
merge(models, state)
}
}
function setOneMutably(entity: T, state: R): void {
return setManyMutably([entity], state)
}
function setManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
if (newEntities.length !== 0) {
merge(newEntities, state)
}
}
function setAllMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
state.entities = {}
state.ids = []
addManyMutably(newEntities, state)
}
function updateOneMutably(update: Update<T>, state: R): void {
return updateManyMutably([update], state)
}
function updateManyMutably(
updates: ReadonlyArray<Update<T>>,
state: R
): void {
let appliedUpdates = false
for (let update of updates) {
const entity = state.entities[update.id]
if (!entity) {
continue
}
appliedUpdates = true
Object.assign(entity, update.changes)
const newId = selectId(entity)
if (update.id !== newId) {
delete state.entities[update.id]
state.entities[newId] = entity
}
}
if (appliedUpdates) {
resortEntities(state)
}
}
function upsertOneMutably(entity: T, state: R): void {
return upsertManyMutably([entity], state)
}
function upsertManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
const [added, updated] = splitAddedUpdatedEntities<T>(
newEntities,
selectId,
state
)
updateManyMutably(updated, state)
addManyMutably(added, state)
}
function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
if (a.length !== b.length) {
return false
}
for (let i = 0; i < a.length && i < b.length; i++) {
if (a[i] === b[i]) {
continue
}
return false
}
return true
}
function merge(models: readonly T[], state: R): void {
// Insert/overwrite all new/updated
models.forEach((model) => {
state.entities[selectId(model)] = model
})
resortEntities(state)
}
function resortEntities(state: R) {
const allEntities = Object.values(state.entities) as T[]
allEntities.sort(sort)
const newSortedIds = allEntities.map(selectId)
const { ids } = state
if (!areArraysEqual(ids, newSortedIds)) {
state.ids = newSortedIds
}
}
return {
removeOne,
removeMany,
removeAll,
addOne: createStateOperator(addOneMutably),
updateOne: createStateOperator(updateOneMutably),
upsertOne: createStateOperator(upsertOneMutably),
setOne: createStateOperator(setOneMutably),
setMany: createStateOperator(setManyMutably),
setAll: createStateOperator(setAllMutably),
addMany: createStateOperator(addManyMutably),
updateMany: createStateOperator(updateManyMutably),
upsertMany: createStateOperator(upsertManyMutably),
}
}

View File

@@ -0,0 +1,57 @@
import createNextState, { isDraft } from 'immer'
import type { EntityState, PreventAny } from './models'
import type { PayloadAction } from '../createAction'
import { isFSA } from '../createAction'
import { IsAny } from '../tsHelpers'
export function createSingleArgumentStateOperator<V>(
mutator: (state: EntityState<V>) => void
) {
const operator = createStateOperator((_: undefined, state: EntityState<V>) =>
mutator(state)
)
return function operation<S extends EntityState<V>>(
state: PreventAny<S, V>
): S {
return operator(state as S, undefined)
}
}
export function createStateOperator<V, R>(
mutator: (arg: R, state: EntityState<V>) => void
) {
return function operation<S extends EntityState<V>>(
state: S,
arg: R | PayloadAction<R>
): S {
function isPayloadActionArgument(
arg: R | PayloadAction<R>
): arg is PayloadAction<R> {
return isFSA(arg)
}
const runMutator = (draft: EntityState<V>) => {
if (isPayloadActionArgument(arg)) {
mutator(arg.payload, draft)
} else {
mutator(arg, draft)
}
}
if (isDraft(state)) {
// we must already be inside a `createNextState` call, likely because
// this is being wrapped in `createReducer` or `createSlice`.
// It's safe to just pass the draft to the mutator.
runMutator(state)
// since it's a draft, we'll just return it
return state
} else {
// @ts-ignore createNextState() produces an Immutable<Draft<S>> rather
// than an Immutable<S>, and TypeScript cannot find out how to reconcile
// these two types.
return createNextState(state, runMutator)
}
}
}

View File

@@ -0,0 +1,67 @@
import type { Selector } from 'reselect'
import { createDraftSafeSelector } from '../createDraftSafeSelector'
import type {
EntityState,
EntitySelectors,
Dictionary,
EntityId,
} from './models'
export function createSelectorsFactory<T>() {
function getSelectors(): EntitySelectors<T, EntityState<T>>
function getSelectors<V>(
selectState: (state: V) => EntityState<T>
): EntitySelectors<T, V>
function getSelectors<V>(
selectState?: (state: V) => EntityState<T>
): EntitySelectors<T, any> {
const selectIds = (state: EntityState<T>) => state.ids
const selectEntities = (state: EntityState<T>) => state.entities
const selectAll = createDraftSafeSelector(
selectIds,
selectEntities,
(ids, entities): T[] => ids.map((id) => entities[id]!)
)
const selectId = (_: unknown, id: EntityId) => id
const selectById = (entities: Dictionary<T>, id: EntityId) => entities[id]
const selectTotal = createDraftSafeSelector(selectIds, (ids) => ids.length)
if (!selectState) {
return {
selectIds,
selectEntities,
selectAll,
selectTotal,
selectById: createDraftSafeSelector(
selectEntities,
selectId,
selectById
),
}
}
const selectGlobalizedEntities = createDraftSafeSelector(
selectState as Selector<V, EntityState<T>>,
selectEntities
)
return {
selectIds: createDraftSafeSelector(selectState, selectIds),
selectEntities: selectGlobalizedEntities,
selectAll: createDraftSafeSelector(selectState, selectAll),
selectTotal: createDraftSafeSelector(selectState, selectTotal),
selectById: createDraftSafeSelector(
selectGlobalizedEntities,
selectId,
selectById
),
}
}
return { getSelectors }
}

View File

@@ -0,0 +1,83 @@
import type { EntityAdapter } from '../index'
import { createEntityAdapter } from '../index'
import type { PayloadAction } from '../../createAction'
import { createAction } from '../../createAction'
import { createSlice } from '../../createSlice'
import type { BookModel } from './fixtures/book'
describe('Entity State', () => {
let adapter: EntityAdapter<BookModel>
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
})
})
it('should let you get the initial state', () => {
const initialState = adapter.getInitialState()
expect(initialState).toEqual({
ids: [],
entities: {},
})
})
it('should let you provide additional initial state properties', () => {
const additionalProperties = { isHydrated: true }
const initialState = adapter.getInitialState(additionalProperties)
expect(initialState).toEqual({
...additionalProperties,
ids: [],
entities: {},
})
})
it('should allow methods to be passed as reducers', () => {
const upsertBook = createAction<BookModel>('otherBooks/upsert')
const booksSlice = createSlice({
name: 'books',
initialState: adapter.getInitialState(),
reducers: {
addOne: adapter.addOne,
removeOne(state, action: PayloadAction<string>) {
// TODO The nested `produce` calls don't mutate `state` here as I would have expected.
// TODO (note that `state` here is actually an Immer Draft<S>, from `createReducer`)
// TODO However, this works if we _return_ the new plain result value instead
// TODO See https://github.com/immerjs/immer/issues/533
const result = adapter.removeOne(state, action)
return result
},
},
extraReducers: (builder) => {
builder.addCase(upsertBook, (state, action) => {
return adapter.upsertOne(state, action)
})
},
})
const { addOne, removeOne } = booksSlice.actions
const { reducer } = booksSlice
const selectors = adapter.getSelectors()
const book1: BookModel = { id: 'a', title: 'First' }
const book1a: BookModel = { id: 'a', title: 'Second' }
const afterAddOne = reducer(undefined, addOne(book1))
expect(afterAddOne.entities[book1.id]).toBe(book1)
const afterRemoveOne = reducer(afterAddOne, removeOne(book1.id))
expect(afterRemoveOne.entities[book1.id]).toBeUndefined()
expect(selectors.selectTotal(afterRemoveOne)).toBe(0)
const afterUpsertFirst = reducer(afterRemoveOne, upsertBook(book1))
const afterUpsertSecond = reducer(afterUpsertFirst, upsertBook(book1a))
expect(afterUpsertSecond.entities[book1.id]).toEqual(book1a)
expect(selectors.selectTotal(afterUpsertSecond)).toBe(1)
})
})

View File

@@ -0,0 +1,26 @@
export interface BookModel {
id: string
title: string
author?: string
}
export const AClockworkOrange: BookModel = Object.freeze({
id: 'aco',
title: 'A Clockwork Orange',
})
export const AnimalFarm: BookModel = Object.freeze({
id: 'af',
title: 'Animal Farm',
})
export const TheGreatGatsby: BookModel = Object.freeze({
id: 'tgg',
title: 'The Great Gatsby',
})
export const TheHobbit: BookModel = Object.freeze({
id: 'th',
title: 'The Hobbit',
author: 'J. R. R. Tolkien',
})

View File

@@ -0,0 +1,932 @@
import type { EntityAdapter, EntityState } from '../models'
import { createEntityAdapter } from '../create_adapter'
import { createAction, createSlice, configureStore } from '@reduxjs/toolkit'
import type { BookModel } from './fixtures/book'
import {
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
TheHobbit,
} from './fixtures/book'
import { createNextState } from '../..'
describe('Sorted State Adapter', () => {
let adapter: EntityAdapter<BookModel>
let state: EntityState<BookModel>
beforeAll(() => {
//eslint-disable-next-line
Object.defineProperty(Array.prototype, 'unwantedField', {
enumerable: true,
configurable: true,
value: 'This should not appear anywhere',
})
})
afterAll(() => {
delete (Array.prototype as any).unwantedField
})
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
sortComparer: (a, b) => {
return a.title.localeCompare(b.title)
},
})
state = { ids: [], entities: {} }
})
it('should let you add one entity to the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
expect(withOneEntity).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you add one entity to the state as an FSA', () => {
const bookAction = createAction<BookModel>('books/add')
const withOneEntity = adapter.addOne(state, bookAction(TheGreatGatsby))
expect(withOneEntity).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should not change state if you attempt to re-add an entity', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const readded = adapter.addOne(withOneEntity, TheGreatGatsby)
expect(readded).toBe(withOneEntity)
})
it('should let you add many entities to the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withManyMore = adapter.addMany(withOneEntity, [
AClockworkOrange,
AnimalFarm,
])
expect(withManyMore).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id, TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you add many entities to the state from a dictionary', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withManyMore = adapter.addMany(withOneEntity, {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
})
expect(withManyMore).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id, TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should remove existing and add new ones on setAll', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withAll = adapter.setAll(withOneEntity, [
AClockworkOrange,
AnimalFarm,
])
expect(withAll).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should remove existing and add new ones on setAll when passing in a dictionary', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withAll = adapter.setAll(withOneEntity, {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
})
expect(withAll).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should remove existing and add new ones on addAll (deprecated)', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withAll = adapter.setAll(withOneEntity, [
AClockworkOrange,
AnimalFarm,
])
expect(withAll).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you add remove an entity from the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withoutOne = adapter.removeOne(withOneEntity, TheGreatGatsby.id)
expect(withoutOne).toEqual({
ids: [],
entities: {},
})
})
it('should let you remove many entities by id from the state', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
])
const withoutMany = adapter.removeMany(withAll, [
TheGreatGatsby.id,
AClockworkOrange.id,
])
expect(withoutMany).toEqual({
ids: [AnimalFarm.id],
entities: {
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you remove all entities from the state', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
])
const withoutAll = adapter.removeAll(withAll)
expect(withoutAll).toEqual({
ids: [],
entities: {},
})
})
it('should let you update an entity in the state', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should not change state if you attempt to update an entity that has not been added', () => {
const withUpdates = adapter.updateOne(state, {
id: TheGreatGatsby.id,
changes: { title: 'A New Title' },
})
expect(withUpdates).toBe(state)
})
it('Replaces an existing entity if you change the ID while updating', () => {
const withAdded = adapter.setAll(state, [
{ id: 'a', title: 'First' },
{ id: 'b', title: 'Second' },
{ id: 'c', title: 'Third' },
])
const withUpdated = adapter.updateOne(withAdded, {
id: 'b',
changes: {
id: 'c',
},
})
const { ids, entities } = withUpdated
expect(ids.length).toBe(2)
expect(entities.a).toBeTruthy()
expect(entities.b).not.toBeTruthy()
expect(entities.c).toBeTruthy()
expect(entities.c!.id).toBe('c')
expect(entities.c!.title).toBe('Second')
})
it('should not change ids state if you attempt to update an entity that does not impact sorting', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
])
const changes = { title: 'The Great Gatsby II' }
const withUpdates = adapter.updateOne(withAll, {
id: TheGreatGatsby.id,
changes,
})
expect(withAll.ids).toBe(withUpdates.ids)
})
it('should let you update the id of entity', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { id: 'A New Id' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [changes.id],
entities: {
[changes.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should resort correctly if same id but sort key update', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AnimalFarm,
AClockworkOrange,
])
const changes = { title: 'A New Hope' }
const withUpdates = adapter.updateOne(withAll, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [AClockworkOrange.id, TheGreatGatsby.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...changes,
},
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should resort correctly if the id and sort key update', () => {
const withOne = adapter.setAll(state, [
TheGreatGatsby,
AnimalFarm,
AClockworkOrange,
])
const changes = { id: 'A New Id', title: 'A New Hope' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [AClockworkOrange.id, changes.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[changes.id]: {
...TheGreatGatsby,
...changes,
},
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should maintain a stable sorting order when updating items', () => {
interface OrderedEntity {
id: string
order: number
ts: number
}
const sortedItemsAdapter = createEntityAdapter<OrderedEntity>({
sortComparer: (a, b) => a.order - b.order,
})
const withInitialItems = sortedItemsAdapter.setAll(
sortedItemsAdapter.getInitialState(),
[
{ id: 'A', order: 1, ts: 0 },
{ id: 'B', order: 2, ts: 0 },
{ id: 'C', order: 3, ts: 0 },
{ id: 'D', order: 3, ts: 0 },
{ id: 'E', order: 3, ts: 0 },
]
)
const updated = sortedItemsAdapter.updateOne(withInitialItems, {
id: 'C',
changes: { ts: 5 },
})
expect(updated.ids).toEqual(['A', 'B', 'C', 'D', 'E'])
})
it('should let you update many entities by id in the state', () => {
const firstChange = { title: 'Zack' }
const secondChange = { title: 'Aaron' }
const withMany = adapter.setAll(state, [TheGreatGatsby, AClockworkOrange])
const withUpdates = adapter.updateMany(withMany, [
{ id: TheGreatGatsby.id, changes: firstChange },
{ id: AClockworkOrange.id, changes: secondChange },
])
expect(withUpdates).toEqual({
ids: [AClockworkOrange.id, TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: {
...AClockworkOrange,
...secondChange,
},
},
})
})
it('should let you add one entity to the state with upsert()', () => {
const withOneEntity = adapter.upsertOne(state, TheGreatGatsby)
expect(withOneEntity).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you update an entity in the state with upsert()', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const withUpdates = adapter.upsertOne(withOne, {
...TheGreatGatsby,
...changes,
})
expect(withUpdates).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should let you upsert many entities in the state', () => {
const firstChange = { title: 'Zack' }
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.upsertMany(withMany, [
{ ...TheGreatGatsby, ...firstChange },
AClockworkOrange,
])
expect(withUpserts).toEqual({
ids: [AClockworkOrange.id, TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should do nothing when upsertMany is given an empty array', () => {
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.upsertMany(withMany, [])
expect(withUpserts).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should throw when upsertMany is passed undefined or null', async () => {
const withMany = adapter.setAll(state, [TheGreatGatsby])
const fakeRequest = (response: null | undefined) =>
new Promise((resolve) => setTimeout(() => resolve(response), 50))
const undefinedBooks = (await fakeRequest(undefined)) as BookModel[]
expect(() => adapter.upsertMany(withMany, undefinedBooks)).toThrow()
const nullBooks = (await fakeRequest(null)) as BookModel[]
expect(() => adapter.upsertMany(withMany, nullBooks)).toThrow()
})
it('should let you upsert many entities in the state when passing in a dictionary', () => {
const firstChange = { title: 'Zack' }
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.upsertMany(withMany, {
[TheGreatGatsby.id]: { ...TheGreatGatsby, ...firstChange },
[AClockworkOrange.id]: AClockworkOrange,
})
expect(withUpserts).toEqual({
ids: [AClockworkOrange.id, TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should let you add a new entity in the state with setOne() and keep the sorting', () => {
const withMany = adapter.setAll(state, [AnimalFarm, TheHobbit])
const withOneMore = adapter.setOne(withMany, TheGreatGatsby)
expect(withOneMore).toEqual({
ids: [AnimalFarm.id, TheGreatGatsby.id, TheHobbit.id],
entities: {
[AnimalFarm.id]: AnimalFarm,
[TheHobbit.id]: TheHobbit,
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you replace an entity in the state with setOne()', () => {
let withOne = adapter.setOne(state, TheHobbit)
const changeWithoutAuthor = { id: TheHobbit.id, title: 'Silmarillion' }
withOne = adapter.setOne(withOne, changeWithoutAuthor)
expect(withOne).toEqual({
ids: [TheHobbit.id],
entities: {
[TheHobbit.id]: changeWithoutAuthor,
},
})
})
it('should do nothing when setMany is given an empty array', () => {
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.setMany(withMany, [])
expect(withUpserts).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you set many entities in the state', () => {
const firstChange = { id: TheHobbit.id, title: 'Silmarillion' }
const withMany = adapter.setAll(state, [TheHobbit])
const withSetMany = adapter.setMany(withMany, [
firstChange,
AClockworkOrange,
])
expect(withSetMany).toEqual({
ids: [AClockworkOrange.id, TheHobbit.id],
entities: {
[TheHobbit.id]: firstChange,
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should let you set many entities in the state when passing in a dictionary', () => {
const changeWithoutAuthor = { id: TheHobbit.id, title: 'Silmarillion' }
const withMany = adapter.setAll(state, [TheHobbit])
const withSetMany = adapter.setMany(withMany, {
[TheHobbit.id]: changeWithoutAuthor,
[AClockworkOrange.id]: AClockworkOrange,
})
expect(withSetMany).toEqual({
ids: [AClockworkOrange.id, TheHobbit.id],
entities: {
[TheHobbit.id]: changeWithoutAuthor,
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it("only returns one entry for that id in the id's array", () => {
const book1: BookModel = { id: 'a', title: 'First' }
const book2: BookModel = { id: 'b', title: 'Second' }
const initialState = adapter.getInitialState()
const withItems = adapter.addMany(initialState, [book1, book2])
expect(withItems.ids).toEqual(['a', 'b'])
const withUpdate = adapter.updateOne(withItems, {
id: 'a',
changes: { id: 'b' },
})
expect(withUpdate.ids).toEqual(['b'])
expect(withUpdate.entities['b']!.title).toBe(book1.title)
})
describe('can be used mutably when wrapped in createNextState', () => {
test('removeAll', () => {
const withTwo = adapter.addMany(state, [TheGreatGatsby, AnimalFarm])
const result = createNextState(withTwo, (draft) => {
adapter.removeAll(draft)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {},
"ids": Array [],
}
`)
})
test('addOne', () => {
const result = createNextState(state, (draft) => {
adapter.addOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('addMany', () => {
const result = createNextState(state, (draft) => {
adapter.addMany(draft, [TheGreatGatsby, AnimalFarm])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"af",
"tgg",
],
}
`)
})
test('setAll', () => {
const result = createNextState(state, (draft) => {
adapter.setAll(draft, [TheGreatGatsby, AnimalFarm])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"af",
"tgg",
],
}
`)
})
test('updateOne', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const result = createNextState(withOne, (draft) => {
adapter.updateOne(draft, {
id: TheGreatGatsby.id,
changes,
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('updateMany', () => {
const firstChange = { title: 'First Change' }
const secondChange = { title: 'Second Change' }
const thirdChange = { title: 'Third Change' }
const fourthChange = { author: 'Fourth Change' }
const withMany = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
TheHobbit,
])
const result = createNextState(withMany, (draft) => {
adapter.updateMany(draft, [
{ id: TheHobbit.id, changes: firstChange },
{ id: TheGreatGatsby.id, changes: secondChange },
{ id: AClockworkOrange.id, changes: thirdChange },
{ id: TheHobbit.id, changes: fourthChange },
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"aco": Object {
"id": "aco",
"title": "Third Change",
},
"tgg": Object {
"id": "tgg",
"title": "Second Change",
},
"th": Object {
"author": "Fourth Change",
"id": "th",
"title": "First Change",
},
},
"ids": Array [
"th",
"tgg",
"aco",
],
}
`)
})
test('upsertOne (insert)', () => {
const result = createNextState(state, (draft) => {
adapter.upsertOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('upsertOne (update)', () => {
const withOne = adapter.upsertOne(state, TheGreatGatsby)
const result = createNextState(withOne, (draft) => {
adapter.upsertOne(draft, {
id: TheGreatGatsby.id,
title: 'A New Hope',
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('upsertMany', () => {
const withOne = adapter.upsertOne(state, TheGreatGatsby)
const result = createNextState(withOne, (draft) => {
adapter.upsertMany(draft, [
{
id: TheGreatGatsby.id,
title: 'A New Hope',
},
AnimalFarm,
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
"af",
],
}
`)
})
test('setOne (insert)', () => {
const result = createNextState(state, (draft) => {
adapter.setOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('setOne (update)', () => {
const withOne = adapter.setOne(state, TheHobbit)
const result = createNextState(withOne, (draft) => {
adapter.setOne(draft, {
id: TheHobbit.id,
title: 'Silmarillion',
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"th": Object {
"id": "th",
"title": "Silmarillion",
},
},
"ids": Array [
"th",
],
}
`)
})
test('setMany', () => {
const withOne = adapter.setOne(state, TheHobbit)
const result = createNextState(withOne, (draft) => {
adapter.setMany(draft, [
{
id: TheHobbit.id,
title: 'Silmarillion',
},
AnimalFarm,
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"th": Object {
"id": "th",
"title": "Silmarillion",
},
},
"ids": Array [
"af",
"th",
],
}
`)
})
test('removeOne', () => {
const withTwo = adapter.addMany(state, [TheGreatGatsby, AnimalFarm])
const result = createNextState(withTwo, (draft) => {
adapter.removeOne(draft, TheGreatGatsby.id)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
},
"ids": Array [
"af",
],
}
`)
})
test('removeMany', () => {
const withThree = adapter.addMany(state, [
TheGreatGatsby,
AnimalFarm,
AClockworkOrange,
])
const result = createNextState(withThree, (draft) => {
adapter.removeMany(draft, [TheGreatGatsby.id, AnimalFarm.id])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"aco": Object {
"id": "aco",
"title": "A Clockwork Orange",
},
},
"ids": Array [
"aco",
],
}
`)
})
})
})

View File

@@ -0,0 +1,61 @@
import type { EntityAdapter } from '../index'
import { createEntityAdapter } from '../index'
import type { PayloadAction } from '../../createAction'
import { configureStore } from '../../configureStore'
import { createSlice } from '../../createSlice'
import type { BookModel } from './fixtures/book'
describe('createStateOperator', () => {
let adapter: EntityAdapter<BookModel>
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
})
})
it('Correctly mutates a draft state when inside `createNextState', () => {
const booksSlice = createSlice({
name: 'books',
initialState: adapter.getInitialState(),
reducers: {
// We should be able to call an adapter method as a mutating helper in a larger reducer
addOne(state, action: PayloadAction<BookModel>) {
// Originally, having nested `produce` calls don't mutate `state` here as I would have expected.
// (note that `state` here is actually an Immer Draft<S>, from `createReducer`)
// One woarkound was to return the new plain result value instead
// See https://github.com/immerjs/immer/issues/533
// However, after tweaking `createStateOperator` to check if the argument is a draft,
// we can just treat the operator as strictly mutating, without returning a result,
// and the result should be correct.
const result = adapter.addOne(state, action)
expect(result.ids.length).toBe(1)
//Deliberately _don't_ return result
},
// We should also be able to pass them individually as case reducers
addAnother: adapter.addOne,
},
})
const { addOne, addAnother } = booksSlice.actions
const store = configureStore({
reducer: {
books: booksSlice.reducer,
},
})
const book1: BookModel = { id: 'a', title: 'First' }
store.dispatch(addOne(book1))
const state1 = store.getState()
expect(state1.books.ids.length).toBe(1)
expect(state1.books.entities['a']).toBe(book1)
const book2: BookModel = { id: 'b', title: 'Second' }
store.dispatch(addAnother(book2))
const state2 = store.getState()
expect(state2.books.ids.length).toBe(2)
expect(state2.books.entities['b']).toBe(book2)
})
})

View File

@@ -0,0 +1,129 @@
import type { EntityAdapter, EntityState } from '../index'
import { createEntityAdapter } from '../index'
import type { EntitySelectors } from '../models'
import type { BookModel } from './fixtures/book'
import { AClockworkOrange, AnimalFarm, TheGreatGatsby } from './fixtures/book'
import type { Selector } from 'reselect'
import { createSelector } from 'reselect'
describe('Entity State Selectors', () => {
describe('Composed Selectors', () => {
interface State {
books: EntityState<BookModel>
}
let adapter: EntityAdapter<BookModel>
let selectors: EntitySelectors<BookModel, State>
let state: State
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
})
state = {
books: adapter.setAll(adapter.getInitialState(), [
AClockworkOrange,
AnimalFarm,
TheGreatGatsby,
]),
}
selectors = adapter.getSelectors((state: State) => state.books)
})
it('should create a selector for selecting the ids', () => {
const ids = selectors.selectIds(state)
expect(ids).toEqual(state.books.ids)
})
it('should create a selector for selecting the entities', () => {
const entities = selectors.selectEntities(state)
expect(entities).toEqual(state.books.entities)
})
it('should create a selector for selecting the list of models', () => {
const models = selectors.selectAll(state)
expect(models).toEqual([AClockworkOrange, AnimalFarm, TheGreatGatsby])
})
it('should create a selector for selecting the count of models', () => {
const total = selectors.selectTotal(state)
expect(total).toEqual(3)
})
it('should create a selector for selecting a single item by ID', () => {
const first = selectors.selectById(state, AClockworkOrange.id)
expect(first).toBe(AClockworkOrange)
const second = selectors.selectById(state, AnimalFarm.id)
expect(second).toBe(AnimalFarm)
})
})
describe('Uncomposed Selectors', () => {
type State = EntityState<BookModel>
let adapter: EntityAdapter<BookModel>
let selectors: EntitySelectors<BookModel, EntityState<BookModel>>
let state: State
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
})
state = adapter.setAll(adapter.getInitialState(), [
AClockworkOrange,
AnimalFarm,
TheGreatGatsby,
])
selectors = adapter.getSelectors()
})
it('should create a selector for selecting the ids', () => {
const ids = selectors.selectIds(state)
expect(ids).toEqual(state.ids)
})
it('should create a selector for selecting the entities', () => {
const entities = selectors.selectEntities(state)
expect(entities).toEqual(state.entities)
})
it('should type single entity from Dictionary as entity type or undefined', () => {
expectType<Selector<EntityState<BookModel>, BookModel | undefined>>(
createSelector(selectors.selectEntities, (entities) => entities[0])
)
})
it('should create a selector for selecting the list of models', () => {
const models = selectors.selectAll(state)
expect(models).toEqual([AClockworkOrange, AnimalFarm, TheGreatGatsby])
})
it('should create a selector for selecting the count of models', () => {
const total = selectors.selectTotal(state)
expect(total).toEqual(3)
})
it('should create a selector for selecting a single item by ID', () => {
const first = selectors.selectById(state, AClockworkOrange.id)
expect(first).toBe(AClockworkOrange)
const second = selectors.selectById(state, AnimalFarm.id)
expect(second).toBe(AnimalFarm)
})
})
})
function expectType<T>(t: T) {
return t
}

View File

@@ -0,0 +1,777 @@
import type { EntityAdapter, EntityState } from '../models'
import { createEntityAdapter } from '../create_adapter'
import type { BookModel } from './fixtures/book'
import {
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
TheHobbit,
} from './fixtures/book'
import { createNextState } from '../..'
describe('Unsorted State Adapter', () => {
let adapter: EntityAdapter<BookModel>
let state: EntityState<BookModel>
beforeAll(() => {
//eslint-disable-next-line
Object.defineProperty(Array.prototype, 'unwantedField', {
enumerable: true,
configurable: true,
value: 'This should not appear anywhere',
})
})
afterAll(() => {
delete (Array.prototype as any).unwantedField
})
beforeEach(() => {
adapter = createEntityAdapter({
selectId: (book: BookModel) => book.id,
})
state = { ids: [], entities: {} }
})
it('should let you add one entity to the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
expect(withOneEntity).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should not change state if you attempt to re-add an entity', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const readded = adapter.addOne(withOneEntity, TheGreatGatsby)
expect(readded).toBe(withOneEntity)
})
it('should let you add many entities to the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withManyMore = adapter.addMany(withOneEntity, [
AClockworkOrange,
AnimalFarm,
])
expect(withManyMore).toEqual({
ids: [TheGreatGatsby.id, AClockworkOrange.id, AnimalFarm.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you add many entities to the state from a dictionary', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withManyMore = adapter.addMany(withOneEntity, {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
})
expect(withManyMore).toEqual({
ids: [TheGreatGatsby.id, AClockworkOrange.id, AnimalFarm.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should remove existing and add new ones on setAll', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withAll = adapter.setAll(withOneEntity, [
AClockworkOrange,
AnimalFarm,
])
expect(withAll).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should remove existing and add new ones on setAll when passing in a dictionary', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withAll = adapter.setAll(withOneEntity, {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
})
expect(withAll).toEqual({
ids: [AClockworkOrange.id, AnimalFarm.id],
entities: {
[AClockworkOrange.id]: AClockworkOrange,
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you add remove an entity from the state', () => {
const withOneEntity = adapter.addOne(state, TheGreatGatsby)
const withoutOne = adapter.removeOne(withOneEntity, TheGreatGatsby.id)
expect(withoutOne).toEqual({
ids: [],
entities: {},
})
})
it('should let you remove many entities by id from the state', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
])
const withoutMany = adapter.removeMany(withAll, [
TheGreatGatsby.id,
AClockworkOrange.id,
])
expect(withoutMany).toEqual({
ids: [AnimalFarm.id],
entities: {
[AnimalFarm.id]: AnimalFarm,
},
})
})
it('should let you remove all entities from the state', () => {
const withAll = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
AnimalFarm,
])
const withoutAll = adapter.removeAll(withAll)
expect(withoutAll).toEqual({
ids: [],
entities: {},
})
})
it('should let you update an entity in the state', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should not change state if you attempt to update an entity that has not been added', () => {
const withUpdates = adapter.updateOne(state, {
id: TheGreatGatsby.id,
changes: { title: 'A New Title' },
})
expect(withUpdates).toBe(state)
})
it('should not change ids state if you attempt to update an entity that has already been added', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withOne.ids).toBe(withUpdates.ids)
})
it('should let you update the id of entity', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { id: 'A New Id' }
const withUpdates = adapter.updateOne(withOne, {
id: TheGreatGatsby.id,
changes,
})
expect(withUpdates).toEqual({
ids: [changes.id],
entities: {
[changes.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should let you update many entities by id in the state', () => {
const firstChange = { title: 'First Change' }
const secondChange = { title: 'Second Change' }
const withMany = adapter.setAll(state, [TheGreatGatsby, AClockworkOrange])
const withUpdates = adapter.updateMany(withMany, [
{ id: TheGreatGatsby.id, changes: firstChange },
{ id: AClockworkOrange.id, changes: secondChange },
])
expect(withUpdates).toEqual({
ids: [TheGreatGatsby.id, AClockworkOrange.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: {
...AClockworkOrange,
...secondChange,
},
},
})
})
it("doesn't break when multiple renames of one item occur", () => {
const withA = adapter.addOne(state, { id: 'a', title: 'First' })
const withUpdates = adapter.updateMany(withA, [
{ id: 'a', changes: { id: 'b' } },
{ id: 'a', changes: { id: 'c' } },
])
const { ids, entities } = withUpdates
/*
Original code failed with a mish-mash of values, like:
{
ids: [ 'c' ],
entities: { b: { id: 'b', title: 'First' }, c: { id: 'c' } }
}
We now expect that only 'c' will be left:
{
ids: [ 'c' ],
entities: { c: { id: 'c', title: 'First' } }
}
*/
expect(ids.length).toBe(1)
expect(ids).toEqual(['c'])
expect(entities.a).toBeFalsy()
expect(entities.b).toBeFalsy()
expect(entities.c).toBeTruthy()
})
it('should let you add one entity to the state with upsert()', () => {
const withOneEntity = adapter.upsertOne(state, TheGreatGatsby)
expect(withOneEntity).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you update an entity in the state with upsert()', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const withUpdates = adapter.upsertOne(withOne, {
...TheGreatGatsby,
...changes,
})
expect(withUpdates).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...changes,
},
},
})
})
it('should let you upsert many entities in the state', () => {
const firstChange = { title: 'First Change' }
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.upsertMany(withMany, [
{ ...TheGreatGatsby, ...firstChange },
AClockworkOrange,
])
expect(withUpserts).toEqual({
ids: [TheGreatGatsby.id, AClockworkOrange.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should let you upsert many entities in the state when passing in a dictionary', () => {
const firstChange = { title: 'Zack' }
const withMany = adapter.setAll(state, [TheGreatGatsby])
const withUpserts = adapter.upsertMany(withMany, {
[TheGreatGatsby.id]: { ...TheGreatGatsby, ...firstChange },
[AClockworkOrange.id]: AClockworkOrange,
})
expect(withUpserts).toEqual({
ids: [TheGreatGatsby.id, AClockworkOrange.id],
entities: {
[TheGreatGatsby.id]: {
...TheGreatGatsby,
...firstChange,
},
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should let you add a new entity in the state with setOne()', () => {
const withOne = adapter.setOne(state, TheGreatGatsby)
expect(withOne).toEqual({
ids: [TheGreatGatsby.id],
entities: {
[TheGreatGatsby.id]: TheGreatGatsby,
},
})
})
it('should let you replace an entity in the state with setOne()', () => {
let withOne = adapter.setOne(state, TheHobbit)
const changeWithoutAuthor = { id: TheHobbit.id, title: 'Silmarillion' }
withOne = adapter.setOne(withOne, changeWithoutAuthor)
expect(withOne).toEqual({
ids: [TheHobbit.id],
entities: {
[TheHobbit.id]: changeWithoutAuthor,
},
})
})
it('should let you set many entities in the state', () => {
const changeWithoutAuthor = { id: TheHobbit.id, title: 'Silmarillion' }
const withMany = adapter.setAll(state, [TheHobbit])
const withSetMany = adapter.setMany(withMany, [
changeWithoutAuthor,
AClockworkOrange,
])
expect(withSetMany).toEqual({
ids: [TheHobbit.id, AClockworkOrange.id],
entities: {
[TheHobbit.id]: changeWithoutAuthor,
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it('should let you set many entities in the state when passing in a dictionary', () => {
const changeWithoutAuthor = { id: TheHobbit.id, title: 'Silmarillion' }
const withMany = adapter.setAll(state, [TheHobbit])
const withSetMany = adapter.setMany(withMany, {
[TheHobbit.id]: changeWithoutAuthor,
[AClockworkOrange.id]: AClockworkOrange,
})
expect(withSetMany).toEqual({
ids: [TheHobbit.id, AClockworkOrange.id],
entities: {
[TheHobbit.id]: changeWithoutAuthor,
[AClockworkOrange.id]: AClockworkOrange,
},
})
})
it("only returns one entry for that id in the id's array", () => {
const book1: BookModel = { id: 'a', title: 'First' }
const book2: BookModel = { id: 'b', title: 'Second' }
const initialState = adapter.getInitialState()
const withItems = adapter.addMany(initialState, [book1, book2])
expect(withItems.ids).toEqual(['a', 'b'])
const withUpdate = adapter.updateOne(withItems, {
id: 'a',
changes: { id: 'b' },
})
expect(withUpdate.ids).toEqual(['b'])
expect(withUpdate.entities['b']!.title).toBe(book1.title)
})
describe('can be used mutably when wrapped in createNextState', () => {
test('removeAll', () => {
const withTwo = adapter.addMany(state, [TheGreatGatsby, AnimalFarm])
const result = createNextState(withTwo, (draft) => {
adapter.removeAll(draft)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {},
"ids": Array [],
}
`)
})
test('addOne', () => {
const result = createNextState(state, (draft) => {
adapter.addOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('addMany', () => {
const result = createNextState(state, (draft) => {
adapter.addMany(draft, [TheGreatGatsby, AnimalFarm])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
"af",
],
}
`)
})
test('setAll', () => {
const result = createNextState(state, (draft) => {
adapter.setAll(draft, [TheGreatGatsby, AnimalFarm])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
"af",
],
}
`)
})
test('updateOne', () => {
const withOne = adapter.addOne(state, TheGreatGatsby)
const changes = { title: 'A New Hope' }
const result = createNextState(withOne, (draft) => {
adapter.updateOne(draft, {
id: TheGreatGatsby.id,
changes,
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('updateMany', () => {
const firstChange = { title: 'First Change' }
const secondChange = { title: 'Second Change' }
const thirdChange = { title: 'Third Change' }
const fourthChange = { author: 'Fourth Change' }
const withMany = adapter.setAll(state, [
TheGreatGatsby,
AClockworkOrange,
TheHobbit,
])
const result = createNextState(withMany, (draft) => {
adapter.updateMany(draft, [
{ id: TheHobbit.id, changes: firstChange },
{ id: TheGreatGatsby.id, changes: secondChange },
{ id: AClockworkOrange.id, changes: thirdChange },
{ id: TheHobbit.id, changes: fourthChange },
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"aco": Object {
"id": "aco",
"title": "Third Change",
},
"tgg": Object {
"id": "tgg",
"title": "Second Change",
},
"th": Object {
"author": "Fourth Change",
"id": "th",
"title": "First Change",
},
},
"ids": Array [
"tgg",
"aco",
"th",
],
}
`)
})
test('upsertOne (insert)', () => {
const result = createNextState(state, (draft) => {
adapter.upsertOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('upsertOne (update)', () => {
const withOne = adapter.upsertOne(state, TheGreatGatsby)
const result = createNextState(withOne, (draft) => {
adapter.upsertOne(draft, {
id: TheGreatGatsby.id,
title: 'A New Hope',
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('upsertMany', () => {
const withOne = adapter.upsertOne(state, TheGreatGatsby)
const result = createNextState(withOne, (draft) => {
adapter.upsertMany(draft, [
{
id: TheGreatGatsby.id,
title: 'A New Hope',
},
AnimalFarm,
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"tgg": Object {
"id": "tgg",
"title": "A New Hope",
},
},
"ids": Array [
"tgg",
"af",
],
}
`)
})
test('setOne (insert)', () => {
const result = createNextState(state, (draft) => {
adapter.setOne(draft, TheGreatGatsby)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"tgg": Object {
"id": "tgg",
"title": "The Great Gatsby",
},
},
"ids": Array [
"tgg",
],
}
`)
})
test('setOne (update)', () => {
const withOne = adapter.setOne(state, TheHobbit)
const result = createNextState(withOne, (draft) => {
adapter.setOne(draft, {
id: TheHobbit.id,
title: 'Silmarillion',
})
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"th": Object {
"id": "th",
"title": "Silmarillion",
},
},
"ids": Array [
"th",
],
}
`)
})
test('setMany', () => {
const withOne = adapter.setOne(state, TheHobbit)
const result = createNextState(withOne, (draft) => {
adapter.setMany(draft, [
{
id: TheHobbit.id,
title: 'Silmarillion',
},
AnimalFarm,
])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
"th": Object {
"id": "th",
"title": "Silmarillion",
},
},
"ids": Array [
"th",
"af",
],
}
`)
})
test('removeOne', () => {
const withTwo = adapter.addMany(state, [TheGreatGatsby, AnimalFarm])
const result = createNextState(withTwo, (draft) => {
adapter.removeOne(draft, TheGreatGatsby.id)
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"af": Object {
"id": "af",
"title": "Animal Farm",
},
},
"ids": Array [
"af",
],
}
`)
})
test('removeMany', () => {
const withThree = adapter.addMany(state, [
TheGreatGatsby,
AnimalFarm,
AClockworkOrange,
])
const result = createNextState(withThree, (draft) => {
adapter.removeMany(draft, [TheGreatGatsby.id, AnimalFarm.id])
})
expect(result).toMatchInlineSnapshot(`
Object {
"entities": Object {
"aco": Object {
"id": "aco",
"title": "A Clockwork Orange",
},
},
"ids": Array [
"aco",
],
}
`)
})
})
})

View File

@@ -0,0 +1,65 @@
import { AClockworkOrange } from './fixtures/book'
describe('Entity utils', () => {
describe(`selectIdValue()`, () => {
const OLD_ENV = process.env
beforeEach(() => {
jest.resetModules() // this is important - it clears the cache
process.env = { ...OLD_ENV, NODE_ENV: 'development' }
})
afterEach(() => {
process.env = OLD_ENV
jest.resetAllMocks()
})
it('should not warn when key does exist', () => {
const { selectIdValue } = require('../utils')
const spy = jest.spyOn(console, 'warn')
selectIdValue(AClockworkOrange, (book: any) => book.id)
expect(spy).not.toHaveBeenCalled()
})
it('should warn when key does not exist in dev mode', () => {
const { selectIdValue } = require('../utils')
const spy = jest.spyOn(console, 'warn')
selectIdValue(AClockworkOrange, (book: any) => book.foo)
expect(spy).toHaveBeenCalled()
})
it('should warn when key is undefined in dev mode', () => {
const { selectIdValue } = require('../utils')
const spy = jest.spyOn(console, 'warn')
const undefinedAClockworkOrange = { ...AClockworkOrange, id: undefined }
selectIdValue(undefinedAClockworkOrange, (book: any) => book.id)
expect(spy).toHaveBeenCalled()
})
it('should not warn when key does not exist in prod mode', () => {
process.env.NODE_ENV = 'production'
const { selectIdValue } = require('../utils')
const spy = jest.spyOn(console, 'warn')
selectIdValue(AClockworkOrange, (book: any) => book.foo)
expect(spy).not.toHaveBeenCalled()
})
it('should not warn when key is undefined in prod mode', () => {
process.env.NODE_ENV = 'production'
const { selectIdValue } = require('../utils')
const spy = jest.spyOn(console, 'warn')
const undefinedAClockworkOrange = { ...AClockworkOrange, id: undefined }
selectIdValue(undefinedAClockworkOrange, (book: any) => book.id)
expect(spy).not.toHaveBeenCalled()
})
})
})

View File

@@ -0,0 +1,198 @@
import type {
EntityState,
EntityStateAdapter,
IdSelector,
Update,
EntityId,
} from './models'
import {
createStateOperator,
createSingleArgumentStateOperator,
} from './state_adapter'
import {
selectIdValue,
ensureEntitiesArray,
splitAddedUpdatedEntities,
} from './utils'
export function createUnsortedStateAdapter<T>(
selectId: IdSelector<T>
): EntityStateAdapter<T> {
type R = EntityState<T>
function addOneMutably(entity: T, state: R): void {
const key = selectIdValue(entity, selectId)
if (key in state.entities) {
return
}
state.ids.push(key)
state.entities[key] = entity
}
function addManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
for (const entity of newEntities) {
addOneMutably(entity, state)
}
}
function setOneMutably(entity: T, state: R): void {
const key = selectIdValue(entity, selectId)
if (!(key in state.entities)) {
state.ids.push(key)
}
state.entities[key] = entity
}
function setManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
for (const entity of newEntities) {
setOneMutably(entity, state)
}
}
function setAllMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
newEntities = ensureEntitiesArray(newEntities)
state.ids = []
state.entities = {}
addManyMutably(newEntities, state)
}
function removeOneMutably(key: EntityId, state: R): void {
return removeManyMutably([key], state)
}
function removeManyMutably(keys: readonly EntityId[], state: R): void {
let didMutate = false
keys.forEach((key) => {
if (key in state.entities) {
delete state.entities[key]
didMutate = true
}
})
if (didMutate) {
state.ids = state.ids.filter((id) => id in state.entities)
}
}
function removeAllMutably(state: R): void {
Object.assign(state, {
ids: [],
entities: {},
})
}
function takeNewKey(
keys: { [id: string]: EntityId },
update: Update<T>,
state: R
): boolean {
const original = state.entities[update.id]
const updated: T = Object.assign({}, original, update.changes)
const newKey = selectIdValue(updated, selectId)
const hasNewKey = newKey !== update.id
if (hasNewKey) {
keys[update.id] = newKey
delete state.entities[update.id]
}
state.entities[newKey] = updated
return hasNewKey
}
function updateOneMutably(update: Update<T>, state: R): void {
return updateManyMutably([update], state)
}
function updateManyMutably(
updates: ReadonlyArray<Update<T>>,
state: R
): void {
const newKeys: { [id: string]: EntityId } = {}
const updatesPerEntity: { [id: string]: Update<T> } = {}
updates.forEach((update) => {
// Only apply updates to entities that currently exist
if (update.id in state.entities) {
// If there are multiple updates to one entity, merge them together
updatesPerEntity[update.id] = {
id: update.id,
// Spreads ignore falsy values, so this works even if there isn't
// an existing update already at this key
changes: {
...(updatesPerEntity[update.id]
? updatesPerEntity[update.id].changes
: null),
...update.changes,
},
}
}
})
updates = Object.values(updatesPerEntity)
const didMutateEntities = updates.length > 0
if (didMutateEntities) {
const didMutateIds =
updates.filter((update) => takeNewKey(newKeys, update, state)).length >
0
if (didMutateIds) {
state.ids = Object.keys(state.entities)
}
}
}
function upsertOneMutably(entity: T, state: R): void {
return upsertManyMutably([entity], state)
}
function upsertManyMutably(
newEntities: readonly T[] | Record<EntityId, T>,
state: R
): void {
const [added, updated] = splitAddedUpdatedEntities<T>(
newEntities,
selectId,
state
)
updateManyMutably(updated, state)
addManyMutably(added, state)
}
return {
removeAll: createSingleArgumentStateOperator(removeAllMutably),
addOne: createStateOperator(addOneMutably),
addMany: createStateOperator(addManyMutably),
setOne: createStateOperator(setOneMutably),
setMany: createStateOperator(setManyMutably),
setAll: createStateOperator(setAllMutably),
updateOne: createStateOperator(updateOneMutably),
updateMany: createStateOperator(updateManyMutably),
upsertOne: createStateOperator(upsertOneMutably),
upsertMany: createStateOperator(upsertManyMutably),
removeOne: createStateOperator(removeOneMutably),
removeMany: createStateOperator(removeManyMutably),
}
}

View File

@@ -0,0 +1,49 @@
import type { EntityState, IdSelector, Update, EntityId } from './models'
export function selectIdValue<T>(entity: T, selectId: IdSelector<T>) {
const key = selectId(entity)
if (process.env.NODE_ENV !== 'production' && key === undefined) {
console.warn(
'The entity passed to the `selectId` implementation returned undefined.',
'You should probably provide your own `selectId` implementation.',
'The entity that was passed:',
entity,
'The `selectId` implementation:',
selectId.toString()
)
}
return key
}
export function ensureEntitiesArray<T>(
entities: readonly T[] | Record<EntityId, T>
): readonly T[] {
if (!Array.isArray(entities)) {
entities = Object.values(entities)
}
return entities
}
export function splitAddedUpdatedEntities<T>(
newEntities: readonly T[] | Record<EntityId, T>,
selectId: IdSelector<T>,
state: EntityState<T>
): [T[], Update<T>[]] {
newEntities = ensureEntitiesArray(newEntities)
const added: T[] = []
const updated: Update<T>[] = []
for (const entity of newEntities) {
const id = selectIdValue(entity, selectId)
if (id in state.entities) {
updated.push({ id, changes: entity })
} else {
added.push(entity)
}
}
return [added, updated]
}

View File

@@ -0,0 +1,143 @@
import type { Middleware, AnyAction } from 'redux'
import type { ThunkMiddleware } from 'redux-thunk'
import thunkMiddleware from 'redux-thunk'
import type { ActionCreatorInvariantMiddlewareOptions } from './actionCreatorInvariantMiddleware'
import { createActionCreatorInvariantMiddleware } from './actionCreatorInvariantMiddleware'
import type { ImmutableStateInvariantMiddlewareOptions } from './immutableStateInvariantMiddleware'
/* PROD_START_REMOVE_UMD */
import { createImmutableStateInvariantMiddleware } from './immutableStateInvariantMiddleware'
/* PROD_STOP_REMOVE_UMD */
import type { SerializableStateInvariantMiddlewareOptions } from './serializableStateInvariantMiddleware'
import { createSerializableStateInvariantMiddleware } from './serializableStateInvariantMiddleware'
import type { ExcludeFromTuple } from './tsHelpers'
import { MiddlewareArray } from './utils'
function isBoolean(x: any): x is boolean {
return typeof x === 'boolean'
}
interface ThunkOptions<E = any> {
extraArgument: E
}
interface GetDefaultMiddlewareOptions {
thunk?: boolean | ThunkOptions
immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
}
export type ThunkMiddlewareFor<
S,
O extends GetDefaultMiddlewareOptions = {}
> = O extends {
thunk: false
}
? never
: O extends { thunk: { extraArgument: infer E } }
? ThunkMiddleware<S, AnyAction, E>
: ThunkMiddleware<S, AnyAction>
export type CurriedGetDefaultMiddleware<S = any> = <
O extends Partial<GetDefaultMiddlewareOptions> = {
thunk: true
immutableCheck: true
serializableCheck: true
actionCreatorCheck: true
}
>(
options?: O
) => MiddlewareArray<ExcludeFromTuple<[ThunkMiddlewareFor<S, O>], never>>
export function curryGetDefaultMiddleware<
S = any
>(): CurriedGetDefaultMiddleware<S> {
return function curriedGetDefaultMiddleware(options) {
return getDefaultMiddleware(options)
}
}
/**
* Returns any array containing the default middleware installed by
* `configureStore()`. Useful if you want to configure your store with a custom
* `middleware` array but still keep the default set.
*
* @return The default middleware used by `configureStore()`.
*
* @public
*
* @deprecated Prefer to use the callback notation for the `middleware` option in `configureStore`
* to access a pre-typed `getDefaultMiddleware` instead.
*/
export function getDefaultMiddleware<
S = any,
O extends Partial<GetDefaultMiddlewareOptions> = {
thunk: true
immutableCheck: true
serializableCheck: true
actionCreatorCheck: true
}
>(
options: O = {} as O
): MiddlewareArray<ExcludeFromTuple<[ThunkMiddlewareFor<S, O>], never>> {
const {
thunk = true,
immutableCheck = true,
serializableCheck = true,
actionCreatorCheck = true,
} = options
let middlewareArray = new MiddlewareArray<Middleware[]>()
if (thunk) {
if (isBoolean(thunk)) {
middlewareArray.push(thunkMiddleware)
} else {
middlewareArray.push(
thunkMiddleware.withExtraArgument(thunk.extraArgument)
)
}
}
if (process.env.NODE_ENV !== 'production') {
if (immutableCheck) {
/* PROD_START_REMOVE_UMD */
let immutableOptions: ImmutableStateInvariantMiddlewareOptions = {}
if (!isBoolean(immutableCheck)) {
immutableOptions = immutableCheck
}
middlewareArray.unshift(
createImmutableStateInvariantMiddleware(immutableOptions)
)
/* PROD_STOP_REMOVE_UMD */
}
if (serializableCheck) {
let serializableOptions: SerializableStateInvariantMiddlewareOptions = {}
if (!isBoolean(serializableCheck)) {
serializableOptions = serializableCheck
}
middlewareArray.push(
createSerializableStateInvariantMiddleware(serializableOptions)
)
}
if (actionCreatorCheck) {
let actionCreatorOptions: ActionCreatorInvariantMiddlewareOptions = {}
if (!isBoolean(actionCreatorCheck)) {
actionCreatorOptions = actionCreatorCheck
}
middlewareArray.unshift(
createActionCreatorInvariantMiddleware(actionCreatorOptions)
)
}
}
return middlewareArray as any
}

View File

@@ -0,0 +1,291 @@
import type { Middleware } from 'redux'
import { getTimeMeasureUtils } from './utils'
type EntryProcessor = (key: string, value: any) => any
const isProduction: boolean = process.env.NODE_ENV === 'production'
const prefix: string = 'Invariant failed'
// Throw an error if the condition fails
// Strip out error messages for production
// > Not providing an inline default argument for message as the result is smaller
function invariant(condition: any, message?: string) {
if (condition) {
return
}
// Condition not passed
// In production we strip the message but still throw
if (isProduction) {
throw new Error(prefix)
}
// When not in production we allow the message to pass through
// *This block will be removed in production builds*
throw new Error(`${prefix}: ${message || ''}`)
}
function stringify(
obj: any,
serializer?: EntryProcessor,
indent?: string | number,
decycler?: EntryProcessor
): string {
return JSON.stringify(obj, getSerialize(serializer, decycler), indent)
}
function getSerialize(
serializer?: EntryProcessor,
decycler?: EntryProcessor
): EntryProcessor {
let stack: any[] = [],
keys: any[] = []
if (!decycler)
decycler = function (_: string, value: any) {
if (stack[0] === value) return '[Circular ~]'
return (
'[Circular ~.' + keys.slice(0, stack.indexOf(value)).join('.') + ']'
)
}
return function (this: any, key: string, value: any) {
if (stack.length > 0) {
var thisPos = stack.indexOf(this)
~thisPos ? stack.splice(thisPos + 1) : stack.push(this)
~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key)
if (~stack.indexOf(value)) value = decycler!.call(this, key, value)
} else stack.push(value)
return serializer == null ? value : serializer.call(this, key, value)
}
}
/**
* The default `isImmutable` function.
*
* @public
*/
export function isImmutableDefault(value: unknown): boolean {
return typeof value !== 'object' || value == null || Object.isFrozen(value)
}
export function trackForMutations(
isImmutable: IsImmutableFunc,
ignorePaths: IgnorePaths | undefined,
obj: any
) {
const trackedProperties = trackProperties(isImmutable, ignorePaths, obj)
return {
detectMutations() {
return detectMutations(isImmutable, ignorePaths, trackedProperties, obj)
},
}
}
interface TrackedProperty {
value: any
children: Record<string, any>
}
function trackProperties(
isImmutable: IsImmutableFunc,
ignorePaths: IgnorePaths = [],
obj: Record<string, any>,
path: string = '',
checkedObjects: Set<Record<string, any>> = new Set()
) {
const tracked: Partial<TrackedProperty> = { value: obj }
if (!isImmutable(obj) && !checkedObjects.has(obj)) {
checkedObjects.add(obj);
tracked.children = {}
for (const key in obj) {
const childPath = path ? path + '.' + key : key
if (ignorePaths.length && ignorePaths.indexOf(childPath) !== -1) {
continue
}
tracked.children[key] = trackProperties(
isImmutable,
ignorePaths,
obj[key],
childPath
)
}
}
return tracked as TrackedProperty
}
type IgnorePaths = readonly (string | RegExp)[]
function detectMutations(
isImmutable: IsImmutableFunc,
ignoredPaths: IgnorePaths = [],
trackedProperty: TrackedProperty,
obj: any,
sameParentRef: boolean = false,
path: string = ''
): { wasMutated: boolean; path?: string } {
const prevObj = trackedProperty ? trackedProperty.value : undefined
const sameRef = prevObj === obj
if (sameParentRef && !sameRef && !Number.isNaN(obj)) {
return { wasMutated: true, path }
}
if (isImmutable(prevObj) || isImmutable(obj)) {
return { wasMutated: false }
}
// Gather all keys from prev (tracked) and after objs
const keysToDetect: Record<string, boolean> = {}
for (let key in trackedProperty.children) {
keysToDetect[key] = true
}
for (let key in obj) {
keysToDetect[key] = true
}
const hasIgnoredPaths = ignoredPaths.length > 0
for (let key in keysToDetect) {
const nestedPath = path ? path + '.' + key : key
if (hasIgnoredPaths) {
const hasMatches = ignoredPaths.some((ignored) => {
if (ignored instanceof RegExp) {
return ignored.test(nestedPath)
}
return nestedPath === ignored
})
if (hasMatches) {
continue
}
}
const result = detectMutations(
isImmutable,
ignoredPaths,
trackedProperty.children[key],
obj[key],
sameRef,
nestedPath
)
if (result.wasMutated) {
return result
}
}
return { wasMutated: false }
}
type IsImmutableFunc = (value: any) => boolean
/**
* Options for `createImmutableStateInvariantMiddleware()`.
*
* @public
*/
export interface ImmutableStateInvariantMiddlewareOptions {
/**
Callback function to check if a value is considered to be immutable.
This function is applied recursively to every value contained in the state.
The default implementation will return true for primitive types
(like numbers, strings, booleans, null and undefined).
*/
isImmutable?: IsImmutableFunc
/**
An array of dot-separated path strings that match named nodes from
the root state to ignore when checking for immutability.
Defaults to undefined
*/
ignoredPaths?: IgnorePaths
/** Print a warning if checks take longer than N ms. Default: 32ms */
warnAfter?: number
// @deprecated. Use ignoredPaths
ignore?: string[]
}
/**
* Creates a middleware that checks whether any state was mutated in between
* dispatches or during a dispatch. If any mutations are detected, an error is
* thrown.
*
* @param options Middleware options.
*
* @public
*/
export function createImmutableStateInvariantMiddleware(
options: ImmutableStateInvariantMiddlewareOptions = {}
): Middleware {
if (process.env.NODE_ENV === 'production') {
return () => (next) => (action) => next(action)
}
let {
isImmutable = isImmutableDefault,
ignoredPaths,
warnAfter = 32,
ignore,
} = options
// Alias ignore->ignoredPaths, but prefer ignoredPaths if present
ignoredPaths = ignoredPaths || ignore
const track = trackForMutations.bind(null, isImmutable, ignoredPaths)
return ({ getState }) => {
let state = getState()
let tracker = track(state)
let result
return (next) => (action) => {
const measureUtils = getTimeMeasureUtils(
warnAfter,
'ImmutableStateInvariantMiddleware'
)
measureUtils.measureTime(() => {
state = getState()
result = tracker.detectMutations()
// Track before potentially not meeting the invariant
tracker = track(state)
invariant(
!result.wasMutated,
`A state mutation was detected between dispatches, in the path '${
result.path || ''
}'. This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`
)
})
const dispatchedAction = next(action)
measureUtils.measureTime(() => {
state = getState()
result = tracker.detectMutations()
// Track before potentially not meeting the invariant
tracker = track(state)
result.wasMutated &&
invariant(
!result.wasMutated,
`A state mutation was detected inside a dispatch, in the path: ${
result.path || ''
}. Take a look at the reducer(s) handling the action ${stringify(
action
)}. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`
)
})
measureUtils.warnIfExceeded()
return dispatchedAction
}
}
}

200
server/node_modules/@reduxjs/toolkit/src/index.ts generated vendored Normal file
View File

@@ -0,0 +1,200 @@
import { enableES5 } from 'immer'
export * from 'redux'
export {
default as createNextState,
current,
freeze,
original,
isDraft,
} from 'immer'
export type { Draft } from 'immer'
export { createSelector } from 'reselect'
export type {
Selector,
OutputParametricSelector,
OutputSelector,
ParametricSelector,
} from 'reselect'
export { createDraftSafeSelector } from './createDraftSafeSelector'
export type { ThunkAction, ThunkDispatch, ThunkMiddleware } from 'redux-thunk'
// We deliberately enable Immer's ES5 support, on the grounds that
// we assume RTK will be used with React Native and other Proxy-less
// environments. In addition, that's how Immer 4 behaved, and since
// we want to ship this in an RTK minor, we should keep the same behavior.
enableES5()
export {
// js
configureStore,
} from './configureStore'
export type {
// types
ConfigureEnhancersCallback,
ConfigureStoreOptions,
EnhancedStore,
} from './configureStore'
export type { DevToolsEnhancerOptions } from './devtoolsExtension'
export {
// js
createAction,
getType,
isAction,
isActionCreator,
isFSA as isFluxStandardAction,
} from './createAction'
export type {
// types
PayloadAction,
PayloadActionCreator,
ActionCreatorWithNonInferrablePayload,
ActionCreatorWithOptionalPayload,
ActionCreatorWithPayload,
ActionCreatorWithoutPayload,
ActionCreatorWithPreparedPayload,
PrepareAction,
} from './createAction'
export {
// js
createReducer,
} from './createReducer'
export type {
// types
Actions,
CaseReducer,
CaseReducers,
} from './createReducer'
export {
// js
createSlice,
} from './createSlice'
export type {
// types
CreateSliceOptions,
Slice,
CaseReducerActions,
SliceCaseReducers,
ValidateSliceCaseReducers,
CaseReducerWithPrepare,
SliceActionCreator,
} from './createSlice'
export type { ActionCreatorInvariantMiddlewareOptions } from './actionCreatorInvariantMiddleware'
export { createActionCreatorInvariantMiddleware } from './actionCreatorInvariantMiddleware'
export {
// js
createImmutableStateInvariantMiddleware,
isImmutableDefault,
} from './immutableStateInvariantMiddleware'
export type {
// types
ImmutableStateInvariantMiddlewareOptions,
} from './immutableStateInvariantMiddleware'
export {
// js
createSerializableStateInvariantMiddleware,
findNonSerializableValue,
isPlain,
} from './serializableStateInvariantMiddleware'
export type {
// types
SerializableStateInvariantMiddlewareOptions,
} from './serializableStateInvariantMiddleware'
export {
// js
getDefaultMiddleware,
} from './getDefaultMiddleware'
export type {
// types
ActionReducerMapBuilder,
} from './mapBuilders'
export { MiddlewareArray, EnhancerArray } from './utils'
export { createEntityAdapter } from './entities/create_adapter'
export type {
Dictionary,
EntityState,
EntityAdapter,
EntitySelectors,
EntityStateAdapter,
EntityId,
Update,
IdSelector,
Comparer,
} from './entities/models'
export {
createAsyncThunk,
unwrapResult,
miniSerializeError,
} from './createAsyncThunk'
export type {
AsyncThunk,
AsyncThunkOptions,
AsyncThunkAction,
AsyncThunkPayloadCreatorReturnValue,
AsyncThunkPayloadCreator,
SerializedError,
} from './createAsyncThunk'
export {
// js
isAllOf,
isAnyOf,
isPending,
isRejected,
isFulfilled,
isAsyncThunkAction,
isRejectedWithValue,
} from './matchers'
export type {
// types
ActionMatchingAllOf,
ActionMatchingAnyOf,
} from './matchers'
export { nanoid } from './nanoid'
export { default as isPlainObject } from './isPlainObject'
export type {
ListenerEffect,
ListenerMiddleware,
ListenerEffectAPI,
ListenerMiddlewareInstance,
CreateListenerMiddlewareOptions,
ListenerErrorHandler,
TypedStartListening,
TypedAddListener,
TypedStopListening,
TypedRemoveListener,
UnsubscribeListener,
UnsubscribeListenerOptions,
ForkedTaskExecutor,
ForkedTask,
ForkedTaskAPI,
AsyncTaskExecutor,
SyncTaskExecutor,
TaskCancelled,
TaskRejected,
TaskResolved,
TaskResult,
} from './listenerMiddleware/index'
export type { AnyListenerPredicate } from './listenerMiddleware/types'
export {
createListenerMiddleware,
addListener,
removeListener,
clearAllListeners,
TaskAbortError,
} from './listenerMiddleware/index'
export {
SHOULD_AUTOBATCH,
prepareAutoBatched,
autoBatchEnhancer,
} from './autoBatchEnhancer'
export type { AutoBatchOptions } from './autoBatchEnhancer'
export type { ExtractDispatchExtensions as TSHelpersExtractDispatchExtensions } from './tsHelpers'

View File

@@ -0,0 +1,23 @@
/**
* Returns true if the passed value is "plain" object, i.e. an object whose
* prototype is the root `Object.prototype`. This includes objects created
* using object literals, but not for instance for class instances.
*
* @param {any} value The value to inspect.
* @returns {boolean} True if the argument appears to be a plain object.
*
* @public
*/
export default function isPlainObject(value: unknown): value is object {
if (typeof value !== 'object' || value === null) return false
let proto = Object.getPrototypeOf(value)
if (proto === null) return true
let baseProto = proto
while (Object.getPrototypeOf(baseProto) !== null) {
baseProto = Object.getPrototypeOf(baseProto)
}
return proto === baseProto
}

View File

@@ -0,0 +1,20 @@
import type { SerializedError } from '@reduxjs/toolkit'
const task = 'task'
const listener = 'listener'
const completed = 'completed'
const cancelled = 'cancelled'
/* TaskAbortError error codes */
export const taskCancelled = `task-${cancelled}` as const
export const taskCompleted = `task-${completed}` as const
export const listenerCancelled = `${listener}-${cancelled}` as const
export const listenerCompleted = `${listener}-${completed}` as const
export class TaskAbortError implements SerializedError {
name = 'TaskAbortError'
message: string
constructor(public code: string | undefined) {
this.message = `${task} ${cancelled} (reason: ${code})`
}
}

View File

@@ -0,0 +1,520 @@
import type { Dispatch, AnyAction, MiddlewareAPI } from 'redux'
import type { ThunkDispatch } from 'redux-thunk'
import { createAction, isAction } from '../createAction'
import { nanoid } from '../nanoid'
import type {
ListenerMiddleware,
ListenerMiddlewareInstance,
AddListenerOverloads,
AnyListenerPredicate,
CreateListenerMiddlewareOptions,
TypedAddListener,
TypedCreateListenerEntry,
FallbackAddListenerOptions,
ListenerEntry,
ListenerErrorHandler,
UnsubscribeListener,
TakePattern,
ListenerErrorInfo,
ForkedTaskExecutor,
ForkedTask,
TypedRemoveListener,
TaskResult,
AbortSignalWithReason,
UnsubscribeListenerOptions,
ForkOptions,
} from './types'
import {
abortControllerWithReason,
addAbortSignalListener,
assertFunction,
catchRejection,
} from './utils'
import {
listenerCancelled,
listenerCompleted,
TaskAbortError,
taskCancelled,
taskCompleted,
} from './exceptions'
import {
runTask,
validateActive,
createPause,
createDelay,
raceWithSignal,
} from './task'
export { TaskAbortError } from './exceptions'
export type {
ListenerEffect,
ListenerMiddleware,
ListenerEffectAPI,
ListenerMiddlewareInstance,
CreateListenerMiddlewareOptions,
ListenerErrorHandler,
TypedStartListening,
TypedAddListener,
TypedStopListening,
TypedRemoveListener,
UnsubscribeListener,
UnsubscribeListenerOptions,
ForkedTaskExecutor,
ForkedTask,
ForkedTaskAPI,
AsyncTaskExecutor,
SyncTaskExecutor,
TaskCancelled,
TaskRejected,
TaskResolved,
TaskResult,
} from './types'
//Overly-aggressive byte-shaving
const { assign } = Object
/**
* @internal
*/
const INTERNAL_NIL_TOKEN = {} as const
const alm = 'listenerMiddleware' as const
const createFork = (
parentAbortSignal: AbortSignalWithReason<unknown>,
parentBlockingPromises: Promise<any>[]
) => {
const linkControllers = (controller: AbortController) =>
addAbortSignalListener(parentAbortSignal, () =>
abortControllerWithReason(controller, parentAbortSignal.reason)
)
return <T>(
taskExecutor: ForkedTaskExecutor<T>,
opts?: ForkOptions
): ForkedTask<T> => {
assertFunction(taskExecutor, 'taskExecutor')
const childAbortController = new AbortController()
linkControllers(childAbortController)
const result = runTask<T>(
async (): Promise<T> => {
validateActive(parentAbortSignal)
validateActive(childAbortController.signal)
const result = (await taskExecutor({
pause: createPause(childAbortController.signal),
delay: createDelay(childAbortController.signal),
signal: childAbortController.signal,
})) as T
validateActive(childAbortController.signal)
return result
},
() => abortControllerWithReason(childAbortController, taskCompleted)
)
if (opts?.autoJoin) {
parentBlockingPromises.push(result)
}
return {
result: createPause<TaskResult<T>>(parentAbortSignal)(result),
cancel() {
abortControllerWithReason(childAbortController, taskCancelled)
},
}
}
}
const createTakePattern = <S>(
startListening: AddListenerOverloads<
UnsubscribeListener,
S,
Dispatch<AnyAction>
>,
signal: AbortSignal
): TakePattern<S> => {
/**
* A function that takes a ListenerPredicate and an optional timeout,
* and resolves when either the predicate returns `true` based on an action
* state combination or when the timeout expires.
* If the parent listener is canceled while waiting, this will throw a
* TaskAbortError.
*/
const take = async <P extends AnyListenerPredicate<S>>(
predicate: P,
timeout: number | undefined
) => {
validateActive(signal)
// Placeholder unsubscribe function until the listener is added
let unsubscribe: UnsubscribeListener = () => {}
const tuplePromise = new Promise<[AnyAction, S, S]>((resolve, reject) => {
// Inside the Promise, we synchronously add the listener.
let stopListening = startListening({
predicate: predicate as any,
effect: (action, listenerApi): void => {
// One-shot listener that cleans up as soon as the predicate passes
listenerApi.unsubscribe()
// Resolve the promise with the same arguments the predicate saw
resolve([
action,
listenerApi.getState(),
listenerApi.getOriginalState(),
])
},
})
unsubscribe = () => {
stopListening()
reject()
}
})
const promises: (Promise<null> | Promise<[AnyAction, S, S]>)[] = [
tuplePromise,
]
if (timeout != null) {
promises.push(
new Promise<null>((resolve) => setTimeout(resolve, timeout, null))
)
}
try {
const output = await raceWithSignal(signal, Promise.race(promises))
validateActive(signal)
return output
} finally {
// Always clean up the listener
unsubscribe()
}
}
return ((predicate: AnyListenerPredicate<S>, timeout: number | undefined) =>
catchRejection(take(predicate, timeout))) as TakePattern<S>
}
const getListenerEntryPropsFrom = (options: FallbackAddListenerOptions) => {
let { type, actionCreator, matcher, predicate, effect } = options
if (type) {
predicate = createAction(type).match
} else if (actionCreator) {
type = actionCreator!.type
predicate = actionCreator.match
} else if (matcher) {
predicate = matcher
} else if (predicate) {
// pass
} else {
throw new Error(
'Creating or removing a listener requires one of the known fields for matching an action'
)
}
assertFunction(effect, 'options.listener')
return { predicate, type, effect }
}
/** Accepts the possible options for creating a listener, and returns a formatted listener entry */
export const createListenerEntry: TypedCreateListenerEntry<unknown> = (
options: FallbackAddListenerOptions
) => {
const { type, predicate, effect } = getListenerEntryPropsFrom(options)
const id = nanoid()
const entry: ListenerEntry<unknown> = {
id,
effect,
type,
predicate,
pending: new Set<AbortController>(),
unsubscribe: () => {
throw new Error('Unsubscribe not initialized')
},
}
return entry
}
const cancelActiveListeners = (
entry: ListenerEntry<unknown, Dispatch<AnyAction>>
) => {
entry.pending.forEach((controller) => {
abortControllerWithReason(controller, listenerCancelled)
})
}
const createClearListenerMiddleware = (
listenerMap: Map<string, ListenerEntry>
) => {
return () => {
listenerMap.forEach(cancelActiveListeners)
listenerMap.clear()
}
}
/**
* Safely reports errors to the `errorHandler` provided.
* Errors that occur inside `errorHandler` are notified in a new task.
* Inspired by [rxjs reportUnhandledError](https://github.com/ReactiveX/rxjs/blob/6fafcf53dc9e557439b25debaeadfd224b245a66/src/internal/util/reportUnhandledError.ts)
* @param errorHandler
* @param errorToNotify
*/
const safelyNotifyError = (
errorHandler: ListenerErrorHandler,
errorToNotify: unknown,
errorInfo: ListenerErrorInfo
): void => {
try {
errorHandler(errorToNotify, errorInfo)
} catch (errorHandlerError) {
// We cannot let an error raised here block the listener queue.
// The error raised here will be picked up by `window.onerror`, `process.on('error')` etc...
setTimeout(() => {
throw errorHandlerError
}, 0)
}
}
/**
* @public
*/
export const addListener = createAction(
`${alm}/add`
) as TypedAddListener<unknown>
/**
* @public
*/
export const clearAllListeners = createAction(`${alm}/removeAll`)
/**
* @public
*/
export const removeListener = createAction(
`${alm}/remove`
) as TypedRemoveListener<unknown>
const defaultErrorHandler: ListenerErrorHandler = (...args: unknown[]) => {
console.error(`${alm}/error`, ...args)
}
/**
* @public
*/
export function createListenerMiddleware<
S = unknown,
D extends Dispatch<AnyAction> = ThunkDispatch<S, unknown, AnyAction>,
ExtraArgument = unknown
>(middlewareOptions: CreateListenerMiddlewareOptions<ExtraArgument> = {}) {
const listenerMap = new Map<string, ListenerEntry>()
const { extra, onError = defaultErrorHandler } = middlewareOptions
assertFunction(onError, 'onError')
const insertEntry = (entry: ListenerEntry) => {
entry.unsubscribe = () => listenerMap.delete(entry!.id)
listenerMap.set(entry.id, entry)
return (cancelOptions?: UnsubscribeListenerOptions) => {
entry.unsubscribe()
if (cancelOptions?.cancelActive) {
cancelActiveListeners(entry)
}
}
}
const findListenerEntry = (
comparator: (entry: ListenerEntry) => boolean
): ListenerEntry | undefined => {
for (const entry of Array.from(listenerMap.values())) {
if (comparator(entry)) {
return entry
}
}
return undefined
}
const startListening = (options: FallbackAddListenerOptions) => {
let entry = findListenerEntry(
(existingEntry) => existingEntry.effect === options.effect
)
if (!entry) {
entry = createListenerEntry(options as any)
}
return insertEntry(entry)
}
const stopListening = (
options: FallbackAddListenerOptions & UnsubscribeListenerOptions
): boolean => {
const { type, effect, predicate } = getListenerEntryPropsFrom(options)
const entry = findListenerEntry((entry) => {
const matchPredicateOrType =
typeof type === 'string'
? entry.type === type
: entry.predicate === predicate
return matchPredicateOrType && entry.effect === effect
})
if (entry) {
entry.unsubscribe()
if (options.cancelActive) {
cancelActiveListeners(entry)
}
}
return !!entry
}
const notifyListener = async (
entry: ListenerEntry<unknown, Dispatch<AnyAction>>,
action: AnyAction,
api: MiddlewareAPI,
getOriginalState: () => S
) => {
const internalTaskController = new AbortController()
const take = createTakePattern(
startListening,
internalTaskController.signal
)
const autoJoinPromises: Promise<any>[] = []
try {
entry.pending.add(internalTaskController)
await Promise.resolve(
entry.effect(
action,
// Use assign() rather than ... to avoid extra helper functions added to bundle
assign({}, api, {
getOriginalState,
condition: (
predicate: AnyListenerPredicate<any>,
timeout?: number
) => take(predicate, timeout).then(Boolean),
take,
delay: createDelay(internalTaskController.signal),
pause: createPause<any>(internalTaskController.signal),
extra,
signal: internalTaskController.signal,
fork: createFork(internalTaskController.signal, autoJoinPromises),
unsubscribe: entry.unsubscribe,
subscribe: () => {
listenerMap.set(entry.id, entry)
},
cancelActiveListeners: () => {
entry.pending.forEach((controller, _, set) => {
if (controller !== internalTaskController) {
abortControllerWithReason(controller, listenerCancelled)
set.delete(controller)
}
})
},
})
)
)
} catch (listenerError) {
if (!(listenerError instanceof TaskAbortError)) {
safelyNotifyError(onError, listenerError, {
raisedBy: 'effect',
})
}
} finally {
await Promise.allSettled(autoJoinPromises)
abortControllerWithReason(internalTaskController, listenerCompleted) // Notify that the task has completed
entry.pending.delete(internalTaskController)
}
}
const clearListenerMiddleware = createClearListenerMiddleware(listenerMap)
const middleware: ListenerMiddleware<S, D, ExtraArgument> =
(api) => (next) => (action) => {
if (!isAction(action)) {
// we only want to notify listeners for action objects
return next(action)
}
if (addListener.match(action)) {
return startListening(action.payload)
}
if (clearAllListeners.match(action)) {
clearListenerMiddleware()
return
}
if (removeListener.match(action)) {
return stopListening(action.payload)
}
// Need to get this state _before_ the reducer processes the action
let originalState: S | typeof INTERNAL_NIL_TOKEN = api.getState()
// `getOriginalState` can only be called synchronously.
// @see https://github.com/reduxjs/redux-toolkit/discussions/1648#discussioncomment-1932820
const getOriginalState = (): S => {
if (originalState === INTERNAL_NIL_TOKEN) {
throw new Error(
`${alm}: getOriginalState can only be called synchronously`
)
}
return originalState as S
}
let result: unknown
try {
// Actually forward the action to the reducer before we handle listeners
result = next(action)
if (listenerMap.size > 0) {
let currentState = api.getState()
// Work around ESBuild+TS transpilation issue
const listenerEntries = Array.from(listenerMap.values())
for (let entry of listenerEntries) {
let runListener = false
try {
runListener = entry.predicate(action, currentState, originalState)
} catch (predicateError) {
runListener = false
safelyNotifyError(onError, predicateError, {
raisedBy: 'predicate',
})
}
if (!runListener) {
continue
}
notifyListener(entry, action, api, getOriginalState)
}
}
} finally {
// Remove `originalState` store from this scope.
originalState = INTERNAL_NIL_TOKEN
}
return result
}
return {
middleware,
startListening,
stopListening,
clearListeners: clearListenerMiddleware,
} as ListenerMiddlewareInstance<S, D, ExtraArgument>
}

View File

@@ -0,0 +1,100 @@
import { TaskAbortError } from './exceptions'
import type { AbortSignalWithReason, TaskResult } from './types'
import { addAbortSignalListener, catchRejection, noop } from './utils'
/**
* Synchronously raises {@link TaskAbortError} if the task tied to the input `signal` has been cancelled.
* @param signal
* @param reason
* @see {TaskAbortError}
*/
export const validateActive = (signal: AbortSignal): void => {
if (signal.aborted) {
throw new TaskAbortError((signal as AbortSignalWithReason<string>).reason)
}
}
/**
* Generates a race between the promise(s) and the AbortSignal
* This avoids `Promise.race()`-related memory leaks:
* https://github.com/nodejs/node/issues/17469#issuecomment-349794909
*/
export function raceWithSignal<T>(
signal: AbortSignalWithReason<string>,
promise: Promise<T>
): Promise<T> {
let cleanup = noop
return new Promise<T>((resolve, reject) => {
const notifyRejection = () => reject(new TaskAbortError(signal.reason))
if (signal.aborted) {
notifyRejection()
return
}
cleanup = addAbortSignalListener(signal, notifyRejection)
promise.finally(() => cleanup()).then(resolve, reject)
}).finally(() => {
// after this point, replace `cleanup` with a noop, so there is no reference to `signal` any more
cleanup = noop
})
}
/**
* Runs a task and returns promise that resolves to {@link TaskResult}.
* Second argument is an optional `cleanUp` function that always runs after task.
*
* **Note:** `runTask` runs the executor in the next microtask.
* @returns
*/
export const runTask = async <T>(
task: () => Promise<T>,
cleanUp?: () => void
): Promise<TaskResult<T>> => {
try {
await Promise.resolve()
const value = await task()
return {
status: 'ok',
value,
}
} catch (error: any) {
return {
status: error instanceof TaskAbortError ? 'cancelled' : 'rejected',
error,
}
} finally {
cleanUp?.()
}
}
/**
* Given an input `AbortSignal` and a promise returns another promise that resolves
* as soon the input promise is provided or rejects as soon as
* `AbortSignal.abort` is `true`.
* @param signal
* @returns
*/
export const createPause = <T>(signal: AbortSignal) => {
return (promise: Promise<T>): Promise<T> => {
return catchRejection(
raceWithSignal(signal, promise).then((output) => {
validateActive(signal)
return output
})
)
}
}
/**
* Given an input `AbortSignal` and `timeoutMs` returns a promise that resolves
* after `timeoutMs` or rejects as soon as `AbortSignal.abort` is `true`.
* @param signal
* @returns
*/
export const createDelay = (signal: AbortSignal) => {
const pause = createPause<void>(signal)
return (timeoutMs: number): Promise<void> => {
return pause(new Promise<void>((resolve) => setTimeout(resolve, timeoutMs)))
}
}

View File

@@ -0,0 +1,364 @@
import {
configureStore,
createAction,
createSlice,
isAnyOf,
} from '@reduxjs/toolkit'
import type { AnyAction, PayloadAction, Action } from '@reduxjs/toolkit'
import { createListenerMiddleware, TaskAbortError } from '../index'
import type { TypedAddListener } from '../index'
describe('Saga-style Effects Scenarios', () => {
interface CounterState {
value: number
}
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 } as CounterState,
reducers: {
increment(state) {
state.value += 1
},
decrement(state) {
state.value -= 1
},
// Use the PayloadAction type to declare the contents of `action.payload`
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
const { increment, decrement, incrementByAmount } = counterSlice.actions
let { reducer } = counterSlice
let listenerMiddleware = createListenerMiddleware<CounterState>()
let { middleware, startListening, stopListening } = listenerMiddleware
let store = configureStore({
reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
const testAction1 = createAction<string>('testAction1')
type TestAction1 = ReturnType<typeof testAction1>
const testAction2 = createAction<string>('testAction2')
type TestAction2 = ReturnType<typeof testAction2>
const testAction3 = createAction<string>('testAction3')
type TestAction3 = ReturnType<typeof testAction3>
type RootState = ReturnType<typeof store.getState>
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
beforeAll(() => {
const noop = () => {}
jest.spyOn(console, 'error').mockImplementation(noop)
})
beforeEach(() => {
listenerMiddleware = createListenerMiddleware<CounterState>()
middleware = listenerMiddleware.middleware
startListening = listenerMiddleware.startListening
store = configureStore({
reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
})
test('throttle', async () => {
// Ignore incoming actions for a given period of time while processing a task.
// Ref: https://redux-saga.js.org/docs/api#throttlems-pattern-saga-args
let listenerCalls = 0
let workPerformed = 0
startListening({
actionCreator: increment,
effect: (action, listenerApi) => {
listenerCalls++
// Stop listening until further notice
listenerApi.unsubscribe()
// Queue to start listening again after a delay
setTimeout(listenerApi.subscribe, 15)
workPerformed++
},
})
// Dispatch 3 actions. First triggers listener, next two ignored.
store.dispatch(increment())
store.dispatch(increment())
store.dispatch(increment())
// Wait for resubscription
await delay(25)
// Dispatch 2 more actions, first triggers, second ignored
store.dispatch(increment())
store.dispatch(increment())
// Wait for work
await delay(5)
// Both listener calls completed
expect(listenerCalls).toBe(2)
expect(workPerformed).toBe(2)
})
test('debounce / takeLatest', async () => {
// Repeated calls cancel previous ones, no work performed
// until the specified delay elapses without another call
// NOTE: This is also basically identical to `takeLatest`.
// Ref: https://redux-saga.js.org/docs/api#debouncems-pattern-saga-args
// Ref: https://redux-saga.js.org/docs/api#takelatestpattern-saga-args
let listenerCalls = 0
let workPerformed = 0
startListening({
actionCreator: increment,
effect: async (action, listenerApi) => {
listenerCalls++
// Cancel any in-progress instances of this listener
listenerApi.cancelActiveListeners()
// Delay before starting actual work
await listenerApi.delay(15)
workPerformed++
},
})
// First action, listener 1 starts, nothing to cancel
store.dispatch(increment())
// Second action, listener 2 starts, cancels 1
store.dispatch(increment())
// Third action, listener 3 starts, cancels 2
store.dispatch(increment())
// 3 listeners started, third is still paused
expect(listenerCalls).toBe(3)
expect(workPerformed).toBe(0)
await delay(25)
// All 3 started
expect(listenerCalls).toBe(3)
// First two canceled, `delay()` threw JobCanceled and skipped work.
// Third actually completed.
expect(workPerformed).toBe(1)
})
test('takeEvery', async () => {
// Runs the listener on every action match
// Ref: https://redux-saga.js.org/docs/api#takeeverypattern-saga-args
// NOTE: This is already the default behavior - nothing special here!
let listenerCalls = 0
startListening({
actionCreator: increment,
effect: (action, listenerApi) => {
listenerCalls++
},
})
store.dispatch(increment())
expect(listenerCalls).toBe(1)
store.dispatch(increment())
expect(listenerCalls).toBe(2)
})
test('takeLeading', async () => {
// Starts listener on first action, ignores others until task completes
// Ref: https://redux-saga.js.org/docs/api#takeleadingpattern-saga-args
let listenerCalls = 0
let workPerformed = 0
startListening({
actionCreator: increment,
effect: async (action, listenerApi) => {
listenerCalls++
// Stop listening for this action
listenerApi.unsubscribe()
// Pretend we're doing expensive work
await listenerApi.delay(25)
workPerformed++
// Re-enable the listener
listenerApi.subscribe()
},
})
// First action starts the listener, which unsubscribes
store.dispatch(increment())
// Second action is ignored
store.dispatch(increment())
// One instance in progress, but not complete
expect(listenerCalls).toBe(1)
expect(workPerformed).toBe(0)
await delay(5)
// In-progress listener not done yet
store.dispatch(increment())
// No changes in status
expect(listenerCalls).toBe(1)
expect(workPerformed).toBe(0)
await delay(50)
// Work finished, should have resubscribed
expect(workPerformed).toBe(1)
// Listener is re-subscribed, will trigger again
store.dispatch(increment())
expect(listenerCalls).toBe(2)
expect(workPerformed).toBe(1)
await delay(50)
expect(workPerformed).toBe(2)
})
test('fork + join', async () => {
// fork starts a child job, join waits for the child to complete and return a value
// Ref: https://redux-saga.js.org/docs/api#forkfn-args
// Ref: https://redux-saga.js.org/docs/api#jointask
let childResult = 0
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
const childOutput = 42
// Spawn a child job and start it immediately
const result = await listenerApi.fork(async () => {
// Artificially wait a bit inside the child
await listenerApi.delay(5)
// Complete the child by returning an Outcome-wrapped value
return childOutput
}).result
// Unwrap the child result in the listener
if (result.status === 'ok') {
childResult = result.value
}
},
})
store.dispatch(increment())
await delay(10)
expect(childResult).toBe(42)
})
test('fork + cancel', async () => {
// fork starts a child job, cancel will raise an exception if the
// child is paused in the middle of an effect
// Ref: https://redux-saga.js.org/docs/api#forkfn-args
let childResult = 0
let listenerCompleted = false
startListening({
actionCreator: increment,
effect: async (action, listenerApi) => {
// Spawn a child job and start it immediately
const forkedTask = listenerApi.fork(async () => {
// Artificially wait a bit inside the child
await listenerApi.delay(15)
// Complete the child by returning an Outcome-wrapped value
childResult = 42
return 0
})
await listenerApi.delay(5)
forkedTask.cancel()
listenerCompleted = true
},
})
// Starts listener, which starts child
store.dispatch(increment())
// Wait for child to have maybe completed
await delay(20)
// Listener finished, but the child was canceled and threw an exception, so it never finished
expect(listenerCompleted).toBe(true)
expect(childResult).toBe(0)
})
test('canceled', async () => {
// canceled allows checking if the current task was canceled
// Ref: https://redux-saga.js.org/docs/api#cancelled
let canceledAndCaught = false
let canceledCheck = false
startListening({
matcher: isAnyOf(increment, decrement, incrementByAmount),
effect: async (action, listenerApi) => {
if (increment.match(action)) {
// Have this branch wait around to be canceled by the other
try {
await listenerApi.delay(10)
} catch (err) {
// Can check cancelation based on the exception and its reason
if (err instanceof TaskAbortError) {
canceledAndCaught = true
}
}
} else if (incrementByAmount.match(action)) {
// do a non-cancelation-aware wait
await delay(15)
if (listenerApi.signal.aborted) {
canceledCheck = true
}
} else if (decrement.match(action)) {
listenerApi.cancelActiveListeners()
}
},
})
// Start first branch
store.dispatch(increment())
// Cancel first listener
store.dispatch(decrement())
// Have to wait for the delay to resolve
// TODO Can we make ``Job.delay()` be a race?
await delay(15)
expect(canceledAndCaught).toBe(true)
// Start second branch
store.dispatch(incrementByAmount(42))
// Cancel second listener, although it won't know about that until later
store.dispatch(decrement())
expect(canceledCheck).toBe(false)
await delay(20)
expect(canceledCheck).toBe(true)
})
})

View File

@@ -0,0 +1,530 @@
import type { EnhancedStore } from '@reduxjs/toolkit'
import { configureStore, createSlice, createAction } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import type {
AbortSignalWithReason,
ForkedTaskExecutor,
TaskResult,
} from '../types'
import { createListenerMiddleware, TaskAbortError } from '../index'
import {
listenerCancelled,
listenerCompleted,
taskCancelled,
taskCompleted,
} from '../exceptions'
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
// @see https://deno.land/std@0.95.0/async/deferred.ts (MIT)
export interface Deferred<T> extends Promise<T> {
resolve(value?: T | PromiseLike<T>): void
reject(reason?: any): void
}
/** Creates a Promise with the `reject` and `resolve` functions
* placed as methods on the promise object itself. It allows you to do:
*
* const p = deferred<number>();
* // ...
* p.resolve(42);
*/
export function deferred<T>(): Deferred<T> {
let methods
const promise = new Promise<T>((resolve, reject): void => {
methods = { resolve, reject }
})
return Object.assign(promise, methods) as Deferred<T>
}
interface CounterSlice {
value: number
}
describe('fork', () => {
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 } as CounterSlice,
reducers: {
increment(state) {
state.value += 1
},
decrement(state) {
state.value -= 1
},
// Use the PayloadAction type to declare the contents of `action.payload`
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
const { increment, decrement, incrementByAmount } = counterSlice.actions
let listenerMiddleware = createListenerMiddleware()
let { middleware, startListening, stopListening } = listenerMiddleware
let store = configureStore({
reducer: counterSlice.reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
beforeEach(() => {
listenerMiddleware = createListenerMiddleware()
middleware = listenerMiddleware.middleware
startListening = listenerMiddleware.startListening
stopListening = listenerMiddleware.stopListening
store = configureStore({
reducer: counterSlice.reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
})
it('runs executors in the next microtask', async () => {
let hasRunSyncExector = false
let hasRunAsyncExecutor = false
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
listenerApi.fork(() => {
hasRunSyncExector = true
})
listenerApi.fork(async () => {
hasRunAsyncExecutor = true
})
},
})
store.dispatch(increment())
expect(hasRunSyncExector).toBe(false)
expect(hasRunAsyncExecutor).toBe(false)
await Promise.resolve()
expect(hasRunSyncExector).toBe(true)
expect(hasRunAsyncExecutor).toBe(true)
})
test('forkedTask.result rejects TaskAbortError if listener is cancelled', async () => {
const deferredForkedTaskError = deferred()
startListening({
actionCreator: increment,
async effect(_, listenerApi) {
listenerApi.cancelActiveListeners()
listenerApi
.fork(async () => {
await delay(10)
throw new Error('unreachable code')
})
.result.then(
deferredForkedTaskError.resolve,
deferredForkedTaskError.resolve
)
},
})
store.dispatch(increment())
store.dispatch(increment())
expect(await deferredForkedTaskError).toEqual(
new TaskAbortError(listenerCancelled)
)
})
it('synchronously throws TypeError error if the provided executor is not a function', () => {
const invalidExecutors = [null, {}, undefined, 1]
startListening({
predicate: () => true,
effect: async (_, listenerApi) => {
invalidExecutors.forEach((invalidExecutor) => {
let caughtError
try {
listenerApi.fork(invalidExecutor as any)
} catch (err) {
caughtError = err
}
expect(caughtError).toBeInstanceOf(TypeError)
})
},
})
store.dispatch(increment())
expect.assertions(invalidExecutors.length)
})
it('does not run an executor if the task is synchronously cancelled', async () => {
const storeStateAfter = deferred()
startListening({
actionCreator: increment,
effect: async (action, listenerApi) => {
const forkedTask = listenerApi.fork(() => {
listenerApi.dispatch(decrement())
listenerApi.dispatch(decrement())
listenerApi.dispatch(decrement())
})
forkedTask.cancel()
const result = await forkedTask.result
storeStateAfter.resolve(listenerApi.getState())
},
})
store.dispatch(increment())
expect(storeStateAfter).resolves.toEqual({ value: 1 })
})
it.each<{
desc: string
executor: ForkedTaskExecutor<any>
cancelAfterMs?: number
expected: TaskResult<any>
}>([
{
desc: 'sync exec - success',
executor: () => 42,
expected: { status: 'ok', value: 42 },
},
{
desc: 'sync exec - error',
executor: () => {
throw new Error('2020')
},
expected: { status: 'rejected', error: new Error('2020') },
},
{
desc: 'sync exec - sync cancel',
executor: () => 42,
cancelAfterMs: -1,
expected: {
status: 'cancelled',
error: new TaskAbortError(taskCancelled),
},
},
{
desc: 'sync exec - async cancel',
executor: () => 42,
cancelAfterMs: 0,
expected: { status: 'ok', value: 42 },
},
{
desc: 'async exec - async cancel',
executor: async (forkApi) => {
await forkApi.delay(100)
throw new Error('2020')
},
cancelAfterMs: 10,
expected: {
status: 'cancelled',
error: new TaskAbortError(taskCancelled),
},
},
{
desc: 'async exec - success',
executor: async () => {
await delay(20)
return Promise.resolve(21)
},
expected: { status: 'ok', value: 21 },
},
{
desc: 'async exec - error',
executor: async () => {
await Promise.resolve()
throw new Error('2020')
},
expected: { status: 'rejected', error: new Error('2020') },
},
{
desc: 'async exec - success with forkApi.pause',
executor: async (forkApi) => {
return forkApi.pause(Promise.resolve(2))
},
expected: { status: 'ok', value: 2 },
},
{
desc: 'async exec - error with forkApi.pause',
executor: async (forkApi) => {
return forkApi.pause(Promise.reject(22))
},
expected: { status: 'rejected', error: 22 },
},
{
desc: 'async exec - success with forkApi.delay',
executor: async (forkApi) => {
await forkApi.delay(10)
return 5
},
expected: { status: 'ok', value: 5 },
},
])('%# - %j', async ({ executor, expected, cancelAfterMs }) => {
let deferredResult = deferred()
let forkedTask: any = {}
startListening({
predicate: () => true,
effect: async (_, listenerApi) => {
forkedTask = listenerApi.fork(executor)
deferredResult.resolve(await forkedTask.result)
},
})
store.dispatch({ type: '' })
if (typeof cancelAfterMs === 'number') {
if (cancelAfterMs < 0) {
forkedTask.cancel()
} else {
await delay(cancelAfterMs)
forkedTask.cancel()
}
}
const result = await deferredResult
expect(result).toEqual(expected)
})
describe('forkAPI', () => {
test('forkApi.delay rejects as soon as the task is cancelled', async () => {
let deferredResult = deferred()
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
const forkedTask = listenerApi.fork(async (forkApi) => {
await forkApi.delay(100)
return 4
})
await listenerApi.delay(10)
forkedTask.cancel()
deferredResult.resolve(await forkedTask.result)
},
})
store.dispatch(increment())
expect(await deferredResult).toEqual({
status: 'cancelled',
error: new TaskAbortError(taskCancelled),
})
})
test('forkApi.delay rejects as soon as the parent listener is cancelled', async () => {
let deferredResult = deferred()
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
listenerApi.cancelActiveListeners()
await listenerApi.fork(async (forkApi) => {
await forkApi
.delay(100)
.then(deferredResult.resolve, deferredResult.resolve)
return 4
}).result
deferredResult.resolve(new Error('unreachable'))
},
})
store.dispatch(increment())
await Promise.resolve()
store.dispatch(increment())
expect(await deferredResult).toEqual(
new TaskAbortError(listenerCancelled)
)
})
it.each([
{
autoJoin: true,
expectedAbortReason: taskCompleted,
cancelListener: false,
},
{
autoJoin: false,
expectedAbortReason: listenerCompleted,
cancelListener: false,
},
{
autoJoin: true,
expectedAbortReason: listenerCancelled,
cancelListener: true,
},
{
autoJoin: false,
expectedAbortReason: listenerCancelled,
cancelListener: true,
},
])(
'signal is $expectedAbortReason when autoJoin: $autoJoin, cancelListener: $cancelListener',
async ({ autoJoin, cancelListener, expectedAbortReason }) => {
let deferredResult = deferred()
const unsubscribe = startListening({
actionCreator: increment,
async effect(_, listenerApi) {
listenerApi.fork(
async (forkApi) => {
forkApi.signal.addEventListener('abort', () => {
deferredResult.resolve(
(forkApi.signal as AbortSignalWithReason<unknown>).reason
)
})
await forkApi.delay(10)
},
{ autoJoin }
)
},
})
store.dispatch(increment())
// let task start
await Promise.resolve()
if (cancelListener) unsubscribe({ cancelActive: true })
expect(await deferredResult).toBe(expectedAbortReason)
}
)
test('fork.delay does not trigger unhandledRejections for completed or cancelled tasks', async () => {
let deferredCompletedEvt = deferred()
let deferredCancelledEvt = deferred()
// Unfortunately we cannot test declaratively unhandleRejections in jest: https://github.com/facebook/jest/issues/5620
// This test just fails if an `unhandledRejection` occurs.
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
const completedTask = listenerApi.fork(async (forkApi) => {
forkApi.signal.addEventListener(
'abort',
deferredCompletedEvt.resolve,
{ once: true }
)
forkApi.delay(100) // missing await
return 4
})
deferredCompletedEvt.resolve(await completedTask.result)
const godotPauseTrigger = deferred()
const cancelledTask = listenerApi.fork(async (forkApi) => {
forkApi.signal.addEventListener(
'abort',
deferredCompletedEvt.resolve,
{ once: true }
)
forkApi.delay(1_000) // missing await
await forkApi.pause(godotPauseTrigger)
return 4
})
await Promise.resolve()
cancelledTask.cancel()
deferredCancelledEvt.resolve(await cancelledTask.result)
},
})
store.dispatch(increment())
expect(await deferredCompletedEvt).toBeDefined()
expect(await deferredCancelledEvt).toBeDefined()
})
})
test('forkApi.pause rejects if task is cancelled', async () => {
let deferredResult = deferred()
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
const forkedTask = listenerApi.fork(async (forkApi) => {
await forkApi.pause(delay(1_000))
return 4
})
await Promise.resolve()
forkedTask.cancel()
deferredResult.resolve(await forkedTask.result)
},
})
store.dispatch(increment())
expect(await deferredResult).toEqual({
status: 'cancelled',
error: new TaskAbortError(taskCancelled),
})
})
test('forkApi.pause rejects as soon as the parent listener is cancelled', async () => {
let deferredResult = deferred()
startListening({
actionCreator: increment,
effect: async (_, listenerApi) => {
listenerApi.cancelActiveListeners()
const forkedTask = listenerApi.fork(async (forkApi) => {
await forkApi
.pause(delay(100))
.then(deferredResult.resolve, deferredResult.resolve)
return 4
})
await forkedTask.result
deferredResult.resolve(new Error('unreachable'))
},
})
store.dispatch(increment())
await Promise.resolve()
store.dispatch(increment())
expect(await deferredResult).toEqual(new TaskAbortError(listenerCancelled))
})
test('forkApi.pause rejects if listener is cancelled', async () => {
const incrementByInListener = createAction<number>('incrementByInListener')
startListening({
actionCreator: incrementByInListener,
async effect({ payload: amountToIncrement }, listenerApi) {
listenerApi.cancelActiveListeners()
await listenerApi.fork(async (forkApi) => {
await forkApi.pause(delay(10))
listenerApi.dispatch(incrementByAmount(amountToIncrement))
}).result
listenerApi.dispatch(incrementByAmount(2 * amountToIncrement))
},
})
store.dispatch(incrementByInListener(10))
store.dispatch(incrementByInListener(100))
await delay(50)
expect(store.getState().value).toEqual(300)
})
})

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,175 @@
import {
configureStore,
createAction,
createSlice,
isAnyOf,
} from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import { createListenerMiddleware } from '../index'
import type { TypedAddListener } from '../index'
import { TaskAbortError } from '../exceptions'
interface CounterState {
value: number
}
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 } as CounterState,
reducers: {
increment(state) {
state.value += 1
},
decrement(state) {
state.value -= 1
},
// Use the PayloadAction type to declare the contents of `action.payload`
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
const { increment, decrement, incrementByAmount } = counterSlice.actions
describe('Saga-style Effects Scenarios', () => {
let listenerMiddleware = createListenerMiddleware<CounterState>()
let { middleware, startListening, stopListening } = listenerMiddleware
let store = configureStore({
reducer: counterSlice.reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
const testAction1 = createAction<string>('testAction1')
type TestAction1 = ReturnType<typeof testAction1>
const testAction2 = createAction<string>('testAction2')
type TestAction2 = ReturnType<typeof testAction2>
const testAction3 = createAction<string>('testAction3')
type TestAction3 = ReturnType<typeof testAction3>
type RootState = ReturnType<typeof store.getState>
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
beforeEach(() => {
listenerMiddleware = createListenerMiddleware<CounterState>()
middleware = listenerMiddleware.middleware
startListening = listenerMiddleware.startListening
store = configureStore({
reducer: counterSlice.reducer,
middleware: (gDM) => gDM().prepend(middleware),
})
})
test('Long polling loop', async () => {
// Reimplementation of a saga-based long-polling loop that is controlled
// by "start/stop" actions. The infinite loop waits for a message from the
// server, processes it somehow, and waits for the next message.
// Ref: https://gist.github.com/markerikson/5203e71a69fa9dff203c9e27c3d84154
const eventPollingStarted = createAction('serverPolling/started')
const eventPollingStopped = createAction('serverPolling/stopped')
// For this example, we're going to fake up a "server event poll" async
// function by wrapping an event emitter so that every call returns a
// promise that is resolved the next time an event is emitted.
// This is the tiniest event emitter I could find to copy-paste in here.
let createNanoEvents = () => ({
events: {} as Record<string, any>,
emit(event: string, ...args: any[]) {
;(this.events[event] || []).forEach((i: any) => i(...args))
},
on(event: string, cb: (...args: any[]) => void) {
;(this.events[event] = this.events[event] || []).push(cb)
return () =>
(this.events[event] = (this.events[event] || []).filter(
(l: any) => l !== cb
))
},
})
const emitter = createNanoEvents()
// Rig up a dummy "receive a message from the server" API we can trigger manually
function pollForEvent() {
return new Promise<{ type: string }>((resolve, reject) => {
const unsubscribe = emitter.on('serverEvent', (arg1: string) => {
unsubscribe()
resolve({ type: arg1 })
})
})
}
// Track how many times each message was processed by the loop
const receivedMessages = {
a: 0,
b: 0,
c: 0,
}
let pollingTaskStarted = false
let pollingTaskCanceled = false
startListening({
actionCreator: eventPollingStarted,
effect: async (action, listenerApi) => {
listenerApi.unsubscribe()
// Start a child job that will infinitely loop receiving messages
const pollingTask = listenerApi.fork(async (forkApi) => {
pollingTaskStarted = true
try {
while (true) {
// Cancelation-aware pause for a new server message
const serverEvent = await forkApi.pause(pollForEvent())
// Process the message. In this case, just count the times we've seen this message.
if (serverEvent.type in receivedMessages) {
receivedMessages[
serverEvent.type as keyof typeof receivedMessages
]++
}
}
} catch (err) {
if (err instanceof TaskAbortError) {
pollingTaskCanceled = true
}
}
return 0
})
// Wait for the "stop polling" action
await listenerApi.condition(eventPollingStopped.match)
pollingTask.cancel()
},
})
store.dispatch(eventPollingStarted())
await delay(5)
expect(pollingTaskStarted).toBe(true)
await delay(5)
emitter.emit('serverEvent', 'a')
// Promise resolution
await delay(1)
emitter.emit('serverEvent', 'b')
// Promise resolution
await delay(1)
store.dispatch(eventPollingStopped())
// Have to break out of the event loop to let the cancelation promise
// kick in - emitting before this would still resolve pollForEvent()
await delay(1)
emitter.emit('serverEvent', 'c')
// A and B were processed earlier. The first C was processed because the
// emitter synchronously resolved the `pollForEvents` promise before
// the cancelation took effect, but after another pause, the
// cancelation kicked in and the second C is ignored.
expect(receivedMessages).toEqual({ a: 1, b: 1, c: 0 })
expect(pollingTaskCanceled).toBe(true)
})
})

View File

@@ -0,0 +1,609 @@
import type { PayloadAction, BaseActionCreator } from '../createAction'
import type {
Dispatch as ReduxDispatch,
AnyAction,
MiddlewareAPI,
Middleware,
Action as ReduxAction,
} from 'redux'
import type { ThunkDispatch } from 'redux-thunk'
import type { TaskAbortError } from './exceptions'
/**
* @internal
* At the time of writing `lib.dom.ts` does not provide `abortSignal.reason`.
*/
export type AbortSignalWithReason<T> = AbortSignal & { reason?: T }
/**
* Types copied from RTK
*/
/** @internal */
export interface TypedActionCreator<Type extends string> {
(...args: any[]): ReduxAction<Type>
type: Type
match: MatchFunction<any>
}
/** @internal */
export type AnyListenerPredicate<State> = (
action: AnyAction,
currentState: State,
originalState: State
) => boolean
/** @public */
export type ListenerPredicate<Action extends AnyAction, State> = (
action: AnyAction,
currentState: State,
originalState: State
) => action is Action
/** @public */
export interface ConditionFunction<State> {
(predicate: AnyListenerPredicate<State>, timeout?: number): Promise<boolean>
(predicate: AnyListenerPredicate<State>, timeout?: number): Promise<boolean>
(predicate: () => boolean, timeout?: number): Promise<boolean>
}
/** @internal */
export type MatchFunction<T> = (v: any) => v is T
/** @public */
export interface ForkedTaskAPI {
/**
* Returns a promise that resolves when `waitFor` resolves or
* rejects if the task or the parent listener has been cancelled or is completed.
*/
pause<W>(waitFor: Promise<W>): Promise<W>
/**
* Returns a promise that resolves after `timeoutMs` or
* rejects if the task or the parent listener has been cancelled or is completed.
* @param timeoutMs
*/
delay(timeoutMs: number): Promise<void>
/**
* An abort signal whose `aborted` property is set to `true`
* if the task execution is either aborted or completed.
* @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
*/
signal: AbortSignal
}
/** @public */
export interface AsyncTaskExecutor<T> {
(forkApi: ForkedTaskAPI): Promise<T>
}
/** @public */
export interface SyncTaskExecutor<T> {
(forkApi: ForkedTaskAPI): T
}
/** @public */
export type ForkedTaskExecutor<T> = AsyncTaskExecutor<T> | SyncTaskExecutor<T>
/** @public */
export type TaskResolved<T> = {
readonly status: 'ok'
readonly value: T
}
/** @public */
export type TaskRejected = {
readonly status: 'rejected'
readonly error: unknown
}
/** @public */
export type TaskCancelled = {
readonly status: 'cancelled'
readonly error: TaskAbortError
}
/** @public */
export type TaskResult<Value> =
| TaskResolved<Value>
| TaskRejected
| TaskCancelled
/** @public */
export interface ForkedTask<T> {
/**
* A promise that resolves when the task is either completed or cancelled or rejects
* if parent listener execution is cancelled or completed.
*
* ### Example
* ```ts
* const result = await fork(async (forkApi) => Promise.resolve(4)).result
*
* if(result.status === 'ok') {
* console.log(result.value) // logs 4
* }}
* ```
*/
result: Promise<TaskResult<T>>
/**
* Cancel task if it is in progress or not yet started,
* it is noop otherwise.
*/
cancel(): void
}
/** @public */
export interface ForkOptions {
/**
* If true, causes the parent task to not be marked as complete until
* all autoJoined forks have completed or failed.
*/
autoJoin: boolean;
}
/** @public */
export interface ListenerEffectAPI<
State,
Dispatch extends ReduxDispatch<AnyAction>,
ExtraArgument = unknown
> extends MiddlewareAPI<Dispatch, State> {
/**
* Returns the store state as it existed when the action was originally dispatched, _before_ the reducers ran.
*
* ### Synchronous invocation
*
* This function can **only** be invoked **synchronously**, it throws error otherwise.
*
* @example
*
* ```ts
* middleware.startListening({
* predicate: () => true,
* async effect(_, { getOriginalState }) {
* getOriginalState(); // sync: OK!
*
* setTimeout(getOriginalState, 0); // async: throws Error
*
* await Promise().resolve();
*
* getOriginalState() // async: throws Error
* }
* })
* ```
*/
getOriginalState: () => State
/**
* Removes the listener entry from the middleware and prevent future instances of the listener from running.
*
* It does **not** cancel any active instances.
*/
unsubscribe(): void
/**
* It will subscribe a listener if it was previously removed, noop otherwise.
*/
subscribe(): void
/**
* Returns a promise that resolves when the input predicate returns `true` or
* rejects if the listener has been cancelled or is completed.
*
* The return value is `true` if the predicate succeeds or `false` if a timeout is provided and expires first.
*
* ### Example
*
* ```ts
* const updateBy = createAction<number>('counter/updateBy');
*
* middleware.startListening({
* actionCreator: updateBy,
* async effect(_, { condition }) {
* // wait at most 3s for `updateBy` actions.
* if(await condition(updateBy.match, 3_000)) {
* // `updateBy` has been dispatched twice in less than 3s.
* }
* }
* })
* ```
*/
condition: ConditionFunction<State>
/**
* Returns a promise that resolves when the input predicate returns `true` or
* rejects if the listener has been cancelled or is completed.
*
* The return value is the `[action, currentState, previousState]` combination that the predicate saw as arguments.
*
* The promise resolves to null if a timeout is provided and expires first,
*
* ### Example
*
* ```ts
* const updateBy = createAction<number>('counter/updateBy');
*
* middleware.startListening({
* actionCreator: updateBy,
* async effect(_, { take }) {
* const [{ payload }] = await take(updateBy.match);
* console.log(payload); // logs 5;
* }
* })
*
* store.dispatch(updateBy(5));
* ```
*/
take: TakePattern<State>
/**
* Cancels all other running instances of this same listener except for the one that made this call.
*/
cancelActiveListeners: () => void
/**
* An abort signal whose `aborted` property is set to `true`
* if the listener execution is either aborted or completed.
* @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
*/
signal: AbortSignal
/**
* Returns a promise that resolves after `timeoutMs` or
* rejects if the listener has been cancelled or is completed.
*/
delay(timeoutMs: number): Promise<void>
/**
* Queues in the next microtask the execution of a task.
* @param executor
* @param options
*/
fork<T>(executor: ForkedTaskExecutor<T>, options?: ForkOptions): ForkedTask<T>
/**
* Returns a promise that resolves when `waitFor` resolves or
* rejects if the listener has been cancelled or is completed.
* @param promise
*/
pause<M>(promise: Promise<M>): Promise<M>
extra: ExtraArgument
}
/** @public */
export type ListenerEffect<
Action extends AnyAction,
State,
Dispatch extends ReduxDispatch<AnyAction>,
ExtraArgument = unknown
> = (
action: Action,
api: ListenerEffectAPI<State, Dispatch, ExtraArgument>
) => void | Promise<void>
/**
* @public
* Additional infos regarding the error raised.
*/
export interface ListenerErrorInfo {
/**
* Which function has generated the exception.
*/
raisedBy: 'effect' | 'predicate'
}
/**
* @public
* Gets notified with synchronous and asynchronous errors raised by `listeners` or `predicates`.
* @param error The thrown error.
* @param errorInfo Additional information regarding the thrown error.
*/
export interface ListenerErrorHandler {
(error: unknown, errorInfo: ListenerErrorInfo): void
}
/** @public */
export interface CreateListenerMiddlewareOptions<ExtraArgument = unknown> {
extra?: ExtraArgument
/**
* Receives synchronous errors that are raised by `listener` and `listenerOption.predicate`.
*/
onError?: ListenerErrorHandler
}
/** @public */
export type ListenerMiddleware<
State = unknown,
Dispatch extends ThunkDispatch<State, unknown, AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>,
ExtraArgument = unknown
> = Middleware<
{
(action: ReduxAction<'listenerMiddleware/add'>): UnsubscribeListener
},
State,
Dispatch
>
/** @public */
export interface ListenerMiddlewareInstance<
State = unknown,
Dispatch extends ThunkDispatch<State, unknown, AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>,
ExtraArgument = unknown
> {
middleware: ListenerMiddleware<State, Dispatch, ExtraArgument>
startListening: AddListenerOverloads<
UnsubscribeListener,
State,
Dispatch,
ExtraArgument
>
stopListening: RemoveListenerOverloads<State, Dispatch>
/**
* Unsubscribes all listeners, cancels running listeners and tasks.
*/
clearListeners: () => void
}
/**
* API Function Overloads
*/
/** @public */
export type TakePatternOutputWithoutTimeout<
State,
Predicate extends AnyListenerPredicate<State>
> = Predicate extends MatchFunction<infer Action>
? Promise<[Action, State, State]>
: Promise<[AnyAction, State, State]>
/** @public */
export type TakePatternOutputWithTimeout<
State,
Predicate extends AnyListenerPredicate<State>
> = Predicate extends MatchFunction<infer Action>
? Promise<[Action, State, State] | null>
: Promise<[AnyAction, State, State] | null>
/** @public */
export interface TakePattern<State> {
<Predicate extends AnyListenerPredicate<State>>(
predicate: Predicate
): TakePatternOutputWithoutTimeout<State, Predicate>
<Predicate extends AnyListenerPredicate<State>>(
predicate: Predicate,
timeout: number
): TakePatternOutputWithTimeout<State, Predicate>
<Predicate extends AnyListenerPredicate<State>>(
predicate: Predicate,
timeout?: number | undefined
): TakePatternOutputWithTimeout<State, Predicate>
}
/** @public */
export interface UnsubscribeListenerOptions {
cancelActive?: true
}
/** @public */
export type UnsubscribeListener = (
unsubscribeOptions?: UnsubscribeListenerOptions
) => void
/**
* @public
* The possible overloads and options for defining a listener. The return type of each function is specified as a generic arg, so the overloads can be reused for multiple different functions
*/
export interface AddListenerOverloads<
Return,
State = unknown,
Dispatch extends ReduxDispatch = ThunkDispatch<State, unknown, AnyAction>,
ExtraArgument = unknown,
AdditionalOptions = unknown
> {
/** Accepts a "listener predicate" that is also a TS type predicate for the action*/
<MA extends AnyAction, LP extends ListenerPredicate<MA, State>>(
options: {
actionCreator?: never
type?: never
matcher?: never
predicate: LP
effect: ListenerEffect<
ListenerPredicateGuardedActionType<LP>,
State,
Dispatch,
ExtraArgument
>
} & AdditionalOptions
): Return
/** Accepts an RTK action creator, like `incrementByAmount` */
<C extends TypedActionCreator<any>>(
options: {
actionCreator: C
type?: never
matcher?: never
predicate?: never
effect: ListenerEffect<ReturnType<C>, State, Dispatch, ExtraArgument>
} & AdditionalOptions
): Return
/** Accepts a specific action type string */
<T extends string>(
options: {
actionCreator?: never
type: T
matcher?: never
predicate?: never
effect: ListenerEffect<ReduxAction<T>, State, Dispatch, ExtraArgument>
} & AdditionalOptions
): Return
/** Accepts an RTK matcher function, such as `incrementByAmount.match` */
<MA extends AnyAction, M extends MatchFunction<MA>>(
options: {
actionCreator?: never
type?: never
matcher: M
predicate?: never
effect: ListenerEffect<GuardedType<M>, State, Dispatch, ExtraArgument>
} & AdditionalOptions
): Return
/** Accepts a "listener predicate" that just returns a boolean, no type assertion */
<LP extends AnyListenerPredicate<State>>(
options: {
actionCreator?: never
type?: never
matcher?: never
predicate: LP
effect: ListenerEffect<AnyAction, State, Dispatch, ExtraArgument>
} & AdditionalOptions
): Return
}
/** @public */
export type RemoveListenerOverloads<
State = unknown,
Dispatch extends ReduxDispatch = ThunkDispatch<State, unknown, AnyAction>
> = AddListenerOverloads<
boolean,
State,
Dispatch,
any,
UnsubscribeListenerOptions
>
/** @public */
export interface RemoveListenerAction<
Action extends AnyAction,
State,
Dispatch extends ReduxDispatch<AnyAction>
> {
type: 'listenerMiddleware/remove'
payload: {
type: string
listener: ListenerEffect<Action, State, Dispatch>
}
}
/**
* @public
* A "pre-typed" version of `addListenerAction`, so the listener args are well-typed */
export type TypedAddListener<
State,
Dispatch extends ReduxDispatch<AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>,
ExtraArgument = unknown,
Payload = ListenerEntry<State, Dispatch>,
T extends string = 'listenerMiddleware/add'
> = BaseActionCreator<Payload, T> &
AddListenerOverloads<
PayloadAction<Payload, T>,
State,
Dispatch,
ExtraArgument
>
/**
* @public
* A "pre-typed" version of `removeListenerAction`, so the listener args are well-typed */
export type TypedRemoveListener<
State,
Dispatch extends ReduxDispatch<AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>,
Payload = ListenerEntry<State, Dispatch>,
T extends string = 'listenerMiddleware/remove'
> = BaseActionCreator<Payload, T> &
AddListenerOverloads<
PayloadAction<Payload, T>,
State,
Dispatch,
any,
UnsubscribeListenerOptions
>
/**
* @public
* A "pre-typed" version of `middleware.startListening`, so the listener args are well-typed */
export type TypedStartListening<
State,
Dispatch extends ReduxDispatch<AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>,
ExtraArgument = unknown
> = AddListenerOverloads<UnsubscribeListener, State, Dispatch, ExtraArgument>
/** @public
* A "pre-typed" version of `middleware.stopListening`, so the listener args are well-typed */
export type TypedStopListening<
State,
Dispatch extends ReduxDispatch<AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>
> = RemoveListenerOverloads<State, Dispatch>
/** @public
* A "pre-typed" version of `createListenerEntry`, so the listener args are well-typed */
export type TypedCreateListenerEntry<
State,
Dispatch extends ReduxDispatch<AnyAction> = ThunkDispatch<
State,
unknown,
AnyAction
>
> = AddListenerOverloads<ListenerEntry<State, Dispatch>, State, Dispatch>
/**
* Internal Types
*/
/** @internal An single listener entry */
export type ListenerEntry<
State = unknown,
Dispatch extends ReduxDispatch<AnyAction> = ReduxDispatch<AnyAction>
> = {
id: string
effect: ListenerEffect<any, State, Dispatch>
unsubscribe: () => void
pending: Set<AbortController>
type?: string
predicate: ListenerPredicate<AnyAction, State>
}
/**
* @internal
* A shorthand form of the accepted args, solely so that `createListenerEntry` has validly-typed conditional logic when checking the options contents
*/
export type FallbackAddListenerOptions = {
actionCreator?: TypedActionCreator<string>
type?: string
matcher?: MatchFunction<any>
predicate?: ListenerPredicate<any, any>
} & { effect: ListenerEffect<any, any, any> }
/**
* Utility Types
*/
/** @public */
export type GuardedType<T> = T extends (
x: any,
...args: unknown[]
) => x is infer T
? T
: never
/** @public */
export type ListenerPredicateGuardedActionType<T> = T extends ListenerPredicate<
infer Action,
any
>
? Action
: never

View File

@@ -0,0 +1,70 @@
import type { AbortSignalWithReason } from './types'
export const assertFunction: (
func: unknown,
expected: string
) => asserts func is (...args: unknown[]) => unknown = (
func: unknown,
expected: string
) => {
if (typeof func !== 'function') {
throw new TypeError(`${expected} is not a function`)
}
}
export const noop = () => {}
export const catchRejection = <T>(
promise: Promise<T>,
onError = noop
): Promise<T> => {
promise.catch(onError)
return promise
}
export const addAbortSignalListener = (
abortSignal: AbortSignal,
callback: (evt: Event) => void
) => {
abortSignal.addEventListener('abort', callback, { once: true })
return () => abortSignal.removeEventListener('abort', callback)
}
/**
* Calls `abortController.abort(reason)` and patches `signal.reason`.
* if it is not supported.
*
* At the time of writing `signal.reason` is available in FF chrome, edge node 17 and deno.
* @param abortController
* @param reason
* @returns
* @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/reason
*/
export const abortControllerWithReason = <T>(
abortController: AbortController,
reason: T
): void => {
type Consumer<T> = (val: T) => void
const signal = abortController.signal as AbortSignalWithReason<T>
if (signal.aborted) {
return
}
// Patch `reason` if necessary.
// - We use defineProperty here because reason is a getter of `AbortSignal.__proto__`.
// - We need to patch 'reason' before calling `.abort()` because listeners to the 'abort'
// event are are notified immediately.
if (!('reason' in signal)) {
Object.defineProperty(signal, 'reason', {
enumerable: true,
value: reason,
configurable: true,
writable: true,
})
}
;(abortController.abort as Consumer<typeof reason>)(reason)
}

201
server/node_modules/@reduxjs/toolkit/src/mapBuilders.ts generated vendored Normal file
View File

@@ -0,0 +1,201 @@
import type { Action, AnyAction } from 'redux'
import type {
CaseReducer,
CaseReducers,
ActionMatcherDescriptionCollection,
} from './createReducer'
import type { TypeGuard } from './tsHelpers'
export interface TypedActionCreator<Type extends string> {
(...args: any[]): Action<Type>
type: Type
}
/**
* A builder for an action <-> reducer map.
*
* @public
*/
export interface ActionReducerMapBuilder<State> {
/**
* Adds a case reducer to handle a single exact action type.
* @remarks
* All calls to `builder.addCase` must come before any calls to `builder.addMatcher` or `builder.addDefaultCase`.
* @param actionCreator - Either a plain action type string, or an action creator generated by [`createAction`](./createAction) that can be used to determine the action type.
* @param reducer - The actual case reducer function.
*/
addCase<ActionCreator extends TypedActionCreator<string>>(
actionCreator: ActionCreator,
reducer: CaseReducer<State, ReturnType<ActionCreator>>
): ActionReducerMapBuilder<State>
/**
* Adds a case reducer to handle a single exact action type.
* @remarks
* All calls to `builder.addCase` must come before any calls to `builder.addMatcher` or `builder.addDefaultCase`.
* @param actionCreator - Either a plain action type string, or an action creator generated by [`createAction`](./createAction) that can be used to determine the action type.
* @param reducer - The actual case reducer function.
*/
addCase<Type extends string, A extends Action<Type>>(
type: Type,
reducer: CaseReducer<State, A>
): ActionReducerMapBuilder<State>
/**
* Allows you to match your incoming actions against your own filter function instead of only the `action.type` property.
* @remarks
* If multiple matcher reducers match, all of them will be executed in the order
* they were defined in - even if a case reducer already matched.
* All calls to `builder.addMatcher` must come after any calls to `builder.addCase` and before any calls to `builder.addDefaultCase`.
* @param matcher - A matcher function. In TypeScript, this should be a [type predicate](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates)
* function
* @param reducer - The actual case reducer function.
*
* @example
```ts
import {
createAction,
createReducer,
AsyncThunk,
AnyAction,
} from "@reduxjs/toolkit";
type GenericAsyncThunk = AsyncThunk<unknown, unknown, any>;
type PendingAction = ReturnType<GenericAsyncThunk["pending"]>;
type RejectedAction = ReturnType<GenericAsyncThunk["rejected"]>;
type FulfilledAction = ReturnType<GenericAsyncThunk["fulfilled"]>;
const initialState: Record<string, string> = {};
const resetAction = createAction("reset-tracked-loading-state");
function isPendingAction(action: AnyAction): action is PendingAction {
return action.type.endsWith("/pending");
}
const reducer = createReducer(initialState, (builder) => {
builder
.addCase(resetAction, () => initialState)
// matcher can be defined outside as a type predicate function
.addMatcher(isPendingAction, (state, action) => {
state[action.meta.requestId] = "pending";
})
.addMatcher(
// matcher can be defined inline as a type predicate function
(action): action is RejectedAction => action.type.endsWith("/rejected"),
(state, action) => {
state[action.meta.requestId] = "rejected";
}
)
// matcher can just return boolean and the matcher can receive a generic argument
.addMatcher<FulfilledAction>(
(action) => action.type.endsWith("/fulfilled"),
(state, action) => {
state[action.meta.requestId] = "fulfilled";
}
);
});
```
*/
addMatcher<A>(
matcher: TypeGuard<A> | ((action: any) => boolean),
reducer: CaseReducer<State, A extends AnyAction ? A : A & AnyAction>
): Omit<ActionReducerMapBuilder<State>, 'addCase'>
/**
* Adds a "default case" reducer that is executed if no case reducer and no matcher
* reducer was executed for this action.
* @param reducer - The fallback "default case" reducer function.
*
* @example
```ts
import { createReducer } from '@reduxjs/toolkit'
const initialState = { otherActions: 0 }
const reducer = createReducer(initialState, builder => {
builder
// .addCase(...)
// .addMatcher(...)
.addDefaultCase((state, action) => {
state.otherActions++
})
})
```
*/
addDefaultCase(reducer: CaseReducer<State, AnyAction>): {}
}
export function executeReducerBuilderCallback<S>(
builderCallback: (builder: ActionReducerMapBuilder<S>) => void
): [
CaseReducers<S, any>,
ActionMatcherDescriptionCollection<S>,
CaseReducer<S, AnyAction> | undefined
] {
const actionsMap: CaseReducers<S, any> = {}
const actionMatchers: ActionMatcherDescriptionCollection<S> = []
let defaultCaseReducer: CaseReducer<S, AnyAction> | undefined
const builder = {
addCase(
typeOrActionCreator: string | TypedActionCreator<any>,
reducer: CaseReducer<S>
) {
if (process.env.NODE_ENV !== 'production') {
/*
to keep the definition by the user in line with actual behavior,
we enforce `addCase` to always be called before calling `addMatcher`
as matching cases take precedence over matchers
*/
if (actionMatchers.length > 0) {
throw new Error(
'`builder.addCase` should only be called before calling `builder.addMatcher`'
)
}
if (defaultCaseReducer) {
throw new Error(
'`builder.addCase` should only be called before calling `builder.addDefaultCase`'
)
}
}
const type =
typeof typeOrActionCreator === 'string'
? typeOrActionCreator
: typeOrActionCreator.type
if (!type) {
throw new Error(
'`builder.addCase` cannot be called with an empty action type'
)
}
if (type in actionsMap) {
throw new Error(
'`builder.addCase` cannot be called with two reducers for the same action type'
)
}
actionsMap[type] = reducer
return builder
},
addMatcher<A>(
matcher: TypeGuard<A>,
reducer: CaseReducer<S, A extends AnyAction ? A : A & AnyAction>
) {
if (process.env.NODE_ENV !== 'production') {
if (defaultCaseReducer) {
throw new Error(
'`builder.addMatcher` should only be called before calling `builder.addDefaultCase`'
)
}
}
actionMatchers.push({ matcher, reducer })
return builder
},
addDefaultCase(reducer: CaseReducer<S, AnyAction>) {
if (process.env.NODE_ENV !== 'production') {
if (defaultCaseReducer) {
throw new Error('`builder.addDefaultCase` can only be called once')
}
}
defaultCaseReducer = reducer
return builder
},
}
builderCallback(builder)
return [actionsMap, actionMatchers, defaultCaseReducer]
}

425
server/node_modules/@reduxjs/toolkit/src/matchers.ts generated vendored Normal file
View File

@@ -0,0 +1,425 @@
import type {
ActionFromMatcher,
Matcher,
UnionToIntersection,
} from './tsHelpers'
import { hasMatchFunction } from './tsHelpers'
import type {
AsyncThunk,
AsyncThunkFulfilledActionCreator,
AsyncThunkPendingActionCreator,
AsyncThunkRejectedActionCreator,
} from './createAsyncThunk'
/** @public */
export type ActionMatchingAnyOf<Matchers extends [...Matcher<any>[]]> =
ActionFromMatcher<Matchers[number]>
/** @public */
export type ActionMatchingAllOf<Matchers extends [...Matcher<any>[]]> =
UnionToIntersection<ActionMatchingAnyOf<Matchers>>
const matches = (matcher: Matcher<any>, action: any) => {
if (hasMatchFunction(matcher)) {
return matcher.match(action)
} else {
return matcher(action)
}
}
/**
* A higher-order function that returns a function that may be used to check
* whether an action matches any one of the supplied type guards or action
* creators.
*
* @param matchers The type guards or action creators to match against.
*
* @public
*/
export function isAnyOf<Matchers extends [...Matcher<any>[]]>(
...matchers: Matchers
) {
return (action: any): action is ActionMatchingAnyOf<Matchers> => {
return matchers.some((matcher) => matches(matcher, action))
}
}
/**
* A higher-order function that returns a function that may be used to check
* whether an action matches all of the supplied type guards or action
* creators.
*
* @param matchers The type guards or action creators to match against.
*
* @public
*/
export function isAllOf<Matchers extends [...Matcher<any>[]]>(
...matchers: Matchers
) {
return (action: any): action is ActionMatchingAllOf<Matchers> => {
return matchers.every((matcher) => matches(matcher, action))
}
}
/**
* @param action A redux action
* @param validStatus An array of valid meta.requestStatus values
*
* @internal
*/
export function hasExpectedRequestMetadata(
action: any,
validStatus: readonly string[]
) {
if (!action || !action.meta) return false
const hasValidRequestId = typeof action.meta.requestId === 'string'
const hasValidRequestStatus =
validStatus.indexOf(action.meta.requestStatus) > -1
return hasValidRequestId && hasValidRequestStatus
}
function isAsyncThunkArray(a: [any] | AnyAsyncThunk[]): a is AnyAsyncThunk[] {
return (
typeof a[0] === 'function' &&
'pending' in a[0] &&
'fulfilled' in a[0] &&
'rejected' in a[0]
)
}
export type UnknownAsyncThunkPendingAction = ReturnType<
AsyncThunkPendingActionCreator<unknown>
>
export type PendingActionFromAsyncThunk<T extends AnyAsyncThunk> =
ActionFromMatcher<T['pending']>
/**
* A higher-order function that returns a function that may be used to check
* whether an action was created by an async thunk action creator, and that
* the action is pending.
*
* @public
*/
export function isPending(): (
action: any
) => action is UnknownAsyncThunkPendingAction
/**
* A higher-order function that returns a function that may be used to check
* whether an action belongs to one of the provided async thunk action creators,
* and that the action is pending.
*
* @param asyncThunks (optional) The async thunk action creators to match against.
*
* @public
*/
export function isPending<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(
...asyncThunks: AsyncThunks
): (action: any) => action is PendingActionFromAsyncThunk<AsyncThunks[number]>
/**
* Tests if `action` is a pending thunk action
* @public
*/
export function isPending(action: any): action is UnknownAsyncThunkPendingAction
export function isPending<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(...asyncThunks: AsyncThunks | [any]) {
if (asyncThunks.length === 0) {
return (action: any) => hasExpectedRequestMetadata(action, ['pending'])
}
if (!isAsyncThunkArray(asyncThunks)) {
return isPending()(asyncThunks[0])
}
return (
action: any
): action is PendingActionFromAsyncThunk<AsyncThunks[number]> => {
// note: this type will be correct because we have at least 1 asyncThunk
const matchers: [Matcher<any>, ...Matcher<any>[]] = asyncThunks.map(
(asyncThunk) => asyncThunk.pending
) as any
const combinedMatcher = isAnyOf(...matchers)
return combinedMatcher(action)
}
}
export type UnknownAsyncThunkRejectedAction = ReturnType<
AsyncThunkRejectedActionCreator<unknown, unknown>
>
export type RejectedActionFromAsyncThunk<T extends AnyAsyncThunk> =
ActionFromMatcher<T['rejected']>
/**
* A higher-order function that returns a function that may be used to check
* whether an action was created by an async thunk action creator, and that
* the action is rejected.
*
* @public
*/
export function isRejected(): (
action: any
) => action is UnknownAsyncThunkRejectedAction
/**
* A higher-order function that returns a function that may be used to check
* whether an action belongs to one of the provided async thunk action creators,
* and that the action is rejected.
*
* @param asyncThunks (optional) The async thunk action creators to match against.
*
* @public
*/
export function isRejected<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(
...asyncThunks: AsyncThunks
): (action: any) => action is RejectedActionFromAsyncThunk<AsyncThunks[number]>
/**
* Tests if `action` is a rejected thunk action
* @public
*/
export function isRejected(
action: any
): action is UnknownAsyncThunkRejectedAction
export function isRejected<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(...asyncThunks: AsyncThunks | [any]) {
if (asyncThunks.length === 0) {
return (action: any) => hasExpectedRequestMetadata(action, ['rejected'])
}
if (!isAsyncThunkArray(asyncThunks)) {
return isRejected()(asyncThunks[0])
}
return (
action: any
): action is RejectedActionFromAsyncThunk<AsyncThunks[number]> => {
// note: this type will be correct because we have at least 1 asyncThunk
const matchers: [Matcher<any>, ...Matcher<any>[]] = asyncThunks.map(
(asyncThunk) => asyncThunk.rejected
) as any
const combinedMatcher = isAnyOf(...matchers)
return combinedMatcher(action)
}
}
export type UnknownAsyncThunkRejectedWithValueAction = ReturnType<
AsyncThunkRejectedActionCreator<unknown, unknown>
>
export type RejectedWithValueActionFromAsyncThunk<T extends AnyAsyncThunk> =
ActionFromMatcher<T['rejected']> &
(T extends AsyncThunk<any, any, { rejectValue: infer RejectedValue }>
? { payload: RejectedValue }
: unknown)
/**
* A higher-order function that returns a function that may be used to check
* whether an action was created by an async thunk action creator, and that
* the action is rejected with value.
*
* @public
*/
export function isRejectedWithValue(): (
action: any
) => action is UnknownAsyncThunkRejectedAction
/**
* A higher-order function that returns a function that may be used to check
* whether an action belongs to one of the provided async thunk action creators,
* and that the action is rejected with value.
*
* @param asyncThunks (optional) The async thunk action creators to match against.
*
* @public
*/
export function isRejectedWithValue<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(
...asyncThunks: AsyncThunks
): (
action: any
) => action is RejectedWithValueActionFromAsyncThunk<AsyncThunks[number]>
/**
* Tests if `action` is a rejected thunk action with value
* @public
*/
export function isRejectedWithValue(
action: any
): action is UnknownAsyncThunkRejectedAction
export function isRejectedWithValue<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(...asyncThunks: AsyncThunks | [any]) {
const hasFlag = (action: any): action is any => {
return action && action.meta && action.meta.rejectedWithValue
}
if (asyncThunks.length === 0) {
return (action: any) => {
const combinedMatcher = isAllOf(isRejected(...asyncThunks), hasFlag)
return combinedMatcher(action)
}
}
if (!isAsyncThunkArray(asyncThunks)) {
return isRejectedWithValue()(asyncThunks[0])
}
return (
action: any
): action is RejectedActionFromAsyncThunk<AsyncThunks[number]> => {
const combinedMatcher = isAllOf(isRejected(...asyncThunks), hasFlag)
return combinedMatcher(action)
}
}
export type UnknownAsyncThunkFulfilledAction = ReturnType<
AsyncThunkFulfilledActionCreator<unknown, unknown>
>
export type FulfilledActionFromAsyncThunk<T extends AnyAsyncThunk> =
ActionFromMatcher<T['fulfilled']>
/**
* A higher-order function that returns a function that may be used to check
* whether an action was created by an async thunk action creator, and that
* the action is fulfilled.
*
* @public
*/
export function isFulfilled(): (
action: any
) => action is UnknownAsyncThunkFulfilledAction
/**
* A higher-order function that returns a function that may be used to check
* whether an action belongs to one of the provided async thunk action creators,
* and that the action is fulfilled.
*
* @param asyncThunks (optional) The async thunk action creators to match against.
*
* @public
*/
export function isFulfilled<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(
...asyncThunks: AsyncThunks
): (action: any) => action is FulfilledActionFromAsyncThunk<AsyncThunks[number]>
/**
* Tests if `action` is a fulfilled thunk action
* @public
*/
export function isFulfilled(
action: any
): action is UnknownAsyncThunkFulfilledAction
export function isFulfilled<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(...asyncThunks: AsyncThunks | [any]) {
if (asyncThunks.length === 0) {
return (action: any) => hasExpectedRequestMetadata(action, ['fulfilled'])
}
if (!isAsyncThunkArray(asyncThunks)) {
return isFulfilled()(asyncThunks[0])
}
return (
action: any
): action is FulfilledActionFromAsyncThunk<AsyncThunks[number]> => {
// note: this type will be correct because we have at least 1 asyncThunk
const matchers: [Matcher<any>, ...Matcher<any>[]] = asyncThunks.map(
(asyncThunk) => asyncThunk.fulfilled
) as any
const combinedMatcher = isAnyOf(...matchers)
return combinedMatcher(action)
}
}
export type UnknownAsyncThunkAction =
| UnknownAsyncThunkPendingAction
| UnknownAsyncThunkRejectedAction
| UnknownAsyncThunkFulfilledAction
export type AnyAsyncThunk = {
pending: { match: (action: any) => action is any }
fulfilled: { match: (action: any) => action is any }
rejected: { match: (action: any) => action is any }
}
export type ActionsFromAsyncThunk<T extends AnyAsyncThunk> =
| ActionFromMatcher<T['pending']>
| ActionFromMatcher<T['fulfilled']>
| ActionFromMatcher<T['rejected']>
/**
* A higher-order function that returns a function that may be used to check
* whether an action was created by an async thunk action creator.
*
* @public
*/
export function isAsyncThunkAction(): (
action: any
) => action is UnknownAsyncThunkAction
/**
* A higher-order function that returns a function that may be used to check
* whether an action belongs to one of the provided async thunk action creators.
*
* @param asyncThunks (optional) The async thunk action creators to match against.
*
* @public
*/
export function isAsyncThunkAction<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(
...asyncThunks: AsyncThunks
): (action: any) => action is ActionsFromAsyncThunk<AsyncThunks[number]>
/**
* Tests if `action` is a thunk action
* @public
*/
export function isAsyncThunkAction(
action: any
): action is UnknownAsyncThunkAction
export function isAsyncThunkAction<
AsyncThunks extends [AnyAsyncThunk, ...AnyAsyncThunk[]]
>(...asyncThunks: AsyncThunks | [any]) {
if (asyncThunks.length === 0) {
return (action: any) =>
hasExpectedRequestMetadata(action, ['pending', 'fulfilled', 'rejected'])
}
if (!isAsyncThunkArray(asyncThunks)) {
return isAsyncThunkAction()(asyncThunks[0])
}
return (
action: any
): action is ActionsFromAsyncThunk<AsyncThunks[number]> => {
// note: this type will be correct because we have at least 1 asyncThunk
const matchers: [Matcher<any>, ...Matcher<any>[]] = [] as any
for (const asyncThunk of asyncThunks) {
matchers.push(
asyncThunk.pending,
asyncThunk.rejected,
asyncThunk.fulfilled
)
}
const combinedMatcher = isAnyOf(...matchers)
return combinedMatcher(action)
}
}

20
server/node_modules/@reduxjs/toolkit/src/nanoid.ts generated vendored Normal file
View File

@@ -0,0 +1,20 @@
// Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
// optimize the gzip compression for this alphabet.
let urlAlphabet =
'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW'
/**
*
* @public
*/
export let nanoid = (size = 21) => {
let id = ''
// A compact alternative for `for (var i = 0; i < step; i++)`.
let i = size
while (i--) {
// `| 0` is more compact and faster than `Math.floor()`.
id += urlAlphabet[(Math.random() * 64) | 0]
}
return id
}

View File

@@ -0,0 +1,6 @@
export class HandledError {
constructor(
public readonly value: any,
public readonly meta: any = undefined
) {}
}

View File

@@ -0,0 +1,119 @@
import type {
EndpointDefinitions,
EndpointBuilder,
EndpointDefinition,
UpdateDefinitions,
} from './endpointDefinitions'
import type {
UnionToIntersection,
NoInfer,
WithRequiredProp,
} from './tsHelpers'
import type { CoreModule } from './core/module'
import type { CreateApiOptions } from './createApi'
import type { BaseQueryFn } from './baseQueryTypes'
import type { CombinedState } from './core/apiState'
import type { AnyAction } from '@reduxjs/toolkit'
export interface ApiModules<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
BaseQuery extends BaseQueryFn,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ReducerPath extends string,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
TagTypes extends string
> {}
export type ModuleName = keyof ApiModules<any, any, any, any>
export type Module<Name extends ModuleName> = {
name: Name
init<
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string
>(
api: Api<BaseQuery, EndpointDefinitions, ReducerPath, TagTypes, ModuleName>,
options: WithRequiredProp<
CreateApiOptions<BaseQuery, Definitions, ReducerPath, TagTypes>,
| 'reducerPath'
| 'serializeQueryArgs'
| 'keepUnusedDataFor'
| 'refetchOnMountOrArgChange'
| 'refetchOnFocus'
| 'refetchOnReconnect'
| 'tagTypes'
>,
context: ApiContext<Definitions>
): {
injectEndpoint(
endpointName: string,
definition: EndpointDefinition<any, any, any, any>
): void
}
}
export interface ApiContext<Definitions extends EndpointDefinitions> {
apiUid: string
endpointDefinitions: Definitions
batch(cb: () => void): void
extractRehydrationInfo: (
action: AnyAction
) => CombinedState<any, any, any> | undefined
hasRehydrationInfo: (action: AnyAction) => boolean
}
export type Api<
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string,
Enhancers extends ModuleName = CoreModule
> = UnionToIntersection<
ApiModules<BaseQuery, Definitions, ReducerPath, TagTypes>[Enhancers]
> & {
/**
* A function to inject the endpoints into the original API, but also give you that same API with correct types for these endpoints back. Useful with code-splitting.
*/
injectEndpoints<NewDefinitions extends EndpointDefinitions>(_: {
endpoints: (
build: EndpointBuilder<BaseQuery, TagTypes, ReducerPath>
) => NewDefinitions
overrideExisting?: boolean
}): Api<
BaseQuery,
Definitions & NewDefinitions,
ReducerPath,
TagTypes,
Enhancers
>
/**
*A function to enhance a generated API with additional information. Useful with code-generation.
*/
enhanceEndpoints<
NewTagTypes extends string = never,
NewDefinitions extends EndpointDefinitions = never
>(_: {
addTagTypes?: readonly NewTagTypes[]
endpoints?: UpdateDefinitions<
Definitions,
TagTypes | NoInfer<NewTagTypes>,
NewDefinitions
> extends infer NewDefinitions
? {
[K in keyof NewDefinitions]?:
| Partial<NewDefinitions[K]>
| ((definition: NewDefinitions[K]) => void)
}
: never
}): Api<
BaseQuery,
UpdateDefinitions<Definitions, TagTypes | NewTagTypes, NewDefinitions>,
ReducerPath,
TagTypes | NewTagTypes,
Enhancers
>
}

View File

@@ -0,0 +1,83 @@
import type { ThunkDispatch } from '@reduxjs/toolkit'
import type { MaybePromise, UnwrapPromise } from './tsHelpers'
export interface BaseQueryApi {
signal: AbortSignal
abort: (reason?: string) => void
dispatch: ThunkDispatch<any, any, any>
getState: () => unknown
extra: unknown
endpoint: string
type: 'query' | 'mutation'
/**
* Only available for queries: indicates if a query has been forced,
* i.e. it would have been fetched even if there would already be a cache entry
* (this does not mean that there is already a cache entry though!)
*
* This can be used to for example add a `Cache-Control: no-cache` header for
* invalidated queries.
*/
forced?: boolean
}
export type QueryReturnValue<T = unknown, E = unknown, M = unknown> =
| {
error: E
data?: undefined
meta?: M
}
| {
error?: undefined
data: T
meta?: M
}
export type BaseQueryFn<
Args = any,
Result = unknown,
Error = unknown,
DefinitionExtraOptions = {},
Meta = {}
> = (
args: Args,
api: BaseQueryApi,
extraOptions: DefinitionExtraOptions
) => MaybePromise<QueryReturnValue<Result, Error, Meta>>
export type BaseQueryEnhancer<
AdditionalArgs = unknown,
AdditionalDefinitionExtraOptions = unknown,
Config = void
> = <BaseQuery extends BaseQueryFn>(
baseQuery: BaseQuery,
config: Config
) => BaseQueryFn<
BaseQueryArg<BaseQuery> & AdditionalArgs,
BaseQueryResult<BaseQuery>,
BaseQueryError<BaseQuery>,
BaseQueryExtraOptions<BaseQuery> & AdditionalDefinitionExtraOptions,
NonNullable<BaseQueryMeta<BaseQuery>>
>
export type BaseQueryResult<BaseQuery extends BaseQueryFn> = UnwrapPromise<
ReturnType<BaseQuery>
> extends infer Unwrapped
? Unwrapped extends { data: any }
? Unwrapped['data']
: never
: never
export type BaseQueryMeta<BaseQuery extends BaseQueryFn> = UnwrapPromise<
ReturnType<BaseQuery>
>['meta']
export type BaseQueryError<BaseQuery extends BaseQueryFn> = Exclude<
UnwrapPromise<ReturnType<BaseQuery>>,
{ error?: undefined }
>['error']
export type BaseQueryArg<T extends (arg: any, ...args: any[]) => any> =
T extends (arg: infer A, ...args: any[]) => any ? A : any
export type BaseQueryExtraOptions<BaseQuery extends BaseQueryFn> =
Parameters<BaseQuery>[2]

View File

@@ -0,0 +1,269 @@
import type { SerializedError } from '@reduxjs/toolkit'
import type { BaseQueryError } from '../baseQueryTypes'
import type {
QueryDefinition,
MutationDefinition,
EndpointDefinitions,
BaseEndpointDefinition,
ResultTypeFrom,
QueryArgFrom,
} from '../endpointDefinitions'
import type { Id, WithRequiredProp } from '../tsHelpers'
export type QueryCacheKey = string & { _type: 'queryCacheKey' }
export type QuerySubstateIdentifier = { queryCacheKey: QueryCacheKey }
export type MutationSubstateIdentifier =
| {
requestId: string
fixedCacheKey?: string
}
| {
requestId?: string
fixedCacheKey: string
}
export type RefetchConfigOptions = {
refetchOnMountOrArgChange: boolean | number
refetchOnReconnect: boolean
refetchOnFocus: boolean
}
/**
* Strings describing the query state at any given time.
*/
export enum QueryStatus {
uninitialized = 'uninitialized',
pending = 'pending',
fulfilled = 'fulfilled',
rejected = 'rejected',
}
export type RequestStatusFlags =
| {
status: QueryStatus.uninitialized
isUninitialized: true
isLoading: false
isSuccess: false
isError: false
}
| {
status: QueryStatus.pending
isUninitialized: false
isLoading: true
isSuccess: false
isError: false
}
| {
status: QueryStatus.fulfilled
isUninitialized: false
isLoading: false
isSuccess: true
isError: false
}
| {
status: QueryStatus.rejected
isUninitialized: false
isLoading: false
isSuccess: false
isError: true
}
export function getRequestStatusFlags(status: QueryStatus): RequestStatusFlags {
return {
status,
isUninitialized: status === QueryStatus.uninitialized,
isLoading: status === QueryStatus.pending,
isSuccess: status === QueryStatus.fulfilled,
isError: status === QueryStatus.rejected,
} as any
}
export type SubscriptionOptions = {
/**
* How frequently to automatically re-fetch data (in milliseconds). Defaults to `0` (off).
*/
pollingInterval?: number
/**
* Defaults to `false`. This setting allows you to control whether RTK Query will try to refetch all subscribed queries after regaining a network connection.
*
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
*
* Note: requires [`setupListeners`](./setupListeners) to have been called.
*/
refetchOnReconnect?: boolean
/**
* Defaults to `false`. This setting allows you to control whether RTK Query will try to refetch all subscribed queries after the application window regains focus.
*
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
*
* Note: requires [`setupListeners`](./setupListeners) to have been called.
*/
refetchOnFocus?: boolean
}
export type Subscribers = { [requestId: string]: SubscriptionOptions }
export type QueryKeys<Definitions extends EndpointDefinitions> = {
[K in keyof Definitions]: Definitions[K] extends QueryDefinition<
any,
any,
any,
any
>
? K
: never
}[keyof Definitions]
export type MutationKeys<Definitions extends EndpointDefinitions> = {
[K in keyof Definitions]: Definitions[K] extends MutationDefinition<
any,
any,
any,
any
>
? K
: never
}[keyof Definitions]
type BaseQuerySubState<D extends BaseEndpointDefinition<any, any, any>> = {
/**
* The argument originally passed into the hook or `initiate` action call
*/
originalArgs: QueryArgFrom<D>
/**
* A unique ID associated with the request
*/
requestId: string
/**
* The received data from the query
*/
data?: ResultTypeFrom<D>
/**
* The received error if applicable
*/
error?:
| SerializedError
| (D extends QueryDefinition<any, infer BaseQuery, any, any>
? BaseQueryError<BaseQuery>
: never)
/**
* The name of the endpoint associated with the query
*/
endpointName: string
/**
* Time that the latest query started
*/
startedTimeStamp: number
/**
* Time that the latest query was fulfilled
*/
fulfilledTimeStamp?: number
}
export type QuerySubState<D extends BaseEndpointDefinition<any, any, any>> = Id<
| ({
status: QueryStatus.fulfilled
} & WithRequiredProp<
BaseQuerySubState<D>,
'data' | 'fulfilledTimeStamp'
> & { error: undefined })
| ({
status: QueryStatus.pending
} & BaseQuerySubState<D>)
| ({
status: QueryStatus.rejected
} & WithRequiredProp<BaseQuerySubState<D>, 'error'>)
| {
status: QueryStatus.uninitialized
originalArgs?: undefined
data?: undefined
error?: undefined
requestId?: undefined
endpointName?: string
startedTimeStamp?: undefined
fulfilledTimeStamp?: undefined
}
>
type BaseMutationSubState<D extends BaseEndpointDefinition<any, any, any>> = {
requestId: string
data?: ResultTypeFrom<D>
error?:
| SerializedError
| (D extends MutationDefinition<any, infer BaseQuery, any, any>
? BaseQueryError<BaseQuery>
: never)
endpointName: string
startedTimeStamp: number
fulfilledTimeStamp?: number
}
export type MutationSubState<D extends BaseEndpointDefinition<any, any, any>> =
| (({
status: QueryStatus.fulfilled
} & WithRequiredProp<
BaseMutationSubState<D>,
'data' | 'fulfilledTimeStamp'
>) & { error: undefined })
| (({
status: QueryStatus.pending
} & BaseMutationSubState<D>) & { data?: undefined })
| ({
status: QueryStatus.rejected
} & WithRequiredProp<BaseMutationSubState<D>, 'error'>)
| {
requestId?: undefined
status: QueryStatus.uninitialized
data?: undefined
error?: undefined
endpointName?: string
startedTimeStamp?: undefined
fulfilledTimeStamp?: undefined
}
export type CombinedState<
D extends EndpointDefinitions,
E extends string,
ReducerPath extends string
> = {
queries: QueryState<D>
mutations: MutationState<D>
provided: InvalidationState<E>
subscriptions: SubscriptionState
config: ConfigState<ReducerPath>
}
export type InvalidationState<TagTypes extends string> = {
[_ in TagTypes]: {
[id: string]: Array<QueryCacheKey>
[id: number]: Array<QueryCacheKey>
}
}
export type QueryState<D extends EndpointDefinitions> = {
[queryCacheKey: string]: QuerySubState<D[string]> | undefined
}
export type SubscriptionState = {
[queryCacheKey: string]: Subscribers | undefined
}
export type ConfigState<ReducerPath> = RefetchConfigOptions & {
reducerPath: ReducerPath
online: boolean
focused: boolean
middlewareRegistered: boolean | 'conflict'
} & ModifiableConfigState
export type ModifiableConfigState = {
keepUnusedDataFor: number
} & RefetchConfigOptions
export type MutationState<D extends EndpointDefinitions> = {
[requestId: string]: MutationSubState<D[string]> | undefined
}
export type RootState<
Definitions extends EndpointDefinitions,
TagTypes extends string,
ReducerPath extends string
> = {
[P in ReducerPath]: CombinedState<Definitions, TagTypes, P>
}

View File

@@ -0,0 +1,495 @@
import type {
EndpointDefinitions,
QueryDefinition,
MutationDefinition,
QueryArgFrom,
ResultTypeFrom,
} from '../endpointDefinitions'
import { DefinitionType, isQueryDefinition } from '../endpointDefinitions'
import type { QueryThunk, MutationThunk, QueryThunkArg } from './buildThunks'
import type { AnyAction, ThunkAction, SerializedError } from '@reduxjs/toolkit'
import type { SubscriptionOptions, RootState } from './apiState'
import type { InternalSerializeQueryArgs } from '../defaultSerializeQueryArgs'
import type { Api, ApiContext } from '../apiTypes'
import type { ApiEndpointQuery } from './module'
import type { BaseQueryError, QueryReturnValue } from '../baseQueryTypes'
import type { QueryResultSelectorResult } from './buildSelectors'
import type { Dispatch } from 'redux'
import { isNotNullish } from '../utils/isNotNullish'
declare module './module' {
export interface ApiEndpointQuery<
Definition extends QueryDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> {
initiate: StartQueryActionCreator<Definition>
}
export interface ApiEndpointMutation<
Definition extends MutationDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> {
initiate: StartMutationActionCreator<Definition>
}
}
export const forceQueryFnSymbol = Symbol('forceQueryFn')
export const isUpsertQuery = (arg: QueryThunkArg) =>
typeof arg[forceQueryFnSymbol] === 'function'
export interface StartQueryActionCreatorOptions {
subscribe?: boolean
forceRefetch?: boolean | number
subscriptionOptions?: SubscriptionOptions
[forceQueryFnSymbol]?: () => QueryReturnValue
}
type StartQueryActionCreator<
D extends QueryDefinition<any, any, any, any, any>
> = (
arg: QueryArgFrom<D>,
options?: StartQueryActionCreatorOptions
) => ThunkAction<QueryActionCreatorResult<D>, any, any, AnyAction>
export type QueryActionCreatorResult<
D extends QueryDefinition<any, any, any, any>
> = Promise<QueryResultSelectorResult<D>> & {
arg: QueryArgFrom<D>
requestId: string
subscriptionOptions: SubscriptionOptions | undefined
abort(): void
unwrap(): Promise<ResultTypeFrom<D>>
unsubscribe(): void
refetch(): QueryActionCreatorResult<D>
updateSubscriptionOptions(options: SubscriptionOptions): void
queryCacheKey: string
}
type StartMutationActionCreator<
D extends MutationDefinition<any, any, any, any>
> = (
arg: QueryArgFrom<D>,
options?: {
/**
* If this mutation should be tracked in the store.
* If you just want to manually trigger this mutation using `dispatch` and don't care about the
* result, state & potential errors being held in store, you can set this to false.
* (defaults to `true`)
*/
track?: boolean
fixedCacheKey?: string
}
) => ThunkAction<MutationActionCreatorResult<D>, any, any, AnyAction>
export type MutationActionCreatorResult<
D extends MutationDefinition<any, any, any, any>
> = Promise<
| { data: ResultTypeFrom<D> }
| {
error:
| Exclude<
BaseQueryError<
D extends MutationDefinition<any, infer BaseQuery, any, any>
? BaseQuery
: never
>,
undefined
>
| SerializedError
}
> & {
/** @internal */
arg: {
/**
* The name of the given endpoint for the mutation
*/
endpointName: string
/**
* The original arguments supplied to the mutation call
*/
originalArgs: QueryArgFrom<D>
/**
* Whether the mutation is being tracked in the store.
*/
track?: boolean
fixedCacheKey?: string
}
/**
* A unique string generated for the request sequence
*/
requestId: string
/**
* A method to cancel the mutation promise. Note that this is not intended to prevent the mutation
* that was fired off from reaching the server, but only to assist in handling the response.
*
* Calling `abort()` prior to the promise resolving will force it to reach the error state with
* the serialized error:
* `{ name: 'AbortError', message: 'Aborted' }`
*
* @example
* ```ts
* const [updateUser] = useUpdateUserMutation();
*
* useEffect(() => {
* const promise = updateUser(id);
* promise
* .unwrap()
* .catch((err) => {
* if (err.name === 'AbortError') return;
* // else handle the unexpected error
* })
*
* return () => {
* promise.abort();
* }
* }, [id, updateUser])
* ```
*/
abort(): void
/**
* Unwraps a mutation call to provide the raw response/error.
*
* @remarks
* If you need to access the error or success payload immediately after a mutation, you can chain .unwrap().
*
* @example
* ```ts
* // codeblock-meta title="Using .unwrap"
* addPost({ id: 1, name: 'Example' })
* .unwrap()
* .then((payload) => console.log('fulfilled', payload))
* .catch((error) => console.error('rejected', error));
* ```
*
* @example
* ```ts
* // codeblock-meta title="Using .unwrap with async await"
* try {
* const payload = await addPost({ id: 1, name: 'Example' }).unwrap();
* console.log('fulfilled', payload)
* } catch (error) {
* console.error('rejected', error);
* }
* ```
*/
unwrap(): Promise<ResultTypeFrom<D>>
/**
* A method to manually unsubscribe from the mutation call, meaning it will be removed from cache after the usual caching grace period.
The value returned by the hook will reset to `isUninitialized` afterwards.
*/
reset(): void
/** @deprecated has been renamed to `reset` */
unsubscribe(): void
}
export function buildInitiate({
serializeQueryArgs,
queryThunk,
mutationThunk,
api,
context,
}: {
serializeQueryArgs: InternalSerializeQueryArgs
queryThunk: QueryThunk
mutationThunk: MutationThunk
api: Api<any, EndpointDefinitions, any, any>
context: ApiContext<EndpointDefinitions>
}) {
const runningQueries: Map<
Dispatch,
Record<string, QueryActionCreatorResult<any> | undefined>
> = new Map()
const runningMutations: Map<
Dispatch,
Record<string, MutationActionCreatorResult<any> | undefined>
> = new Map()
const {
unsubscribeQueryResult,
removeMutationResult,
updateSubscriptionOptions,
} = api.internalActions
return {
buildInitiateQuery,
buildInitiateMutation,
getRunningQueryThunk,
getRunningMutationThunk,
getRunningQueriesThunk,
getRunningMutationsThunk,
getRunningOperationPromises,
removalWarning,
}
/** @deprecated to be removed in 2.0 */
function removalWarning(): never {
throw new Error(
`This method had to be removed due to a conceptual bug in RTK.
Please see https://github.com/reduxjs/redux-toolkit/pull/2481 for details.
See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for new guidance on SSR.`
)
}
/** @deprecated to be removed in 2.0 */
function getRunningOperationPromises() {
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
removalWarning()
} else {
const extract = <T>(
v: Map<Dispatch<AnyAction>, Record<string, T | undefined>>
) =>
Array.from(v.values()).flatMap((queriesForStore) =>
queriesForStore ? Object.values(queriesForStore) : []
)
return [...extract(runningQueries), ...extract(runningMutations)].filter(
isNotNullish
)
}
}
function getRunningQueryThunk(endpointName: string, queryArgs: any) {
return (dispatch: Dispatch) => {
const endpointDefinition = context.endpointDefinitions[endpointName]
const queryCacheKey = serializeQueryArgs({
queryArgs,
endpointDefinition,
endpointName,
})
return runningQueries.get(dispatch)?.[queryCacheKey] as
| QueryActionCreatorResult<never>
| undefined
}
}
function getRunningMutationThunk(
/**
* this is only here to allow TS to infer the result type by input value
* we could use it to validate the result, but it's probably not necessary
*/
_endpointName: string,
fixedCacheKeyOrRequestId: string
) {
return (dispatch: Dispatch) => {
return runningMutations.get(dispatch)?.[fixedCacheKeyOrRequestId] as
| MutationActionCreatorResult<never>
| undefined
}
}
function getRunningQueriesThunk() {
return (dispatch: Dispatch) =>
Object.values(runningQueries.get(dispatch) || {}).filter(isNotNullish)
}
function getRunningMutationsThunk() {
return (dispatch: Dispatch) =>
Object.values(runningMutations.get(dispatch) || {}).filter(isNotNullish)
}
function middlewareWarning(dispatch: Dispatch) {
if (process.env.NODE_ENV !== 'production') {
if ((middlewareWarning as any).triggered) return
const registered:
| ReturnType<typeof api.internalActions.internal_probeSubscription>
| boolean = dispatch(
api.internalActions.internal_probeSubscription({
queryCacheKey: 'DOES_NOT_EXIST',
requestId: 'DUMMY_REQUEST_ID',
})
)
;(middlewareWarning as any).triggered = true
// The RTKQ middleware _should_ always return a boolean for `probeSubscription`
if (typeof registered !== 'boolean') {
// Otherwise, must not have been added
throw new Error(
`Warning: Middleware for RTK-Query API at reducerPath "${api.reducerPath}" has not been added to the store.
You must add the middleware for RTK-Query to function correctly!`
)
}
}
}
function buildInitiateQuery(
endpointName: string,
endpointDefinition: QueryDefinition<any, any, any, any>
) {
const queryAction: StartQueryActionCreator<any> =
(
arg,
{
subscribe = true,
forceRefetch,
subscriptionOptions,
[forceQueryFnSymbol]: forceQueryFn,
} = {}
) =>
(dispatch, getState) => {
const queryCacheKey = serializeQueryArgs({
queryArgs: arg,
endpointDefinition,
endpointName,
})
const thunk = queryThunk({
type: 'query',
subscribe,
forceRefetch: forceRefetch,
subscriptionOptions,
endpointName,
originalArgs: arg,
queryCacheKey,
[forceQueryFnSymbol]: forceQueryFn,
})
const selector = (
api.endpoints[endpointName] as ApiEndpointQuery<any, any>
).select(arg)
const thunkResult = dispatch(thunk)
const stateAfter = selector(getState())
middlewareWarning(dispatch)
const { requestId, abort } = thunkResult
const skippedSynchronously = stateAfter.requestId !== requestId
const runningQuery = runningQueries.get(dispatch)?.[queryCacheKey]
const selectFromState = () => selector(getState())
const statePromise: QueryActionCreatorResult<any> = Object.assign(
forceQueryFn
? // a query has been forced (upsertQueryData)
// -> we want to resolve it once data has been written with the data that will be written
thunkResult.then(selectFromState)
: skippedSynchronously && !runningQuery
? // a query has been skipped due to a condition and we do not have any currently running query
// -> we want to resolve it immediately with the current data
Promise.resolve(stateAfter)
: // query just started or one is already in flight
// -> wait for the running query, then resolve with data from after that
Promise.all([runningQuery, thunkResult]).then(selectFromState),
{
arg,
requestId,
subscriptionOptions,
queryCacheKey,
abort,
async unwrap() {
const result = await statePromise
if (result.isError) {
throw result.error
}
return result.data
},
refetch: () =>
dispatch(
queryAction(arg, { subscribe: false, forceRefetch: true })
),
unsubscribe() {
if (subscribe)
dispatch(
unsubscribeQueryResult({
queryCacheKey,
requestId,
})
)
},
updateSubscriptionOptions(options: SubscriptionOptions) {
statePromise.subscriptionOptions = options
dispatch(
updateSubscriptionOptions({
endpointName,
requestId,
queryCacheKey,
options,
})
)
},
}
)
if (!runningQuery && !skippedSynchronously && !forceQueryFn) {
const running = runningQueries.get(dispatch) || {}
running[queryCacheKey] = statePromise
runningQueries.set(dispatch, running)
statePromise.then(() => {
delete running[queryCacheKey]
if (!Object.keys(running).length) {
runningQueries.delete(dispatch)
}
})
}
return statePromise
}
return queryAction
}
function buildInitiateMutation(
endpointName: string
): StartMutationActionCreator<any> {
return (arg, { track = true, fixedCacheKey } = {}) =>
(dispatch, getState) => {
const thunk = mutationThunk({
type: 'mutation',
endpointName,
originalArgs: arg,
track,
fixedCacheKey,
})
const thunkResult = dispatch(thunk)
middlewareWarning(dispatch)
const { requestId, abort, unwrap } = thunkResult
const returnValuePromise = thunkResult
.unwrap()
.then((data) => ({ data }))
.catch((error) => ({ error }))
const reset = () => {
dispatch(removeMutationResult({ requestId, fixedCacheKey }))
}
const ret = Object.assign(returnValuePromise, {
arg: thunkResult.arg,
requestId,
abort,
unwrap,
unsubscribe: reset,
reset,
})
const running = runningMutations.get(dispatch) || {}
runningMutations.set(dispatch, running)
running[requestId] = ret
ret.then(() => {
delete running[requestId]
if (!Object.keys(running).length) {
runningMutations.delete(dispatch)
}
})
if (fixedCacheKey) {
running[fixedCacheKey] = ret
ret.then(() => {
if (running[fixedCacheKey] === ret) {
delete running[fixedCacheKey]
if (!Object.keys(running).length) {
runningMutations.delete(dispatch)
}
}
})
}
return ret
}
}
}

View File

@@ -0,0 +1,162 @@
import type { QueryThunk, RejectedAction } from '../buildThunks'
import type { InternalHandlerBuilder } from './types'
import type {
SubscriptionState,
QuerySubstateIdentifier,
Subscribers,
} from '../apiState'
import { produceWithPatches } from 'immer'
import type { AnyAction } from '@reduxjs/toolkit';
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
// Copied from https://github.com/feross/queue-microtask
let promise: Promise<any>
const queueMicrotaskShim =
typeof queueMicrotask === 'function'
? queueMicrotask.bind(
typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: globalThis
)
: // reuse resolved promise, and allocate it lazily
(cb: () => void) =>
(promise || (promise = Promise.resolve())).then(cb).catch((err: any) =>
setTimeout(() => {
throw err
}, 0)
)
export const buildBatchedActionsHandler: InternalHandlerBuilder<
[actionShouldContinue: boolean, subscriptionExists: boolean]
> = ({ api, queryThunk, internalState }) => {
const subscriptionsPrefix = `${api.reducerPath}/subscriptions`
let previousSubscriptions: SubscriptionState =
null as unknown as SubscriptionState
let dispatchQueued = false
const { updateSubscriptionOptions, unsubscribeQueryResult } =
api.internalActions
// Actually intentionally mutate the subscriptions state used in the middleware
// This is done to speed up perf when loading many components
const actuallyMutateSubscriptions = (
mutableState: SubscriptionState,
action: AnyAction
) => {
if (updateSubscriptionOptions.match(action)) {
const { queryCacheKey, requestId, options } = action.payload
if (mutableState?.[queryCacheKey]?.[requestId]) {
mutableState[queryCacheKey]![requestId] = options
}
return true
}
if (unsubscribeQueryResult.match(action)) {
const { queryCacheKey, requestId } = action.payload
if (mutableState[queryCacheKey]) {
delete mutableState[queryCacheKey]![requestId]
}
return true
}
if (api.internalActions.removeQueryResult.match(action)) {
delete mutableState[action.payload.queryCacheKey]
return true
}
if (queryThunk.pending.match(action)) {
const {
meta: { arg, requestId },
} = action
if (arg.subscribe) {
const substate = (mutableState[arg.queryCacheKey] ??= {})
substate[requestId] =
arg.subscriptionOptions ?? substate[requestId] ?? {}
return true
}
}
if (queryThunk.rejected.match(action)) {
const {
meta: { condition, arg, requestId },
} = action
if (condition && arg.subscribe) {
const substate = (mutableState[arg.queryCacheKey] ??= {})
substate[requestId] =
arg.subscriptionOptions ?? substate[requestId] ?? {}
return true
}
}
return false
}
return (action, mwApi) => {
if (!previousSubscriptions) {
// Initialize it the first time this handler runs
previousSubscriptions = JSON.parse(
JSON.stringify(internalState.currentSubscriptions)
)
}
if (api.util.resetApiState.match(action)) {
previousSubscriptions = internalState.currentSubscriptions = {}
return [true, false]
}
// Intercept requests by hooks to see if they're subscribed
// Necessary because we delay updating store state to the end of the tick
if (api.internalActions.internal_probeSubscription.match(action)) {
const { queryCacheKey, requestId } = action.payload
const hasSubscription =
!!internalState.currentSubscriptions[queryCacheKey]?.[requestId]
return [false, hasSubscription]
}
// Update subscription data based on this action
const didMutate = actuallyMutateSubscriptions(
internalState.currentSubscriptions,
action
)
if (didMutate) {
if (!dispatchQueued) {
queueMicrotaskShim(() => {
// Deep clone the current subscription data
const newSubscriptions: SubscriptionState = JSON.parse(
JSON.stringify(internalState.currentSubscriptions)
)
// Figure out a smaller diff between original and current
const [, patches] = produceWithPatches(
previousSubscriptions,
() => newSubscriptions
)
// Sync the store state for visibility
mwApi.next(api.internalActions.subscriptionsUpdated(patches))
// Save the cloned state for later reference
previousSubscriptions = newSubscriptions
dispatchQueued = false
})
dispatchQueued = true
}
const isSubscriptionSliceAction =
!!action.type?.startsWith(subscriptionsPrefix)
const isAdditionalSubscriptionAction =
queryThunk.rejected.match(action) &&
action.meta.condition &&
!!action.meta.arg.subscribe
const actionShouldContinue =
!isSubscriptionSliceAction && !isAdditionalSubscriptionAction
return [actionShouldContinue, false]
}
return [true, false]
}
}

View File

@@ -0,0 +1,145 @@
import type { BaseQueryFn } from '../../baseQueryTypes'
import type { QueryDefinition } from '../../endpointDefinitions'
import type { ConfigState, QueryCacheKey } from '../apiState'
import type {
QueryStateMeta,
SubMiddlewareApi,
TimeoutId,
InternalHandlerBuilder,
ApiMiddlewareInternalHandler,
InternalMiddlewareState,
} from './types'
export type ReferenceCacheCollection = never
function isObjectEmpty(obj: Record<any, any>) {
// Apparently a for..in loop is faster than `Object.keys()` here:
// https://stackoverflow.com/a/59787784/62937
for (let k in obj) {
// If there is at least one key, it's not empty
return false
}
return true
}
declare module '../../endpointDefinitions' {
interface QueryExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
/**
* Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only. _(This value is in seconds.)_
*
* This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
*/
keepUnusedDataFor?: number
}
}
// Per https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value , browsers store
// `setTimeout()` timer values in a 32-bit int. If we pass a value in that's larger than that,
// it wraps and ends up executing immediately.
// Our `keepUnusedDataFor` values are in seconds, so adjust the numbers here accordingly.
export const THIRTY_TWO_BIT_MAX_INT = 2_147_483_647
export const THIRTY_TWO_BIT_MAX_TIMER_SECONDS = 2_147_483_647 / 1_000 - 1
export const buildCacheCollectionHandler: InternalHandlerBuilder = ({
reducerPath,
api,
context,
internalState,
}) => {
const { removeQueryResult, unsubscribeQueryResult } = api.internalActions
function anySubscriptionsRemainingForKey(queryCacheKey: string) {
const subscriptions = internalState.currentSubscriptions[queryCacheKey]
return !!subscriptions && !isObjectEmpty(subscriptions)
}
const currentRemovalTimeouts: QueryStateMeta<TimeoutId> = {}
const handler: ApiMiddlewareInternalHandler = (
action,
mwApi,
internalState
) => {
if (unsubscribeQueryResult.match(action)) {
const state = mwApi.getState()[reducerPath]
const { queryCacheKey } = action.payload
handleUnsubscribe(
queryCacheKey,
state.queries[queryCacheKey]?.endpointName,
mwApi,
state.config
)
}
if (api.util.resetApiState.match(action)) {
for (const [key, timeout] of Object.entries(currentRemovalTimeouts)) {
if (timeout) clearTimeout(timeout)
delete currentRemovalTimeouts[key]
}
}
if (context.hasRehydrationInfo(action)) {
const state = mwApi.getState()[reducerPath]
const { queries } = context.extractRehydrationInfo(action)!
for (const [queryCacheKey, queryState] of Object.entries(queries)) {
// Gotcha:
// If rehydrating before the endpoint has been injected,the global `keepUnusedDataFor`
// will be used instead of the endpoint-specific one.
handleUnsubscribe(
queryCacheKey as QueryCacheKey,
queryState?.endpointName,
mwApi,
state.config
)
}
}
}
function handleUnsubscribe(
queryCacheKey: QueryCacheKey,
endpointName: string | undefined,
api: SubMiddlewareApi,
config: ConfigState<string>
) {
const endpointDefinition = context.endpointDefinitions[
endpointName!
] as QueryDefinition<any, any, any, any>
const keepUnusedDataFor =
endpointDefinition?.keepUnusedDataFor ?? config.keepUnusedDataFor
if (keepUnusedDataFor === Infinity) {
// Hey, user said keep this forever!
return
}
// Prevent `setTimeout` timers from overflowing a 32-bit internal int, by
// clamping the max value to be at most 1000ms less than the 32-bit max.
// Look, a 24.8-day keepalive ought to be enough for anybody, right? :)
// Also avoid negative values too.
const finalKeepUnusedDataFor = Math.max(
0,
Math.min(keepUnusedDataFor, THIRTY_TWO_BIT_MAX_TIMER_SECONDS)
)
if (!anySubscriptionsRemainingForKey(queryCacheKey)) {
const currentTimeout = currentRemovalTimeouts[queryCacheKey]
if (currentTimeout) {
clearTimeout(currentTimeout)
}
currentRemovalTimeouts[queryCacheKey] = setTimeout(() => {
if (!anySubscriptionsRemainingForKey(queryCacheKey)) {
api.dispatch(removeQueryResult({ queryCacheKey }))
}
delete currentRemovalTimeouts![queryCacheKey]
}, finalKeepUnusedDataFor * 1000)
}
}
return handler
}

View File

@@ -0,0 +1,331 @@
import { isAsyncThunkAction, isFulfilled } from '@reduxjs/toolkit'
import type { AnyAction } from 'redux'
import type { ThunkDispatch } from 'redux-thunk'
import type { BaseQueryFn, BaseQueryMeta } from '../../baseQueryTypes'
import { DefinitionType } from '../../endpointDefinitions'
import type { RootState } from '../apiState'
import type {
MutationResultSelectorResult,
QueryResultSelectorResult,
} from '../buildSelectors'
import { getMutationCacheKey } from '../buildSlice'
import type { PatchCollection, Recipe } from '../buildThunks'
import type {
ApiMiddlewareInternalHandler,
InternalHandlerBuilder,
PromiseWithKnownReason,
SubMiddlewareApi,
} from './types'
export type ReferenceCacheLifecycle = never
declare module '../../endpointDefinitions' {
export interface QueryBaseLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends LifecycleApi<ReducerPath> {
/**
* Gets the current value of this cache entry.
*/
getCacheEntry(): QueryResultSelectorResult<
{ type: DefinitionType.query } & BaseEndpointDefinition<
QueryArg,
BaseQuery,
ResultType
>
>
/**
* Updates the current cache entry value.
* For documentation see `api.util.updateQueryData`.
*/
updateCachedData(updateRecipe: Recipe<ResultType>): PatchCollection
}
export interface MutationBaseLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends LifecycleApi<ReducerPath> {
/**
* Gets the current value of this cache entry.
*/
getCacheEntry(): MutationResultSelectorResult<
{ type: DefinitionType.mutation } & BaseEndpointDefinition<
QueryArg,
BaseQuery,
ResultType
>
>
}
export interface LifecycleApi<ReducerPath extends string = string> {
/**
* The dispatch method for the store
*/
dispatch: ThunkDispatch<any, any, AnyAction>
/**
* A method to get the current state
*/
getState(): RootState<any, any, ReducerPath>
/**
* `extra` as provided as `thunk.extraArgument` to the `configureStore` `getDefaultMiddleware` option.
*/
extra: unknown
/**
* A unique ID generated for the mutation
*/
requestId: string
}
export interface CacheLifecyclePromises<
ResultType = unknown,
MetaType = unknown
> {
/**
* Promise that will resolve with the first value for this cache key.
* This allows you to `await` until an actual value is in cache.
*
* If the cache entry is removed from the cache before any value has ever
* been resolved, this Promise will reject with
* `new Error('Promise never resolved before cacheEntryRemoved.')`
* to prevent memory leaks.
* You can just re-throw that error (or not handle it at all) -
* it will be caught outside of `cacheEntryAdded`.
*
* If you don't interact with this promise, it will not throw.
*/
cacheDataLoaded: PromiseWithKnownReason<
{
/**
* The (transformed) query result.
*/
data: ResultType
/**
* The `meta` returned by the `baseQuery`
*/
meta: MetaType
},
typeof neverResolvedError
>
/**
* Promise that allows you to wait for the point in time when the cache entry
* has been removed from the cache, by not being used/subscribed to any more
* in the application for too long or by dispatching `api.util.resetApiState`.
*/
cacheEntryRemoved: Promise<void>
}
export interface QueryCacheLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends QueryBaseLifecycleApi<QueryArg, BaseQuery, ResultType, ReducerPath>,
CacheLifecyclePromises<ResultType, BaseQueryMeta<BaseQuery>> {}
export interface MutationCacheLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends MutationBaseLifecycleApi<
QueryArg,
BaseQuery,
ResultType,
ReducerPath
>,
CacheLifecyclePromises<ResultType, BaseQueryMeta<BaseQuery>> {}
interface QueryExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
onCacheEntryAdded?(
arg: QueryArg,
api: QueryCacheLifecycleApi<QueryArg, BaseQuery, ResultType, ReducerPath>
): Promise<void> | void
}
interface MutationExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
onCacheEntryAdded?(
arg: QueryArg,
api: MutationCacheLifecycleApi<
QueryArg,
BaseQuery,
ResultType,
ReducerPath
>
): Promise<void> | void
}
}
const neverResolvedError = new Error(
'Promise never resolved before cacheEntryRemoved.'
) as Error & {
message: 'Promise never resolved before cacheEntryRemoved.'
}
export const buildCacheLifecycleHandler: InternalHandlerBuilder = ({
api,
reducerPath,
context,
queryThunk,
mutationThunk,
internalState,
}) => {
const isQueryThunk = isAsyncThunkAction(queryThunk)
const isMutationThunk = isAsyncThunkAction(mutationThunk)
const isFulfilledThunk = isFulfilled(queryThunk, mutationThunk)
type CacheLifecycle = {
valueResolved?(value: { data: unknown; meta: unknown }): unknown
cacheEntryRemoved(): void
}
const lifecycleMap: Record<string, CacheLifecycle> = {}
const handler: ApiMiddlewareInternalHandler = (
action,
mwApi,
stateBefore
) => {
const cacheKey = getCacheKey(action)
if (queryThunk.pending.match(action)) {
const oldState = stateBefore[reducerPath].queries[cacheKey]
const state = mwApi.getState()[reducerPath].queries[cacheKey]
if (!oldState && state) {
handleNewKey(
action.meta.arg.endpointName,
action.meta.arg.originalArgs,
cacheKey,
mwApi,
action.meta.requestId
)
}
} else if (mutationThunk.pending.match(action)) {
const state = mwApi.getState()[reducerPath].mutations[cacheKey]
if (state) {
handleNewKey(
action.meta.arg.endpointName,
action.meta.arg.originalArgs,
cacheKey,
mwApi,
action.meta.requestId
)
}
} else if (isFulfilledThunk(action)) {
const lifecycle = lifecycleMap[cacheKey]
if (lifecycle?.valueResolved) {
lifecycle.valueResolved({
data: action.payload,
meta: action.meta.baseQueryMeta,
})
delete lifecycle.valueResolved
}
} else if (
api.internalActions.removeQueryResult.match(action) ||
api.internalActions.removeMutationResult.match(action)
) {
const lifecycle = lifecycleMap[cacheKey]
if (lifecycle) {
delete lifecycleMap[cacheKey]
lifecycle.cacheEntryRemoved()
}
} else if (api.util.resetApiState.match(action)) {
for (const [cacheKey, lifecycle] of Object.entries(lifecycleMap)) {
delete lifecycleMap[cacheKey]
lifecycle.cacheEntryRemoved()
}
}
}
function getCacheKey(action: any) {
if (isQueryThunk(action)) return action.meta.arg.queryCacheKey
if (isMutationThunk(action)) return action.meta.requestId
if (api.internalActions.removeQueryResult.match(action))
return action.payload.queryCacheKey
if (api.internalActions.removeMutationResult.match(action))
return getMutationCacheKey(action.payload)
return ''
}
function handleNewKey(
endpointName: string,
originalArgs: any,
queryCacheKey: string,
mwApi: SubMiddlewareApi,
requestId: string
) {
const endpointDefinition = context.endpointDefinitions[endpointName]
const onCacheEntryAdded = endpointDefinition?.onCacheEntryAdded
if (!onCacheEntryAdded) return
let lifecycle = {} as CacheLifecycle
const cacheEntryRemoved = new Promise<void>((resolve) => {
lifecycle.cacheEntryRemoved = resolve
})
const cacheDataLoaded: PromiseWithKnownReason<
{ data: unknown; meta: unknown },
typeof neverResolvedError
> = Promise.race([
new Promise<{ data: unknown; meta: unknown }>((resolve) => {
lifecycle.valueResolved = resolve
}),
cacheEntryRemoved.then(() => {
throw neverResolvedError
}),
])
// prevent uncaught promise rejections from happening.
// if the original promise is used in any way, that will create a new promise that will throw again
cacheDataLoaded.catch(() => {})
lifecycleMap[queryCacheKey] = lifecycle
const selector = (api.endpoints[endpointName] as any).select(
endpointDefinition.type === DefinitionType.query
? originalArgs
: queryCacheKey
)
const extra = mwApi.dispatch((_, __, extra) => extra)
const lifecycleApi = {
...mwApi,
getCacheEntry: () => selector(mwApi.getState()),
requestId,
extra,
updateCachedData: (endpointDefinition.type === DefinitionType.query
? (updateRecipe: Recipe<any>) =>
mwApi.dispatch(
api.util.updateQueryData(
endpointName as never,
originalArgs,
updateRecipe
)
)
: undefined) as any,
cacheDataLoaded,
cacheEntryRemoved,
}
const runningHandler = onCacheEntryAdded(originalArgs, lifecycleApi)
// if a `neverResolvedError` was thrown, but not handled in the running handler, do not let it leak out further
Promise.resolve(runningHandler).catch((e) => {
if (e === neverResolvedError) return
throw e
})
}
return handler
}

View File

@@ -0,0 +1,34 @@
import type { InternalHandlerBuilder } from './types'
export const buildDevCheckHandler: InternalHandlerBuilder = ({
api,
context: { apiUid },
reducerPath,
}) => {
return (action, mwApi) => {
if (api.util.resetApiState.match(action)) {
// dispatch after api reset
mwApi.dispatch(api.internalActions.middlewareRegistered(apiUid))
}
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
if (
api.internalActions.middlewareRegistered.match(action) &&
action.payload === apiUid &&
mwApi.getState()[reducerPath]?.config?.middlewareRegistered ===
'conflict'
) {
console.warn(`There is a mismatch between slice and middleware for the reducerPath "${reducerPath}".
You can only have one api per reducer path, this will lead to crashes in various situations!${
reducerPath === 'api'
? `
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
: ''
}`)
}
}
}
}

View File

@@ -0,0 +1,150 @@
import type { AnyAction, Middleware, ThunkDispatch } from '@reduxjs/toolkit'
import { createAction } from '@reduxjs/toolkit'
import type {
EndpointDefinitions,
FullTagDescription,
} from '../../endpointDefinitions'
import type { QueryStatus, QuerySubState, RootState } from '../apiState'
import type { QueryThunkArg } from '../buildThunks'
import { buildCacheCollectionHandler } from './cacheCollection'
import { buildInvalidationByTagsHandler } from './invalidationByTags'
import { buildPollingHandler } from './polling'
import type {
BuildMiddlewareInput,
InternalHandlerBuilder,
InternalMiddlewareState,
} from './types'
import { buildWindowEventHandler } from './windowEventHandling'
import { buildCacheLifecycleHandler } from './cacheLifecycle'
import { buildQueryLifecycleHandler } from './queryLifecycle'
import { buildDevCheckHandler } from './devMiddleware'
import { buildBatchedActionsHandler } from './batchActions'
export function buildMiddleware<
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string
>(input: BuildMiddlewareInput<Definitions, ReducerPath, TagTypes>) {
const { reducerPath, queryThunk, api, context } = input
const { apiUid } = context
const actions = {
invalidateTags: createAction<
Array<TagTypes | FullTagDescription<TagTypes>>
>(`${reducerPath}/invalidateTags`),
}
const isThisApiSliceAction = (action: AnyAction) => {
return (
!!action &&
typeof action.type === 'string' &&
action.type.startsWith(`${reducerPath}/`)
)
}
const handlerBuilders: InternalHandlerBuilder[] = [
buildDevCheckHandler,
buildCacheCollectionHandler,
buildInvalidationByTagsHandler,
buildPollingHandler,
buildCacheLifecycleHandler,
buildQueryLifecycleHandler,
]
const middleware: Middleware<
{},
RootState<Definitions, string, ReducerPath>,
ThunkDispatch<any, any, AnyAction>
> = (mwApi) => {
let initialized = false
let internalState: InternalMiddlewareState = {
currentSubscriptions: {},
}
const builderArgs = {
...(input as any as BuildMiddlewareInput<
EndpointDefinitions,
string,
string
>),
internalState,
refetchQuery,
}
const handlers = handlerBuilders.map((build) => build(builderArgs))
const batchedActionsHandler = buildBatchedActionsHandler(builderArgs)
const windowEventsHandler = buildWindowEventHandler(builderArgs)
return (next) => {
return (action) => {
if (!initialized) {
initialized = true
// dispatch before any other action
mwApi.dispatch(api.internalActions.middlewareRegistered(apiUid))
}
const mwApiWithNext = { ...mwApi, next }
const stateBefore = mwApi.getState()
const [actionShouldContinue, hasSubscription] = batchedActionsHandler(
action,
mwApiWithNext,
stateBefore
)
let res: any
if (actionShouldContinue) {
res = next(action)
} else {
res = hasSubscription
}
if (!!mwApi.getState()[reducerPath]) {
// Only run these checks if the middleware is registered okay
// This looks for actions that aren't specific to the API slice
windowEventsHandler(action, mwApiWithNext, stateBefore)
if (
isThisApiSliceAction(action) ||
context.hasRehydrationInfo(action)
) {
// Only run these additional checks if the actions are part of the API slice,
// or the action has hydration-related data
for (let handler of handlers) {
handler(action, mwApiWithNext, stateBefore)
}
}
}
return res
}
}
}
return { middleware, actions }
function refetchQuery(
querySubState: Exclude<
QuerySubState<any>,
{ status: QueryStatus.uninitialized }
>,
queryCacheKey: string,
override: Partial<QueryThunkArg> = {}
) {
return queryThunk({
type: 'query',
endpointName: querySubState.endpointName,
originalArgs: querySubState.originalArgs,
subscribe: false,
forceRefetch: true,
queryCacheKey: queryCacheKey as any,
...override,
})
}
}

View File

@@ -0,0 +1,88 @@
import { isAnyOf, isFulfilled, isRejectedWithValue } from '@reduxjs/toolkit'
import type { FullTagDescription } from '../../endpointDefinitions'
import { calculateProvidedBy } from '../../endpointDefinitions'
import type { QueryCacheKey } from '../apiState'
import { QueryStatus } from '../apiState'
import { calculateProvidedByThunk } from '../buildThunks'
import type {
SubMiddlewareApi,
InternalHandlerBuilder,
ApiMiddlewareInternalHandler,
} from './types'
export const buildInvalidationByTagsHandler: InternalHandlerBuilder = ({
reducerPath,
context,
context: { endpointDefinitions },
mutationThunk,
api,
assertTagType,
refetchQuery,
}) => {
const { removeQueryResult } = api.internalActions
const isThunkActionWithTags = isAnyOf(
isFulfilled(mutationThunk),
isRejectedWithValue(mutationThunk)
)
const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
if (isThunkActionWithTags(action)) {
invalidateTags(
calculateProvidedByThunk(
action,
'invalidatesTags',
endpointDefinitions,
assertTagType
),
mwApi
)
}
if (api.util.invalidateTags.match(action)) {
invalidateTags(
calculateProvidedBy(
action.payload,
undefined,
undefined,
undefined,
undefined,
assertTagType
),
mwApi
)
}
}
function invalidateTags(
tags: readonly FullTagDescription<string>[],
mwApi: SubMiddlewareApi
) {
const rootState = mwApi.getState()
const state = rootState[reducerPath]
const toInvalidate = api.util.selectInvalidatedBy(rootState, tags)
context.batch(() => {
const valuesArray = Array.from(toInvalidate.values())
for (const { queryCacheKey } of valuesArray) {
const querySubState = state.queries[queryCacheKey]
const subscriptionSubState = state.subscriptions[queryCacheKey] ?? {}
if (querySubState) {
if (Object.keys(subscriptionSubState).length === 0) {
mwApi.dispatch(
removeQueryResult({
queryCacheKey: queryCacheKey as QueryCacheKey,
})
)
} else if (querySubState.status !== QueryStatus.uninitialized) {
mwApi.dispatch(refetchQuery(querySubState, queryCacheKey))
}
}
}
})
}
return handler
}

View File

@@ -0,0 +1,142 @@
import type { QuerySubstateIdentifier, Subscribers } from '../apiState'
import { QueryStatus } from '../apiState'
import type {
QueryStateMeta,
SubMiddlewareApi,
TimeoutId,
InternalHandlerBuilder,
ApiMiddlewareInternalHandler,
InternalMiddlewareState,
} from './types'
export const buildPollingHandler: InternalHandlerBuilder = ({
reducerPath,
queryThunk,
api,
refetchQuery,
internalState,
}) => {
const currentPolls: QueryStateMeta<{
nextPollTimestamp: number
timeout?: TimeoutId
pollingInterval: number
}> = {}
const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
if (
api.internalActions.updateSubscriptionOptions.match(action) ||
api.internalActions.unsubscribeQueryResult.match(action)
) {
updatePollingInterval(action.payload, mwApi)
}
if (
queryThunk.pending.match(action) ||
(queryThunk.rejected.match(action) && action.meta.condition)
) {
updatePollingInterval(action.meta.arg, mwApi)
}
if (
queryThunk.fulfilled.match(action) ||
(queryThunk.rejected.match(action) && !action.meta.condition)
) {
startNextPoll(action.meta.arg, mwApi)
}
if (api.util.resetApiState.match(action)) {
clearPolls()
}
}
function startNextPoll(
{ queryCacheKey }: QuerySubstateIdentifier,
api: SubMiddlewareApi
) {
const state = api.getState()[reducerPath]
const querySubState = state.queries[queryCacheKey]
const subscriptions = internalState.currentSubscriptions[queryCacheKey]
if (!querySubState || querySubState.status === QueryStatus.uninitialized)
return
const lowestPollingInterval = findLowestPollingInterval(subscriptions)
if (!Number.isFinite(lowestPollingInterval)) return
const currentPoll = currentPolls[queryCacheKey]
if (currentPoll?.timeout) {
clearTimeout(currentPoll.timeout)
currentPoll.timeout = undefined
}
const nextPollTimestamp = Date.now() + lowestPollingInterval
const currentInterval: typeof currentPolls[number] = (currentPolls[
queryCacheKey
] = {
nextPollTimestamp,
pollingInterval: lowestPollingInterval,
timeout: setTimeout(() => {
currentInterval!.timeout = undefined
api.dispatch(refetchQuery(querySubState, queryCacheKey))
}, lowestPollingInterval),
})
}
function updatePollingInterval(
{ queryCacheKey }: QuerySubstateIdentifier,
api: SubMiddlewareApi
) {
const state = api.getState()[reducerPath]
const querySubState = state.queries[queryCacheKey]
const subscriptions = internalState.currentSubscriptions[queryCacheKey]
if (!querySubState || querySubState.status === QueryStatus.uninitialized) {
return
}
const lowestPollingInterval = findLowestPollingInterval(subscriptions)
if (!Number.isFinite(lowestPollingInterval)) {
cleanupPollForKey(queryCacheKey)
return
}
const currentPoll = currentPolls[queryCacheKey]
const nextPollTimestamp = Date.now() + lowestPollingInterval
if (!currentPoll || nextPollTimestamp < currentPoll.nextPollTimestamp) {
startNextPoll({ queryCacheKey }, api)
}
}
function cleanupPollForKey(key: string) {
const existingPoll = currentPolls[key]
if (existingPoll?.timeout) {
clearTimeout(existingPoll.timeout)
}
delete currentPolls[key]
}
function clearPolls() {
for (const key of Object.keys(currentPolls)) {
cleanupPollForKey(key)
}
}
function findLowestPollingInterval(subscribers: Subscribers = {}) {
let lowestPollingInterval = Number.POSITIVE_INFINITY
for (let key in subscribers) {
if (!!subscribers[key].pollingInterval) {
lowestPollingInterval = Math.min(
subscribers[key].pollingInterval!,
lowestPollingInterval
)
}
}
return lowestPollingInterval
}
return handler
}

View File

@@ -0,0 +1,287 @@
import { isPending, isRejected, isFulfilled } from '@reduxjs/toolkit'
import type {
BaseQueryError,
BaseQueryFn,
BaseQueryMeta,
} from '../../baseQueryTypes'
import { DefinitionType } from '../../endpointDefinitions'
import type { QueryFulfilledRejectionReason } from '../../endpointDefinitions'
import type { Recipe } from '../buildThunks'
import type {
PromiseWithKnownReason,
PromiseConstructorWithKnownReason,
InternalHandlerBuilder,
ApiMiddlewareInternalHandler,
} from './types'
export type ReferenceQueryLifecycle = never
declare module '../../endpointDefinitions' {
export interface QueryLifecyclePromises<
ResultType,
BaseQuery extends BaseQueryFn
> {
/**
* Promise that will resolve with the (transformed) query result.
*
* If the query fails, this promise will reject with the error.
*
* This allows you to `await` for the query to finish.
*
* If you don't interact with this promise, it will not throw.
*/
queryFulfilled: PromiseWithKnownReason<
{
/**
* The (transformed) query result.
*/
data: ResultType
/**
* The `meta` returned by the `baseQuery`
*/
meta: BaseQueryMeta<BaseQuery>
},
QueryFulfilledRejectionReason<BaseQuery>
>
}
type QueryFulfilledRejectionReason<BaseQuery extends BaseQueryFn> =
| {
error: BaseQueryError<BaseQuery>
/**
* If this is `false`, that means this error was returned from the `baseQuery` or `queryFn` in a controlled manner.
*/
isUnhandledError: false
/**
* The `meta` returned by the `baseQuery`
*/
meta: BaseQueryMeta<BaseQuery>
}
| {
error: unknown
meta?: undefined
/**
* If this is `true`, that means that this error is the result of `baseQueryFn`, `queryFn`, `transformResponse` or `transformErrorResponse` throwing an error instead of handling it properly.
* There can not be made any assumption about the shape of `error`.
*/
isUnhandledError: true
}
interface QueryExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
/**
* A function that is called when the individual query is started. The function is called with a lifecycle api object containing properties such as `queryFulfilled`, allowing code to be run when a query is started, when it succeeds, and when it fails (i.e. throughout the lifecycle of an individual query/mutation call).
*
* Can be used to perform side-effects throughout the lifecycle of the query.
*
* @example
* ```ts
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
* import { messageCreated } from './notificationsSlice
* export interface Post {
* id: number
* name: string
* }
*
* const api = createApi({
* baseQuery: fetchBaseQuery({
* baseUrl: '/',
* }),
* endpoints: (build) => ({
* getPost: build.query<Post, number>({
* query: (id) => `post/${id}`,
* async onQueryStarted(id, { dispatch, queryFulfilled }) {
* // `onStart` side-effect
* dispatch(messageCreated('Fetching posts...'))
* try {
* const { data } = await queryFulfilled
* // `onSuccess` side-effect
* dispatch(messageCreated('Posts received!'))
* } catch (err) {
* // `onError` side-effect
* dispatch(messageCreated('Error fetching posts!'))
* }
* }
* }),
* }),
* })
* ```
*/
onQueryStarted?(
arg: QueryArg,
api: QueryLifecycleApi<QueryArg, BaseQuery, ResultType, ReducerPath>
): Promise<void> | void
}
interface MutationExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
/**
* A function that is called when the individual mutation is started. The function is called with a lifecycle api object containing properties such as `queryFulfilled`, allowing code to be run when a query is started, when it succeeds, and when it fails (i.e. throughout the lifecycle of an individual query/mutation call).
*
* Can be used for `optimistic updates`.
*
* @example
*
* ```ts
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
* export interface Post {
* id: number
* name: string
* }
*
* const api = createApi({
* baseQuery: fetchBaseQuery({
* baseUrl: '/',
* }),
* tagTypes: ['Post'],
* endpoints: (build) => ({
* getPost: build.query<Post, number>({
* query: (id) => `post/${id}`,
* providesTags: ['Post'],
* }),
* updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
* query: ({ id, ...patch }) => ({
* url: `post/${id}`,
* method: 'PATCH',
* body: patch,
* }),
* invalidatesTags: ['Post'],
* async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
* const patchResult = dispatch(
* api.util.updateQueryData('getPost', id, (draft) => {
* Object.assign(draft, patch)
* })
* )
* try {
* await queryFulfilled
* } catch {
* patchResult.undo()
* }
* },
* }),
* }),
* })
* ```
*/
onQueryStarted?(
arg: QueryArg,
api: MutationLifecycleApi<QueryArg, BaseQuery, ResultType, ReducerPath>
): Promise<void> | void
}
export interface QueryLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends QueryBaseLifecycleApi<QueryArg, BaseQuery, ResultType, ReducerPath>,
QueryLifecyclePromises<ResultType, BaseQuery> {}
export interface MutationLifecycleApi<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType,
ReducerPath extends string = string
> extends MutationBaseLifecycleApi<
QueryArg,
BaseQuery,
ResultType,
ReducerPath
>,
QueryLifecyclePromises<ResultType, BaseQuery> {}
}
export const buildQueryLifecycleHandler: InternalHandlerBuilder = ({
api,
context,
queryThunk,
mutationThunk,
}) => {
const isPendingThunk = isPending(queryThunk, mutationThunk)
const isRejectedThunk = isRejected(queryThunk, mutationThunk)
const isFullfilledThunk = isFulfilled(queryThunk, mutationThunk)
type CacheLifecycle = {
resolve(value: { data: unknown; meta: unknown }): unknown
reject(value: QueryFulfilledRejectionReason<any>): unknown
}
const lifecycleMap: Record<string, CacheLifecycle> = {}
const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
if (isPendingThunk(action)) {
const {
requestId,
arg: { endpointName, originalArgs },
} = action.meta
const endpointDefinition = context.endpointDefinitions[endpointName]
const onQueryStarted = endpointDefinition?.onQueryStarted
if (onQueryStarted) {
const lifecycle = {} as CacheLifecycle
const queryFulfilled =
new (Promise as PromiseConstructorWithKnownReason)<
{ data: unknown; meta: unknown },
QueryFulfilledRejectionReason<any>
>((resolve, reject) => {
lifecycle.resolve = resolve
lifecycle.reject = reject
})
// prevent uncaught promise rejections from happening.
// if the original promise is used in any way, that will create a new promise that will throw again
queryFulfilled.catch(() => {})
lifecycleMap[requestId] = lifecycle
const selector = (api.endpoints[endpointName] as any).select(
endpointDefinition.type === DefinitionType.query
? originalArgs
: requestId
)
const extra = mwApi.dispatch((_, __, extra) => extra)
const lifecycleApi = {
...mwApi,
getCacheEntry: () => selector(mwApi.getState()),
requestId,
extra,
updateCachedData: (endpointDefinition.type === DefinitionType.query
? (updateRecipe: Recipe<any>) =>
mwApi.dispatch(
api.util.updateQueryData(
endpointName as never,
originalArgs,
updateRecipe
)
)
: undefined) as any,
queryFulfilled,
}
onQueryStarted(originalArgs, lifecycleApi)
}
} else if (isFullfilledThunk(action)) {
const { requestId, baseQueryMeta } = action.meta
lifecycleMap[requestId]?.resolve({
data: action.payload,
meta: baseQueryMeta,
})
delete lifecycleMap[requestId]
} else if (isRejectedThunk(action)) {
const { requestId, rejectedWithValue, baseQueryMeta } = action.meta
lifecycleMap[requestId]?.reject({
error: action.payload ?? action.error,
isUnhandledError: !rejectedWithValue,
meta: baseQueryMeta as any,
})
delete lifecycleMap[requestId]
}
}
return handler
}

View File

@@ -0,0 +1,129 @@
import type {
AnyAction,
AsyncThunkAction,
Dispatch,
Middleware,
MiddlewareAPI,
ThunkDispatch,
} from '@reduxjs/toolkit'
import type { Api, ApiContext } from '../../apiTypes'
import type {
AssertTagTypes,
EndpointDefinitions,
} from '../../endpointDefinitions'
import type {
QueryStatus,
QuerySubState,
RootState,
SubscriptionState,
} from '../apiState'
import type {
MutationThunk,
QueryThunk,
QueryThunkArg,
ThunkResult,
} from '../buildThunks'
export type QueryStateMeta<T> = Record<string, undefined | T>
export type TimeoutId = ReturnType<typeof setTimeout>
export interface InternalMiddlewareState {
currentSubscriptions: SubscriptionState
}
export interface BuildMiddlewareInput<
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string
> {
reducerPath: ReducerPath
context: ApiContext<Definitions>
queryThunk: QueryThunk
mutationThunk: MutationThunk
api: Api<any, Definitions, ReducerPath, TagTypes>
assertTagType: AssertTagTypes
}
export type SubMiddlewareApi = MiddlewareAPI<
ThunkDispatch<any, any, AnyAction>,
RootState<EndpointDefinitions, string, string>
>
export interface BuildSubMiddlewareInput
extends BuildMiddlewareInput<EndpointDefinitions, string, string> {
internalState: InternalMiddlewareState
refetchQuery(
querySubState: Exclude<
QuerySubState<any>,
{ status: QueryStatus.uninitialized }
>,
queryCacheKey: string,
override?: Partial<QueryThunkArg>
): AsyncThunkAction<ThunkResult, QueryThunkArg, {}>
}
export type SubMiddlewareBuilder = (
input: BuildSubMiddlewareInput
) => Middleware<
{},
RootState<EndpointDefinitions, string, string>,
ThunkDispatch<any, any, AnyAction>
>
export type ApiMiddlewareInternalHandler<ReturnType = void> = (
action: AnyAction,
mwApi: SubMiddlewareApi & { next: Dispatch<AnyAction> },
prevState: RootState<EndpointDefinitions, string, string>
) => ReturnType
export type InternalHandlerBuilder<ReturnType = void> = (
input: BuildSubMiddlewareInput
) => ApiMiddlewareInternalHandler<ReturnType>
export interface PromiseConstructorWithKnownReason {
/**
* Creates a new Promise with a known rejection reason.
* @param executor A callback used to initialize the promise. This callback is passed two arguments:
* a resolve callback used to resolve the promise with a value or the result of another promise,
* and a reject callback used to reject the promise with a provided reason or error.
*/
new <T, R>(
executor: (
resolve: (value: T | PromiseLike<T>) => void,
reject: (reason?: R) => void
) => void
): PromiseWithKnownReason<T, R>
}
export interface PromiseWithKnownReason<T, R>
extends Omit<Promise<T>, 'then' | 'catch'> {
/**
* Attaches callbacks for the resolution and/or rejection of the Promise.
* @param onfulfilled The callback to execute when the Promise is resolved.
* @param onrejected The callback to execute when the Promise is rejected.
* @returns A Promise for the completion of which ever callback is executed.
*/
then<TResult1 = T, TResult2 = never>(
onfulfilled?:
| ((value: T) => TResult1 | PromiseLike<TResult1>)
| undefined
| null,
onrejected?:
| ((reason: R) => TResult2 | PromiseLike<TResult2>)
| undefined
| null
): Promise<TResult1 | TResult2>
/**
* Attaches a callback for only the rejection of the Promise.
* @param onrejected The callback to execute when the Promise is rejected.
* @returns A Promise for the completion of the callback.
*/
catch<TResult = never>(
onrejected?:
| ((reason: R) => TResult | PromiseLike<TResult>)
| undefined
| null
): Promise<T | TResult>
}

View File

@@ -0,0 +1,68 @@
import { QueryStatus } from '../apiState'
import type { QueryCacheKey } from '../apiState'
import { onFocus, onOnline } from '../setupListeners'
import type {
ApiMiddlewareInternalHandler,
InternalHandlerBuilder,
SubMiddlewareApi,
} from './types'
export const buildWindowEventHandler: InternalHandlerBuilder = ({
reducerPath,
context,
api,
refetchQuery,
internalState,
}) => {
const { removeQueryResult } = api.internalActions
const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
if (onFocus.match(action)) {
refetchValidQueries(mwApi, 'refetchOnFocus')
}
if (onOnline.match(action)) {
refetchValidQueries(mwApi, 'refetchOnReconnect')
}
}
function refetchValidQueries(
api: SubMiddlewareApi,
type: 'refetchOnFocus' | 'refetchOnReconnect'
) {
const state = api.getState()[reducerPath]
const queries = state.queries
const subscriptions = internalState.currentSubscriptions
context.batch(() => {
for (const queryCacheKey of Object.keys(subscriptions)) {
const querySubState = queries[queryCacheKey]
const subscriptionSubState = subscriptions[queryCacheKey]
if (!subscriptionSubState || !querySubState) continue
const shouldRefetch =
Object.values(subscriptionSubState).some(
(sub) => sub[type] === true
) ||
(Object.values(subscriptionSubState).every(
(sub) => sub[type] === undefined
) &&
state.config[type])
if (shouldRefetch) {
if (Object.keys(subscriptionSubState).length === 0) {
api.dispatch(
removeQueryResult({
queryCacheKey: queryCacheKey as QueryCacheKey,
})
)
} else if (querySubState.status !== QueryStatus.uninitialized) {
api.dispatch(refetchQuery(querySubState, queryCacheKey))
}
}
}
})
}
return handler
}

View File

@@ -0,0 +1,243 @@
import { createNextState, createSelector } from '@reduxjs/toolkit'
import type {
MutationSubState,
QuerySubState,
RootState as _RootState,
RequestStatusFlags,
QueryCacheKey,
} from './apiState'
import { QueryStatus, getRequestStatusFlags } from './apiState'
import type {
EndpointDefinitions,
QueryDefinition,
MutationDefinition,
QueryArgFrom,
TagTypesFrom,
ReducerPathFrom,
TagDescription,
} from '../endpointDefinitions'
import { expandTagDescription } from '../endpointDefinitions'
import type { InternalSerializeQueryArgs } from '../defaultSerializeQueryArgs'
import { getMutationCacheKey } from './buildSlice'
import { flatten } from '../utils'
export type SkipToken = typeof skipToken
/**
* Can be passed into `useQuery`, `useQueryState` or `useQuerySubscription`
* instead of the query argument to get the same effect as if setting
* `skip: true` in the query options.
*
* Useful for scenarios where a query should be skipped when `arg` is `undefined`
* and TypeScript complains about it because `arg` is not allowed to be passed
* in as `undefined`, such as
*
* ```ts
* // codeblock-meta title="will error if the query argument is not allowed to be undefined" no-transpile
* useSomeQuery(arg, { skip: !!arg })
* ```
*
* ```ts
* // codeblock-meta title="using skipToken instead" no-transpile
* useSomeQuery(arg ?? skipToken)
* ```
*
* If passed directly into a query or mutation selector, that selector will always
* return an uninitialized state.
*/
export const skipToken = /* @__PURE__ */ Symbol.for('RTKQ/skipToken')
/** @deprecated renamed to `skipToken` */
export const skipSelector = skipToken
declare module './module' {
export interface ApiEndpointQuery<
Definition extends QueryDefinition<any, any, any, any, any>,
Definitions extends EndpointDefinitions
> {
select: QueryResultSelectorFactory<
Definition,
_RootState<
Definitions,
TagTypesFrom<Definition>,
ReducerPathFrom<Definition>
>
>
}
export interface ApiEndpointMutation<
Definition extends MutationDefinition<any, any, any, any, any>,
Definitions extends EndpointDefinitions
> {
select: MutationResultSelectorFactory<
Definition,
_RootState<
Definitions,
TagTypesFrom<Definition>,
ReducerPathFrom<Definition>
>
>
}
}
type QueryResultSelectorFactory<
Definition extends QueryDefinition<any, any, any, any>,
RootState
> = (
queryArg: QueryArgFrom<Definition> | SkipToken
) => (state: RootState) => QueryResultSelectorResult<Definition>
export type QueryResultSelectorResult<
Definition extends QueryDefinition<any, any, any, any>
> = QuerySubState<Definition> & RequestStatusFlags
type MutationResultSelectorFactory<
Definition extends MutationDefinition<any, any, any, any>,
RootState
> = (
requestId:
| string
| { requestId: string | undefined; fixedCacheKey: string | undefined }
| SkipToken
) => (state: RootState) => MutationResultSelectorResult<Definition>
export type MutationResultSelectorResult<
Definition extends MutationDefinition<any, any, any, any>
> = MutationSubState<Definition> & RequestStatusFlags
const initialSubState: QuerySubState<any> = {
status: QueryStatus.uninitialized as const,
}
// abuse immer to freeze default states
const defaultQuerySubState = /* @__PURE__ */ createNextState(
initialSubState,
() => {}
)
const defaultMutationSubState = /* @__PURE__ */ createNextState(
initialSubState as MutationSubState<any>,
() => {}
)
export function buildSelectors<
Definitions extends EndpointDefinitions,
ReducerPath extends string
>({
serializeQueryArgs,
reducerPath,
}: {
serializeQueryArgs: InternalSerializeQueryArgs
reducerPath: ReducerPath
}) {
type RootState = _RootState<Definitions, string, string>
const selectSkippedQuery = (state: RootState) => defaultQuerySubState
const selectSkippedMutation = (state: RootState) => defaultMutationSubState
return { buildQuerySelector, buildMutationSelector, selectInvalidatedBy }
function withRequestFlags<T extends { status: QueryStatus }>(
substate: T
): T & RequestStatusFlags {
return {
...substate,
...getRequestStatusFlags(substate.status),
}
}
function selectInternalState(rootState: RootState) {
const state = rootState[reducerPath]
if (process.env.NODE_ENV !== 'production') {
if (!state) {
if ((selectInternalState as any).triggered) return state
;(selectInternalState as any).triggered = true
console.error(
`Error: No data found at \`state.${reducerPath}\`. Did you forget to add the reducer to the store?`
)
}
}
return state
}
function buildQuerySelector(
endpointName: string,
endpointDefinition: QueryDefinition<any, any, any, any>
) {
return ((queryArgs: any) => {
const serializedArgs = serializeQueryArgs({
queryArgs,
endpointDefinition,
endpointName,
})
const selectQuerySubstate = (state: RootState) =>
selectInternalState(state)?.queries?.[serializedArgs] ??
defaultQuerySubState
const finalSelectQuerySubState =
queryArgs === skipToken ? selectSkippedQuery : selectQuerySubstate
return createSelector(finalSelectQuerySubState, withRequestFlags)
}) as QueryResultSelectorFactory<any, RootState>
}
function buildMutationSelector() {
return ((id) => {
let mutationId: string | typeof skipToken
if (typeof id === 'object') {
mutationId = getMutationCacheKey(id) ?? skipToken
} else {
mutationId = id
}
const selectMutationSubstate = (state: RootState) =>
selectInternalState(state)?.mutations?.[mutationId as string] ??
defaultMutationSubState
const finalSelectMutationSubstate =
mutationId === skipToken
? selectSkippedMutation
: selectMutationSubstate
return createSelector(finalSelectMutationSubstate, withRequestFlags)
}) as MutationResultSelectorFactory<any, RootState>
}
function selectInvalidatedBy(
state: RootState,
tags: ReadonlyArray<TagDescription<string>>
): Array<{
endpointName: string
originalArgs: any
queryCacheKey: QueryCacheKey
}> {
const apiState = state[reducerPath]
const toInvalidate = new Set<QueryCacheKey>()
for (const tag of tags.map(expandTagDescription)) {
const provided = apiState.provided[tag.type]
if (!provided) {
continue
}
let invalidateSubscriptions =
(tag.id !== undefined
? // id given: invalidate all queries that provide this type & id
provided[tag.id]
: // no id: invalidate all queries that provide this type
flatten(Object.values(provided))) ?? []
for (const invalidate of invalidateSubscriptions) {
toInvalidate.add(invalidate)
}
}
return flatten(
Array.from(toInvalidate.values()).map((queryCacheKey) => {
const querySubState = apiState.queries[queryCacheKey]
return querySubState
? [
{
queryCacheKey,
endpointName: querySubState.endpointName!,
originalArgs: querySubState.originalArgs,
},
]
: []
})
)
}
}

View File

@@ -0,0 +1,535 @@
import type { AnyAction, PayloadAction } from '@reduxjs/toolkit'
import {
combineReducers,
createAction,
createSlice,
isAnyOf,
isFulfilled,
isRejectedWithValue,
createNextState,
prepareAutoBatched,
} from '@reduxjs/toolkit'
import type {
CombinedState as CombinedQueryState,
QuerySubstateIdentifier,
QuerySubState,
MutationSubstateIdentifier,
MutationSubState,
MutationState,
QueryState,
InvalidationState,
Subscribers,
QueryCacheKey,
SubscriptionState,
ConfigState,
} from './apiState'
import { QueryStatus } from './apiState'
import type { MutationThunk, QueryThunk, RejectedAction } from './buildThunks'
import { calculateProvidedByThunk } from './buildThunks'
import type {
AssertTagTypes,
EndpointDefinitions,
FullTagDescription,
QueryDefinition,
} from '../endpointDefinitions'
import type { Patch } from 'immer'
import { isDraft } from 'immer'
import { applyPatches, original } from 'immer'
import { onFocus, onFocusLost, onOffline, onOnline } from './setupListeners'
import {
isDocumentVisible,
isOnline,
copyWithStructuralSharing,
} from '../utils'
import type { ApiContext } from '../apiTypes'
import { isUpsertQuery } from './buildInitiate'
function updateQuerySubstateIfExists(
state: QueryState<any>,
queryCacheKey: QueryCacheKey,
update: (substate: QuerySubState<any>) => void
) {
const substate = state[queryCacheKey]
if (substate) {
update(substate)
}
}
export function getMutationCacheKey(
id:
| MutationSubstateIdentifier
| { requestId: string; arg: { fixedCacheKey?: string | undefined } }
): string
export function getMutationCacheKey(id: {
fixedCacheKey?: string
requestId?: string
}): string | undefined
export function getMutationCacheKey(
id:
| { fixedCacheKey?: string; requestId?: string }
| MutationSubstateIdentifier
| { requestId: string; arg: { fixedCacheKey?: string | undefined } }
): string | undefined {
return ('arg' in id ? id.arg.fixedCacheKey : id.fixedCacheKey) ?? id.requestId
}
function updateMutationSubstateIfExists(
state: MutationState<any>,
id:
| MutationSubstateIdentifier
| { requestId: string; arg: { fixedCacheKey?: string | undefined } },
update: (substate: MutationSubState<any>) => void
) {
const substate = state[getMutationCacheKey(id)]
if (substate) {
update(substate)
}
}
const initialState = {} as any
export function buildSlice({
reducerPath,
queryThunk,
mutationThunk,
context: {
endpointDefinitions: definitions,
apiUid,
extractRehydrationInfo,
hasRehydrationInfo,
},
assertTagType,
config,
}: {
reducerPath: string
queryThunk: QueryThunk
mutationThunk: MutationThunk
context: ApiContext<EndpointDefinitions>
assertTagType: AssertTagTypes
config: Omit<
ConfigState<string>,
'online' | 'focused' | 'middlewareRegistered'
>
}) {
const resetApiState = createAction(`${reducerPath}/resetApiState`)
const querySlice = createSlice({
name: `${reducerPath}/queries`,
initialState: initialState as QueryState<any>,
reducers: {
removeQueryResult: {
reducer(
draft,
{ payload: { queryCacheKey } }: PayloadAction<QuerySubstateIdentifier>
) {
delete draft[queryCacheKey]
},
prepare: prepareAutoBatched<QuerySubstateIdentifier>(),
},
queryResultPatched: {
reducer(
draft,
{
payload: { queryCacheKey, patches },
}: PayloadAction<
QuerySubstateIdentifier & { patches: readonly Patch[] }
>
) {
updateQuerySubstateIfExists(draft, queryCacheKey, (substate) => {
substate.data = applyPatches(substate.data as any, patches.concat())
})
},
prepare: prepareAutoBatched<
QuerySubstateIdentifier & { patches: readonly Patch[] }
>(),
},
},
extraReducers(builder) {
builder
.addCase(queryThunk.pending, (draft, { meta, meta: { arg } }) => {
const upserting = isUpsertQuery(arg)
if (arg.subscribe || upserting) {
// only initialize substate if we want to subscribe to it
draft[arg.queryCacheKey] ??= {
status: QueryStatus.uninitialized,
endpointName: arg.endpointName,
}
}
updateQuerySubstateIfExists(draft, arg.queryCacheKey, (substate) => {
substate.status = QueryStatus.pending
substate.requestId =
upserting && substate.requestId
? // for `upsertQuery` **updates**, keep the current `requestId`
substate.requestId
: // for normal queries or `upsertQuery` **inserts** always update the `requestId`
meta.requestId
if (arg.originalArgs !== undefined) {
substate.originalArgs = arg.originalArgs
}
substate.startedTimeStamp = meta.startedTimeStamp
})
})
.addCase(queryThunk.fulfilled, (draft, { meta, payload }) => {
updateQuerySubstateIfExists(
draft,
meta.arg.queryCacheKey,
(substate) => {
if (
substate.requestId !== meta.requestId &&
!isUpsertQuery(meta.arg)
)
return
const { merge } = definitions[
meta.arg.endpointName
] as QueryDefinition<any, any, any, any>
substate.status = QueryStatus.fulfilled
if (merge) {
if (substate.data !== undefined) {
const { fulfilledTimeStamp, arg, baseQueryMeta, requestId } =
meta
// There's existing cache data. Let the user merge it in themselves.
// We're already inside an Immer-powered reducer, and the user could just mutate `substate.data`
// themselves inside of `merge()`. But, they might also want to return a new value.
// Try to let Immer figure that part out, save the result, and assign it to `substate.data`.
let newData = createNextState(
substate.data,
(draftSubstateData) => {
// As usual with Immer, you can mutate _or_ return inside here, but not both
return merge(draftSubstateData, payload, {
arg: arg.originalArgs,
baseQueryMeta,
fulfilledTimeStamp,
requestId,
})
}
)
substate.data = newData
} else {
// Presumably a fresh request. Just cache the response data.
substate.data = payload
}
} else {
// Assign or safely update the cache data.
substate.data =
definitions[meta.arg.endpointName].structuralSharing ?? true
? copyWithStructuralSharing(
isDraft(substate.data)
? original(substate.data)
: substate.data,
payload
)
: payload
}
delete substate.error
substate.fulfilledTimeStamp = meta.fulfilledTimeStamp
}
)
})
.addCase(
queryThunk.rejected,
(draft, { meta: { condition, arg, requestId }, error, payload }) => {
updateQuerySubstateIfExists(
draft,
arg.queryCacheKey,
(substate) => {
if (condition) {
// request was aborted due to condition (another query already running)
} else {
// request failed
if (substate.requestId !== requestId) return
substate.status = QueryStatus.rejected
substate.error = (payload ?? error) as any
}
}
)
}
)
.addMatcher(hasRehydrationInfo, (draft, action) => {
const { queries } = extractRehydrationInfo(action)!
for (const [key, entry] of Object.entries(queries)) {
if (
// do not rehydrate entries that were currently in flight.
entry?.status === QueryStatus.fulfilled ||
entry?.status === QueryStatus.rejected
) {
draft[key] = entry
}
}
})
},
})
const mutationSlice = createSlice({
name: `${reducerPath}/mutations`,
initialState: initialState as MutationState<any>,
reducers: {
removeMutationResult: {
reducer(draft, { payload }: PayloadAction<MutationSubstateIdentifier>) {
const cacheKey = getMutationCacheKey(payload)
if (cacheKey in draft) {
delete draft[cacheKey]
}
},
prepare: prepareAutoBatched<MutationSubstateIdentifier>(),
},
},
extraReducers(builder) {
builder
.addCase(
mutationThunk.pending,
(draft, { meta, meta: { requestId, arg, startedTimeStamp } }) => {
if (!arg.track) return
draft[getMutationCacheKey(meta)] = {
requestId,
status: QueryStatus.pending,
endpointName: arg.endpointName,
startedTimeStamp,
}
}
)
.addCase(mutationThunk.fulfilled, (draft, { payload, meta }) => {
if (!meta.arg.track) return
updateMutationSubstateIfExists(draft, meta, (substate) => {
if (substate.requestId !== meta.requestId) return
substate.status = QueryStatus.fulfilled
substate.data = payload
substate.fulfilledTimeStamp = meta.fulfilledTimeStamp
})
})
.addCase(mutationThunk.rejected, (draft, { payload, error, meta }) => {
if (!meta.arg.track) return
updateMutationSubstateIfExists(draft, meta, (substate) => {
if (substate.requestId !== meta.requestId) return
substate.status = QueryStatus.rejected
substate.error = (payload ?? error) as any
})
})
.addMatcher(hasRehydrationInfo, (draft, action) => {
const { mutations } = extractRehydrationInfo(action)!
for (const [key, entry] of Object.entries(mutations)) {
if (
// do not rehydrate entries that were currently in flight.
(entry?.status === QueryStatus.fulfilled ||
entry?.status === QueryStatus.rejected) &&
// only rehydrate endpoints that were persisted using a `fixedCacheKey`
key !== entry?.requestId
) {
draft[key] = entry
}
}
})
},
})
const invalidationSlice = createSlice({
name: `${reducerPath}/invalidation`,
initialState: initialState as InvalidationState<string>,
reducers: {
updateProvidedBy: {
reducer(
draft,
action: PayloadAction<{
queryCacheKey: QueryCacheKey
providedTags: readonly FullTagDescription<string>[]
}>
) {
const { queryCacheKey, providedTags } = action.payload
for (const tagTypeSubscriptions of Object.values(draft)) {
for (const idSubscriptions of Object.values(tagTypeSubscriptions)) {
const foundAt = idSubscriptions.indexOf(queryCacheKey)
if (foundAt !== -1) {
idSubscriptions.splice(foundAt, 1)
}
}
}
for (const { type, id } of providedTags) {
const subscribedQueries = ((draft[type] ??= {})[
id || '__internal_without_id'
] ??= [])
const alreadySubscribed = subscribedQueries.includes(queryCacheKey)
if (!alreadySubscribed) {
subscribedQueries.push(queryCacheKey)
}
}
},
prepare: prepareAutoBatched<{
queryCacheKey: QueryCacheKey
providedTags: readonly FullTagDescription<string>[]
}>(),
},
},
extraReducers(builder) {
builder
.addCase(
querySlice.actions.removeQueryResult,
(draft, { payload: { queryCacheKey } }) => {
for (const tagTypeSubscriptions of Object.values(draft)) {
for (const idSubscriptions of Object.values(
tagTypeSubscriptions
)) {
const foundAt = idSubscriptions.indexOf(queryCacheKey)
if (foundAt !== -1) {
idSubscriptions.splice(foundAt, 1)
}
}
}
}
)
.addMatcher(hasRehydrationInfo, (draft, action) => {
const { provided } = extractRehydrationInfo(action)!
for (const [type, incomingTags] of Object.entries(provided)) {
for (const [id, cacheKeys] of Object.entries(incomingTags)) {
const subscribedQueries = ((draft[type] ??= {})[
id || '__internal_without_id'
] ??= [])
for (const queryCacheKey of cacheKeys) {
const alreadySubscribed =
subscribedQueries.includes(queryCacheKey)
if (!alreadySubscribed) {
subscribedQueries.push(queryCacheKey)
}
}
}
}
})
.addMatcher(
isAnyOf(isFulfilled(queryThunk), isRejectedWithValue(queryThunk)),
(draft, action) => {
const providedTags = calculateProvidedByThunk(
action,
'providesTags',
definitions,
assertTagType
)
const { queryCacheKey } = action.meta.arg
invalidationSlice.caseReducers.updateProvidedBy(
draft,
invalidationSlice.actions.updateProvidedBy({
queryCacheKey,
providedTags,
})
)
}
)
},
})
// Dummy slice to generate actions
const subscriptionSlice = createSlice({
name: `${reducerPath}/subscriptions`,
initialState: initialState as SubscriptionState,
reducers: {
updateSubscriptionOptions(
d,
a: PayloadAction<
{
endpointName: string
requestId: string
options: Subscribers[number]
} & QuerySubstateIdentifier
>
) {
// Dummy
},
unsubscribeQueryResult(
d,
a: PayloadAction<{ requestId: string } & QuerySubstateIdentifier>
) {
// Dummy
},
internal_probeSubscription(
d,
a: PayloadAction<{ queryCacheKey: string; requestId: string }>
) {
// dummy
},
},
})
const internalSubscriptionsSlice = createSlice({
name: `${reducerPath}/internalSubscriptions`,
initialState: initialState as SubscriptionState,
reducers: {
subscriptionsUpdated: {
reducer(state, action: PayloadAction<Patch[]>) {
return applyPatches(state, action.payload)
},
prepare: prepareAutoBatched<Patch[]>(),
},
},
})
const configSlice = createSlice({
name: `${reducerPath}/config`,
initialState: {
online: isOnline(),
focused: isDocumentVisible(),
middlewareRegistered: false,
...config,
} as ConfigState<string>,
reducers: {
middlewareRegistered(state, { payload }: PayloadAction<string>) {
state.middlewareRegistered =
state.middlewareRegistered === 'conflict' || apiUid !== payload
? 'conflict'
: true
},
},
extraReducers: (builder) => {
builder
.addCase(onOnline, (state) => {
state.online = true
})
.addCase(onOffline, (state) => {
state.online = false
})
.addCase(onFocus, (state) => {
state.focused = true
})
.addCase(onFocusLost, (state) => {
state.focused = false
})
// update the state to be a new object to be picked up as a "state change"
// by redux-persist's `autoMergeLevel2`
.addMatcher(hasRehydrationInfo, (draft) => ({ ...draft }))
},
})
const combinedReducer = combineReducers<
CombinedQueryState<any, string, string>
>({
queries: querySlice.reducer,
mutations: mutationSlice.reducer,
provided: invalidationSlice.reducer,
subscriptions: internalSubscriptionsSlice.reducer,
config: configSlice.reducer,
})
const reducer: typeof combinedReducer = (state, action) =>
combinedReducer(resetApiState.match(action) ? undefined : state, action)
const actions = {
...configSlice.actions,
...querySlice.actions,
...subscriptionSlice.actions,
...internalSubscriptionsSlice.actions,
...mutationSlice.actions,
...invalidationSlice.actions,
/** @deprecated has been renamed to `removeMutationResult` */
unsubscribeMutationResult: mutationSlice.actions.removeMutationResult,
resetApiState,
}
return { reducer, actions }
}
export type SliceActions = ReturnType<typeof buildSlice>['actions']

View File

@@ -0,0 +1,678 @@
import type { InternalSerializeQueryArgs } from '../defaultSerializeQueryArgs'
import type { Api, ApiContext } from '../apiTypes'
import type {
BaseQueryFn,
BaseQueryError,
QueryReturnValue,
} from '../baseQueryTypes'
import type { RootState, QueryKeys, QuerySubstateIdentifier } from './apiState'
import { QueryStatus } from './apiState'
import type {
StartQueryActionCreatorOptions,
QueryActionCreatorResult,
} from './buildInitiate'
import { forceQueryFnSymbol, isUpsertQuery } from './buildInitiate'
import type {
AssertTagTypes,
EndpointDefinition,
EndpointDefinitions,
MutationDefinition,
QueryArgFrom,
QueryDefinition,
ResultTypeFrom,
FullTagDescription,
} from '../endpointDefinitions'
import { isQueryDefinition } from '../endpointDefinitions'
import { calculateProvidedBy } from '../endpointDefinitions'
import type { AsyncThunkPayloadCreator, Draft } from '@reduxjs/toolkit'
import {
isAllOf,
isFulfilled,
isPending,
isRejected,
isRejectedWithValue,
} from '@reduxjs/toolkit'
import type { Patch } from 'immer'
import { isDraftable, produceWithPatches } from 'immer'
import type {
AnyAction,
ThunkAction,
ThunkDispatch,
AsyncThunk,
} from '@reduxjs/toolkit'
import { createAsyncThunk, SHOULD_AUTOBATCH } from '@reduxjs/toolkit'
import { HandledError } from '../HandledError'
import type { ApiEndpointQuery, PrefetchOptions } from './module'
import type { UnwrapPromise } from '../tsHelpers'
declare module './module' {
export interface ApiEndpointQuery<
Definition extends QueryDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> extends Matchers<QueryThunk, Definition> {}
export interface ApiEndpointMutation<
Definition extends MutationDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> extends Matchers<MutationThunk, Definition> {}
}
type EndpointThunk<
Thunk extends QueryThunk | MutationThunk,
Definition extends EndpointDefinition<any, any, any, any>
> = Definition extends EndpointDefinition<
infer QueryArg,
infer BaseQueryFn,
any,
infer ResultType
>
? Thunk extends AsyncThunk<unknown, infer ATArg, infer ATConfig>
? AsyncThunk<
ResultType,
ATArg & { originalArgs: QueryArg },
ATConfig & { rejectValue: BaseQueryError<BaseQueryFn> }
>
: never
: never
export type PendingAction<
Thunk extends QueryThunk | MutationThunk,
Definition extends EndpointDefinition<any, any, any, any>
> = ReturnType<EndpointThunk<Thunk, Definition>['pending']>
export type FulfilledAction<
Thunk extends QueryThunk | MutationThunk,
Definition extends EndpointDefinition<any, any, any, any>
> = ReturnType<EndpointThunk<Thunk, Definition>['fulfilled']>
export type RejectedAction<
Thunk extends QueryThunk | MutationThunk,
Definition extends EndpointDefinition<any, any, any, any>
> = ReturnType<EndpointThunk<Thunk, Definition>['rejected']>
export type Matcher<M> = (value: any) => value is M
export interface Matchers<
Thunk extends QueryThunk | MutationThunk,
Definition extends EndpointDefinition<any, any, any, any>
> {
matchPending: Matcher<PendingAction<Thunk, Definition>>
matchFulfilled: Matcher<FulfilledAction<Thunk, Definition>>
matchRejected: Matcher<RejectedAction<Thunk, Definition>>
}
export interface QueryThunkArg
extends QuerySubstateIdentifier,
StartQueryActionCreatorOptions {
type: 'query'
originalArgs: unknown
endpointName: string
}
export interface MutationThunkArg {
type: 'mutation'
originalArgs: unknown
endpointName: string
track?: boolean
fixedCacheKey?: string
}
export type ThunkResult = unknown
export type ThunkApiMetaConfig = {
pendingMeta: {
startedTimeStamp: number
[SHOULD_AUTOBATCH]: true
}
fulfilledMeta: {
fulfilledTimeStamp: number
baseQueryMeta: unknown
[SHOULD_AUTOBATCH]: true
}
rejectedMeta: {
baseQueryMeta: unknown
[SHOULD_AUTOBATCH]: true
}
}
export type QueryThunk = AsyncThunk<
ThunkResult,
QueryThunkArg,
ThunkApiMetaConfig
>
export type MutationThunk = AsyncThunk<
ThunkResult,
MutationThunkArg,
ThunkApiMetaConfig
>
function defaultTransformResponse(baseQueryReturnValue: unknown) {
return baseQueryReturnValue
}
export type MaybeDrafted<T> = T | Draft<T>
export type Recipe<T> = (data: MaybeDrafted<T>) => void | MaybeDrafted<T>
export type UpsertRecipe<T> = (
data: MaybeDrafted<T> | undefined
) => void | MaybeDrafted<T>
export type PatchQueryDataThunk<
Definitions extends EndpointDefinitions,
PartialState
> = <EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
args: QueryArgFrom<Definitions[EndpointName]>,
patches: readonly Patch[],
updateProvided?: boolean
) => ThunkAction<void, PartialState, any, AnyAction>
export type UpdateQueryDataThunk<
Definitions extends EndpointDefinitions,
PartialState
> = <EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
args: QueryArgFrom<Definitions[EndpointName]>,
updateRecipe: Recipe<ResultTypeFrom<Definitions[EndpointName]>>,
updateProvided?: boolean
) => ThunkAction<PatchCollection, PartialState, any, AnyAction>
export type UpsertQueryDataThunk<
Definitions extends EndpointDefinitions,
PartialState
> = <EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
args: QueryArgFrom<Definitions[EndpointName]>,
value: ResultTypeFrom<Definitions[EndpointName]>
) => ThunkAction<
QueryActionCreatorResult<
Definitions[EndpointName] extends QueryDefinition<any, any, any, any>
? Definitions[EndpointName]
: never
>,
PartialState,
any,
AnyAction
>
/**
* An object returned from dispatching a `api.util.updateQueryData` call.
*/
export type PatchCollection = {
/**
* An `immer` Patch describing the cache update.
*/
patches: Patch[]
/**
* An `immer` Patch to revert the cache update.
*/
inversePatches: Patch[]
/**
* A function that will undo the cache update.
*/
undo: () => void
}
export function buildThunks<
BaseQuery extends BaseQueryFn,
ReducerPath extends string,
Definitions extends EndpointDefinitions
>({
reducerPath,
baseQuery,
context: { endpointDefinitions },
serializeQueryArgs,
api,
assertTagType,
}: {
baseQuery: BaseQuery
reducerPath: ReducerPath
context: ApiContext<Definitions>
serializeQueryArgs: InternalSerializeQueryArgs
api: Api<BaseQuery, Definitions, ReducerPath, any>
assertTagType: AssertTagTypes
}) {
type State = RootState<any, string, ReducerPath>
const patchQueryData: PatchQueryDataThunk<EndpointDefinitions, State> =
(endpointName, args, patches, updateProvided) => (dispatch, getState) => {
const endpointDefinition = endpointDefinitions[endpointName]
const queryCacheKey = serializeQueryArgs({
queryArgs: args,
endpointDefinition,
endpointName,
})
dispatch(
api.internalActions.queryResultPatched({ queryCacheKey, patches })
)
if (!updateProvided) {
return
}
const newValue = api.endpoints[endpointName].select(args)(
// Work around TS 4.1 mismatch
getState() as RootState<any, any, any>
)
const providedTags = calculateProvidedBy(
endpointDefinition.providesTags,
newValue.data,
undefined,
args,
{},
assertTagType
)
dispatch(
api.internalActions.updateProvidedBy({ queryCacheKey, providedTags })
)
}
const updateQueryData: UpdateQueryDataThunk<EndpointDefinitions, State> =
(endpointName, args, updateRecipe, updateProvided = true) =>
(dispatch, getState) => {
const endpointDefinition = api.endpoints[endpointName]
const currentState = endpointDefinition.select(args)(
// Work around TS 4.1 mismatch
getState() as RootState<any, any, any>
)
let ret: PatchCollection = {
patches: [],
inversePatches: [],
undo: () =>
dispatch(
api.util.patchQueryData(
endpointName,
args,
ret.inversePatches,
updateProvided
)
),
}
if (currentState.status === QueryStatus.uninitialized) {
return ret
}
let newValue
if ('data' in currentState) {
if (isDraftable(currentState.data)) {
const [value, patches, inversePatches] = produceWithPatches(
currentState.data,
updateRecipe
)
ret.patches.push(...patches)
ret.inversePatches.push(...inversePatches)
newValue = value
} else {
newValue = updateRecipe(currentState.data)
ret.patches.push({ op: 'replace', path: [], value: newValue })
ret.inversePatches.push({
op: 'replace',
path: [],
value: currentState.data,
})
}
}
dispatch(
api.util.patchQueryData(endpointName, args, ret.patches, updateProvided)
)
return ret
}
const upsertQueryData: UpsertQueryDataThunk<Definitions, State> =
(endpointName, args, value) => (dispatch) => {
return dispatch(
(
api.endpoints[endpointName] as ApiEndpointQuery<
QueryDefinition<any, any, any, any, any>,
Definitions
>
).initiate(args, {
subscribe: false,
forceRefetch: true,
[forceQueryFnSymbol]: () => ({
data: value,
}),
})
)
}
const executeEndpoint: AsyncThunkPayloadCreator<
ThunkResult,
QueryThunkArg | MutationThunkArg,
ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
> = async (
arg,
{
signal,
abort,
rejectWithValue,
fulfillWithValue,
dispatch,
getState,
extra,
}
) => {
const endpointDefinition = endpointDefinitions[arg.endpointName]
try {
let transformResponse: (
baseQueryReturnValue: any,
meta: any,
arg: any
) => any = defaultTransformResponse
let result: QueryReturnValue
const baseQueryApi = {
signal,
abort,
dispatch,
getState,
extra,
endpoint: arg.endpointName,
type: arg.type,
forced:
arg.type === 'query' ? isForcedQuery(arg, getState()) : undefined,
}
const forceQueryFn =
arg.type === 'query' ? arg[forceQueryFnSymbol] : undefined
if (forceQueryFn) {
result = forceQueryFn()
} else if (endpointDefinition.query) {
result = await baseQuery(
endpointDefinition.query(arg.originalArgs),
baseQueryApi,
endpointDefinition.extraOptions as any
)
if (endpointDefinition.transformResponse) {
transformResponse = endpointDefinition.transformResponse
}
} else {
result = await endpointDefinition.queryFn(
arg.originalArgs,
baseQueryApi,
endpointDefinition.extraOptions as any,
(arg) =>
baseQuery(arg, baseQueryApi, endpointDefinition.extraOptions as any)
)
}
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
const what = endpointDefinition.query ? '`baseQuery`' : '`queryFn`'
let err: undefined | string
if (!result) {
err = `${what} did not return anything.`
} else if (typeof result !== 'object') {
err = `${what} did not return an object.`
} else if (result.error && result.data) {
err = `${what} returned an object containing both \`error\` and \`result\`.`
} else if (result.error === undefined && result.data === undefined) {
err = `${what} returned an object containing neither a valid \`error\` and \`result\`. At least one of them should not be \`undefined\``
} else {
for (const key of Object.keys(result)) {
if (key !== 'error' && key !== 'data' && key !== 'meta') {
err = `The object returned by ${what} has the unknown property ${key}.`
break
}
}
}
if (err) {
console.error(
`Error encountered handling the endpoint ${arg.endpointName}.
${err}
It needs to return an object with either the shape \`{ data: <value> }\` or \`{ error: <value> }\` that may contain an optional \`meta\` property.
Object returned was:`,
result
)
}
}
if (result.error) throw new HandledError(result.error, result.meta)
return fulfillWithValue(
await transformResponse(result.data, result.meta, arg.originalArgs),
{
fulfilledTimeStamp: Date.now(),
baseQueryMeta: result.meta,
[SHOULD_AUTOBATCH]: true,
}
)
} catch (error) {
let catchedError = error
if (catchedError instanceof HandledError) {
let transformErrorResponse: (
baseQueryReturnValue: any,
meta: any,
arg: any
) => any = defaultTransformResponse
if (
endpointDefinition.query &&
endpointDefinition.transformErrorResponse
) {
transformErrorResponse = endpointDefinition.transformErrorResponse
}
try {
return rejectWithValue(
await transformErrorResponse(
catchedError.value,
catchedError.meta,
arg.originalArgs
),
{ baseQueryMeta: catchedError.meta, [SHOULD_AUTOBATCH]: true }
)
} catch (e) {
catchedError = e
}
}
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV !== 'production'
) {
console.error(
`An unhandled error occurred processing a request for the endpoint "${arg.endpointName}".
In the case of an unhandled error, no tags will be "provided" or "invalidated".`,
catchedError
)
} else {
console.error(catchedError)
}
throw catchedError
}
}
function isForcedQuery(
arg: QueryThunkArg,
state: RootState<any, string, ReducerPath>
) {
const requestState = state[reducerPath]?.queries?.[arg.queryCacheKey]
const baseFetchOnMountOrArgChange =
state[reducerPath]?.config.refetchOnMountOrArgChange
const fulfilledVal = requestState?.fulfilledTimeStamp
const refetchVal =
arg.forceRefetch ?? (arg.subscribe && baseFetchOnMountOrArgChange)
if (refetchVal) {
// Return if its true or compare the dates because it must be a number
return (
refetchVal === true ||
(Number(new Date()) - Number(fulfilledVal)) / 1000 >= refetchVal
)
}
return false
}
const queryThunk = createAsyncThunk<
ThunkResult,
QueryThunkArg,
ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
>(`${reducerPath}/executeQuery`, executeEndpoint, {
getPendingMeta() {
return { startedTimeStamp: Date.now(), [SHOULD_AUTOBATCH]: true }
},
condition(queryThunkArgs, { getState }) {
const state = getState()
const requestState =
state[reducerPath]?.queries?.[queryThunkArgs.queryCacheKey]
const fulfilledVal = requestState?.fulfilledTimeStamp
const currentArg = queryThunkArgs.originalArgs
const previousArg = requestState?.originalArgs
const endpointDefinition =
endpointDefinitions[queryThunkArgs.endpointName]
// Order of these checks matters.
// In order for `upsertQueryData` to successfully run while an existing request is in flight,
/// we have to check for that first, otherwise `queryThunk` will bail out and not run at all.
if (isUpsertQuery(queryThunkArgs)) {
return true
}
// Don't retry a request that's currently in-flight
if (requestState?.status === 'pending') {
return false
}
// if this is forced, continue
if (isForcedQuery(queryThunkArgs, state)) {
return true
}
if (
isQueryDefinition(endpointDefinition) &&
endpointDefinition?.forceRefetch?.({
currentArg,
previousArg,
endpointState: requestState,
state,
})
) {
return true
}
// Pull from the cache unless we explicitly force refetch or qualify based on time
if (fulfilledVal) {
// Value is cached and we didn't specify to refresh, skip it.
return false
}
return true
},
dispatchConditionRejection: true,
})
const mutationThunk = createAsyncThunk<
ThunkResult,
MutationThunkArg,
ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
>(`${reducerPath}/executeMutation`, executeEndpoint, {
getPendingMeta() {
return { startedTimeStamp: Date.now(), [SHOULD_AUTOBATCH]: true }
},
})
const hasTheForce = (options: any): options is { force: boolean } =>
'force' in options
const hasMaxAge = (
options: any
): options is { ifOlderThan: false | number } => 'ifOlderThan' in options
const prefetch =
<EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
arg: any,
options: PrefetchOptions
): ThunkAction<void, any, any, AnyAction> =>
(dispatch: ThunkDispatch<any, any, any>, getState: () => any) => {
const force = hasTheForce(options) && options.force
const maxAge = hasMaxAge(options) && options.ifOlderThan
const queryAction = (force: boolean = true) =>
(api.endpoints[endpointName] as ApiEndpointQuery<any, any>).initiate(
arg,
{ forceRefetch: force }
)
const latestStateValue = (
api.endpoints[endpointName] as ApiEndpointQuery<any, any>
).select(arg)(getState())
if (force) {
dispatch(queryAction())
} else if (maxAge) {
const lastFulfilledTs = latestStateValue?.fulfilledTimeStamp
if (!lastFulfilledTs) {
dispatch(queryAction())
return
}
const shouldRetrigger =
(Number(new Date()) - Number(new Date(lastFulfilledTs))) / 1000 >=
maxAge
if (shouldRetrigger) {
dispatch(queryAction())
}
} else {
// If prefetching with no options, just let it try
dispatch(queryAction(false))
}
}
function matchesEndpoint(endpointName: string) {
return (action: any): action is AnyAction =>
action?.meta?.arg?.endpointName === endpointName
}
function buildMatchThunkActions<
Thunk extends
| AsyncThunk<any, QueryThunkArg, ThunkApiMetaConfig>
| AsyncThunk<any, MutationThunkArg, ThunkApiMetaConfig>
>(thunk: Thunk, endpointName: string) {
return {
matchPending: isAllOf(isPending(thunk), matchesEndpoint(endpointName)),
matchFulfilled: isAllOf(
isFulfilled(thunk),
matchesEndpoint(endpointName)
),
matchRejected: isAllOf(isRejected(thunk), matchesEndpoint(endpointName)),
} as Matchers<Thunk, any>
}
return {
queryThunk,
mutationThunk,
prefetch,
updateQueryData,
upsertQueryData,
patchQueryData,
buildMatchThunkActions,
}
}
export function calculateProvidedByThunk(
action: UnwrapPromise<
ReturnType<ReturnType<QueryThunk>> | ReturnType<ReturnType<MutationThunk>>
>,
type: 'providesTags' | 'invalidatesTags',
endpointDefinitions: EndpointDefinitions,
assertTagType: AssertTagTypes
) {
return calculateProvidedBy(
endpointDefinitions[action.meta.arg.endpointName][type],
isFulfilled(action) ? action.payload : undefined,
isRejectedWithValue(action) ? action.payload : undefined,
action.meta.arg.originalArgs,
'baseQueryMeta' in action.meta ? action.meta.baseQueryMeta : undefined,
assertTagType
)
}

View File

@@ -0,0 +1,6 @@
import { buildCreateApi, CreateApi } from '../createApi'
import { coreModule, coreModuleName } from './module'
const createApi = /* @__PURE__ */ buildCreateApi(coreModule())
export { createApi, coreModule, coreModuleName }

View File

@@ -0,0 +1,629 @@
/**
* Note: this file should import all other files for type discovery and declaration merging
*/
import type {
PatchQueryDataThunk,
UpdateQueryDataThunk,
UpsertQueryDataThunk,
} from './buildThunks'
import { buildThunks } from './buildThunks'
import type {
ActionCreatorWithPayload,
AnyAction,
Middleware,
Reducer,
ThunkAction,
ThunkDispatch,
} from '@reduxjs/toolkit'
import type {
EndpointDefinitions,
QueryArgFrom,
QueryDefinition,
MutationDefinition,
AssertTagTypes,
TagDescription,
} from '../endpointDefinitions'
import { isQueryDefinition, isMutationDefinition } from '../endpointDefinitions'
import type {
CombinedState,
QueryKeys,
MutationKeys,
RootState,
} from './apiState'
import type { Api, Module } from '../apiTypes'
import { onFocus, onFocusLost, onOnline, onOffline } from './setupListeners'
import { buildSlice } from './buildSlice'
import { buildMiddleware } from './buildMiddleware'
import { buildSelectors } from './buildSelectors'
import type {
MutationActionCreatorResult,
QueryActionCreatorResult,
} from './buildInitiate'
import { buildInitiate } from './buildInitiate'
import { assertCast, safeAssign } from '../tsHelpers'
import type { InternalSerializeQueryArgs } from '../defaultSerializeQueryArgs'
import type { SliceActions } from './buildSlice'
import type { BaseQueryFn } from '../baseQueryTypes'
import type { ReferenceCacheLifecycle } from './buildMiddleware/cacheLifecycle'
import type { ReferenceQueryLifecycle } from './buildMiddleware/queryLifecycle'
import type { ReferenceCacheCollection } from './buildMiddleware/cacheCollection'
import { enablePatches } from 'immer'
/**
* `ifOlderThan` - (default: `false` | `number`) - _number is value in seconds_
* - If specified, it will only run the query if the difference between `new Date()` and the last `fulfilledTimeStamp` is greater than the given value
*
* @overloadSummary
* `force`
* - If `force: true`, it will ignore the `ifOlderThan` value if it is set and the query will be run even if it exists in the cache.
*/
export type PrefetchOptions =
| {
ifOlderThan?: false | number
}
| { force?: boolean }
export const coreModuleName = /* @__PURE__ */ Symbol()
export type CoreModule =
| typeof coreModuleName
| ReferenceCacheLifecycle
| ReferenceQueryLifecycle
| ReferenceCacheCollection
export interface ThunkWithReturnValue<T> extends ThunkAction<T, any, any, AnyAction> {}
declare module '../apiTypes' {
export interface ApiModules<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string
> {
[coreModuleName]: {
/**
* This api's reducer should be mounted at `store[api.reducerPath]`.
*
* @example
* ```ts
* configureStore({
* reducer: {
* [api.reducerPath]: api.reducer,
* },
* middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware),
* })
* ```
*/
reducerPath: ReducerPath
/**
* Internal actions not part of the public API. Note: These are subject to change at any given time.
*/
internalActions: InternalActions
/**
* A standard redux reducer that enables core functionality. Make sure it's included in your store.
*
* @example
* ```ts
* configureStore({
* reducer: {
* [api.reducerPath]: api.reducer,
* },
* middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware),
* })
* ```
*/
reducer: Reducer<
CombinedState<Definitions, TagTypes, ReducerPath>,
AnyAction
>
/**
* This is a standard redux middleware and is responsible for things like polling, garbage collection and a handful of other things. Make sure it's included in your store.
*
* @example
* ```ts
* configureStore({
* reducer: {
* [api.reducerPath]: api.reducer,
* },
* middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware),
* })
* ```
*/
middleware: Middleware<
{},
RootState<Definitions, string, ReducerPath>,
ThunkDispatch<any, any, AnyAction>
>
/**
* A collection of utility thunks for various situations.
*/
util: {
/**
* This method had to be removed due to a conceptual bug in RTK.
*
* Despite TypeScript errors, it will continue working in the "buggy" way it did
* before in production builds and will be removed in the next major release.
*
* Nonetheless, you should immediately replace it with the new recommended approach.
* See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for new guidance on SSR.
*
* Please see https://github.com/reduxjs/redux-toolkit/pull/2481 for details.
* @deprecated
*/
getRunningOperationPromises: never // this is now types as `never` to immediately throw TS errors on use, but still allow for a comment
/**
* This method had to be removed due to a conceptual bug in RTK.
* It has been replaced by `api.util.getRunningQueryThunk` and `api.util.getRunningMutationThunk`.
* Please see https://github.com/reduxjs/redux-toolkit/pull/2481 for details.
* @deprecated
*/
getRunningOperationPromise: never // this is now types as `never` to immediately throw TS errors on use, but still allow for a comment
/**
* A thunk that (if dispatched) will return a specific running query, identified
* by `endpointName` and `args`.
* If that query is not running, dispatching the thunk will result in `undefined`.
*
* Can be used to await a specific query triggered in any way,
* including via hook calls or manually dispatching `initiate` actions.
*
* See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for details.
*/
getRunningQueryThunk<EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
args: QueryArgFrom<Definitions[EndpointName]>
): ThunkWithReturnValue<
| QueryActionCreatorResult<
Definitions[EndpointName] & { type: 'query' }
>
| undefined
>
/**
* A thunk that (if dispatched) will return a specific running mutation, identified
* by `endpointName` and `fixedCacheKey` or `requestId`.
* If that mutation is not running, dispatching the thunk will result in `undefined`.
*
* Can be used to await a specific mutation triggered in any way,
* including via hook trigger functions or manually dispatching `initiate` actions.
*
* See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for details.
*/
getRunningMutationThunk<EndpointName extends MutationKeys<Definitions>>(
endpointName: EndpointName,
fixedCacheKeyOrRequestId: string
): ThunkWithReturnValue<
| MutationActionCreatorResult<
Definitions[EndpointName] & { type: 'mutation' }
>
| undefined
>
/**
* A thunk that (if dispatched) will return all running queries.
*
* Useful for SSR scenarios to await all running queries triggered in any way,
* including via hook calls or manually dispatching `initiate` actions.
*
* See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for details.
*/
getRunningQueriesThunk(): ThunkWithReturnValue<
Array<QueryActionCreatorResult<any>>
>
/**
* A thunk that (if dispatched) will return all running mutations.
*
* Useful for SSR scenarios to await all running mutations triggered in any way,
* including via hook calls or manually dispatching `initiate` actions.
*
* See https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering for details.
*/
getRunningMutationsThunk(): ThunkWithReturnValue<
Array<MutationActionCreatorResult<any>>
>
/**
* A Redux thunk that can be used to manually trigger pre-fetching of data.
*
* The thunk accepts three arguments: the name of the endpoint we are updating (such as `'getPost'`), the appropriate query arg values to construct the desired cache key, and a set of options used to determine if the data actually should be re-fetched based on cache staleness.
*
* React Hooks users will most likely never need to use this directly, as the `usePrefetch` hook will dispatch this thunk internally as needed when you call the prefetching function supplied by the hook.
*
* @example
*
* ```ts no-transpile
* dispatch(api.util.prefetch('getPosts', undefined, { force: true }))
* ```
*/
prefetch<EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
arg: QueryArgFrom<Definitions[EndpointName]>,
options: PrefetchOptions
): ThunkAction<void, any, any, AnyAction>
/**
* A Redux thunk action creator that, when dispatched, creates and applies a set of JSON diff/patch objects to the current state. This immediately updates the Redux state with those changes.
*
* The thunk action creator accepts three arguments: the name of the endpoint we are updating (such as `'getPost'`), the appropriate query arg values to construct the desired cache key, and an `updateRecipe` callback function. The callback receives an Immer-wrapped `draft` of the current state, and may modify the draft to match the expected results after the mutation completes successfully.
*
* The thunk executes _synchronously_, and returns an object containing `{patches: Patch[], inversePatches: Patch[], undo: () => void}`. The `patches` and `inversePatches` are generated using Immer's [`produceWithPatches` method](https://immerjs.github.io/immer/patches).
*
* This is typically used as the first step in implementing optimistic updates. The generated `inversePatches` can be used to revert the updates by calling `dispatch(patchQueryData(endpointName, args, inversePatches))`. Alternatively, the `undo` method can be called directly to achieve the same effect.
*
* Note that the first two arguments (`endpointName` and `args`) are used to determine which existing cache entry to update. If no existing cache entry is found, the `updateRecipe` callback will not run.
*
* @example
*
* ```ts
* const patchCollection = dispatch(
* api.util.updateQueryData('getPosts', undefined, (draftPosts) => {
* draftPosts.push({ id: 1, name: 'Teddy' })
* })
* )
* ```
*/
updateQueryData: UpdateQueryDataThunk<
Definitions,
RootState<Definitions, string, ReducerPath>
>
/** @deprecated renamed to `updateQueryData` */
updateQueryResult: UpdateQueryDataThunk<
Definitions,
RootState<Definitions, string, ReducerPath>
>
/**
* A Redux thunk action creator that, when dispatched, acts as an artificial API request to upsert a value into the cache.
*
* The thunk action creator accepts three arguments: the name of the endpoint we are updating (such as `'getPost'`), the appropriate query arg values to construct the desired cache key, and the data to upsert.
*
* If no cache entry for that cache key exists, a cache entry will be created and the data added. If a cache entry already exists, this will _overwrite_ the existing cache entry data.
*
* The thunk executes _asynchronously_, and returns a promise that resolves when the store has been updated.
*
* If dispatched while an actual request is in progress, both the upsert and request will be handled as soon as they resolve, resulting in a "last result wins" update behavior.
*
* @example
*
* ```ts
* await dispatch(
* api.util.upsertQueryData('getPost', {id: 1}, {id: 1, text: "Hello!"})
* )
* ```
*/
upsertQueryData: UpsertQueryDataThunk<
Definitions,
RootState<Definitions, string, ReducerPath>
>
/**
* A Redux thunk that applies a JSON diff/patch array to the cached data for a given query result. This immediately updates the Redux state with those changes.
*
* The thunk accepts three arguments: the name of the endpoint we are updating (such as `'getPost'`), the appropriate query arg values to construct the desired cache key, and a JSON diff/patch array as produced by Immer's `produceWithPatches`.
*
* This is typically used as the second step in implementing optimistic updates. If a request fails, the optimistically-applied changes can be reverted by dispatching `patchQueryData` with the `inversePatches` that were generated by `updateQueryData` earlier.
*
* In cases where it is desired to simply revert the previous changes, it may be preferable to call the `undo` method returned from dispatching `updateQueryData` instead.
*
* @example
* ```ts
* const patchCollection = dispatch(
* api.util.updateQueryData('getPosts', undefined, (draftPosts) => {
* draftPosts.push({ id: 1, name: 'Teddy' })
* })
* )
*
* // later
* dispatch(
* api.util.patchQueryData('getPosts', undefined, patchCollection.inversePatches)
* )
*
* // or
* patchCollection.undo()
* ```
*/
patchQueryData: PatchQueryDataThunk<
Definitions,
RootState<Definitions, string, ReducerPath>
>
/** @deprecated renamed to `patchQueryData` */
patchQueryResult: PatchQueryDataThunk<
Definitions,
RootState<Definitions, string, ReducerPath>
>
/**
* A Redux action creator that can be dispatched to manually reset the api state completely. This will immediately remove all existing cache entries, and all queries will be considered 'uninitialized'.
*
* @example
*
* ```ts
* dispatch(api.util.resetApiState())
* ```
*/
resetApiState: SliceActions['resetApiState']
/**
* A Redux action creator that can be used to manually invalidate cache tags for [automated re-fetching](../../usage/automated-refetching.mdx).
*
* The action creator accepts one argument: the cache tags to be invalidated. It returns an action with those tags as a payload, and the corresponding `invalidateTags` action type for the api.
*
* Dispatching the result of this action creator will [invalidate](../../usage/automated-refetching.mdx#invalidating-cache-data) the given tags, causing queries to automatically re-fetch if they are subscribed to cache data that [provides](../../usage/automated-refetching.mdx#providing-cache-data) the corresponding tags.
*
* The array of tags provided to the action creator should be in one of the following formats, where `TagType` is equal to a string provided to the [`tagTypes`](../createApi.mdx#tagtypes) property of the api:
*
* - `[TagType]`
* - `[{ type: TagType }]`
* - `[{ type: TagType, id: number | string }]`
*
* @example
*
* ```ts
* dispatch(api.util.invalidateTags(['Post']))
* dispatch(api.util.invalidateTags([{ type: 'Post', id: 1 }]))
* dispatch(
* api.util.invalidateTags([
* { type: 'Post', id: 1 },
* { type: 'Post', id: 'LIST' },
* ])
* )
* ```
*/
invalidateTags: ActionCreatorWithPayload<
Array<TagDescription<TagTypes>>,
string
>
/**
* A function to select all `{ endpointName, originalArgs, queryCacheKey }` combinations that would be invalidated by a specific set of tags.
*
* Can be used for mutations that want to do optimistic updates instead of invalidating a set of tags, but don't know exactly what they need to update.
*/
selectInvalidatedBy: (
state: RootState<Definitions, string, ReducerPath>,
tags: ReadonlyArray<TagDescription<TagTypes>>
) => Array<{
endpointName: string
originalArgs: any
queryCacheKey: string
}>
}
/**
* Endpoints based on the input endpoints provided to `createApi`, containing `select` and `action matchers`.
*/
endpoints: {
[K in keyof Definitions]: Definitions[K] extends QueryDefinition<
any,
any,
any,
any,
any
>
? ApiEndpointQuery<Definitions[K], Definitions>
: Definitions[K] extends MutationDefinition<any, any, any, any, any>
? ApiEndpointMutation<Definitions[K], Definitions>
: never
}
}
}
}
export interface ApiEndpointQuery<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definition extends QueryDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> {
name: string
/**
* All of these are `undefined` at runtime, purely to be used in TypeScript declarations!
*/
Types: NonNullable<Definition['Types']>
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export interface ApiEndpointMutation<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definition extends MutationDefinition<any, any, any, any, any>,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Definitions extends EndpointDefinitions
> {
name: string
/**
* All of these are `undefined` at runtime, purely to be used in TypeScript declarations!
*/
Types: NonNullable<Definition['Types']>
}
export type ListenerActions = {
/**
* Will cause the RTK Query middleware to trigger any refetchOnReconnect-related behavior
* @link https://rtk-query-docs.netlify.app/api/setupListeners
*/
onOnline: typeof onOnline
onOffline: typeof onOffline
/**
* Will cause the RTK Query middleware to trigger any refetchOnFocus-related behavior
* @link https://rtk-query-docs.netlify.app/api/setupListeners
*/
onFocus: typeof onFocus
onFocusLost: typeof onFocusLost
}
export type InternalActions = SliceActions & ListenerActions
/**
* Creates a module containing the basic redux logic for use with `buildCreateApi`.
*
* @example
* ```ts
* const createBaseApi = buildCreateApi(coreModule());
* ```
*/
export const coreModule = (): Module<CoreModule> => ({
name: coreModuleName,
init(
api,
{
baseQuery,
tagTypes,
reducerPath,
serializeQueryArgs,
keepUnusedDataFor,
refetchOnMountOrArgChange,
refetchOnFocus,
refetchOnReconnect,
},
context
) {
enablePatches()
assertCast<InternalSerializeQueryArgs>(serializeQueryArgs)
const assertTagType: AssertTagTypes = (tag) => {
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
if (!tagTypes.includes(tag.type as any)) {
console.error(
`Tag type '${tag.type}' was used, but not specified in \`tagTypes\`!`
)
}
}
return tag
}
Object.assign(api, {
reducerPath,
endpoints: {},
internalActions: {
onOnline,
onOffline,
onFocus,
onFocusLost,
},
util: {},
})
const {
queryThunk,
mutationThunk,
patchQueryData,
updateQueryData,
upsertQueryData,
prefetch,
buildMatchThunkActions,
} = buildThunks({
baseQuery,
reducerPath,
context,
api,
serializeQueryArgs,
assertTagType,
})
const { reducer, actions: sliceActions } = buildSlice({
context,
queryThunk,
mutationThunk,
reducerPath,
assertTagType,
config: {
refetchOnFocus,
refetchOnReconnect,
refetchOnMountOrArgChange,
keepUnusedDataFor,
reducerPath,
},
})
safeAssign(api.util, {
patchQueryData,
updateQueryData,
upsertQueryData,
prefetch,
resetApiState: sliceActions.resetApiState,
})
safeAssign(api.internalActions, sliceActions)
const { middleware, actions: middlewareActions } = buildMiddleware({
reducerPath,
context,
queryThunk,
mutationThunk,
api,
assertTagType,
})
safeAssign(api.util, middlewareActions)
safeAssign(api, { reducer: reducer as any, middleware })
const { buildQuerySelector, buildMutationSelector, selectInvalidatedBy } =
buildSelectors({
serializeQueryArgs: serializeQueryArgs as any,
reducerPath,
})
safeAssign(api.util, { selectInvalidatedBy })
const {
buildInitiateQuery,
buildInitiateMutation,
getRunningMutationThunk,
getRunningMutationsThunk,
getRunningQueriesThunk,
getRunningQueryThunk,
getRunningOperationPromises,
removalWarning,
} = buildInitiate({
queryThunk,
mutationThunk,
api,
serializeQueryArgs: serializeQueryArgs as any,
context,
})
safeAssign(api.util, {
getRunningOperationPromises: getRunningOperationPromises as any,
getRunningOperationPromise: removalWarning as any,
getRunningMutationThunk,
getRunningMutationsThunk,
getRunningQueryThunk,
getRunningQueriesThunk,
})
return {
name: coreModuleName,
injectEndpoint(endpointName, definition) {
const anyApi = api as any as Api<
any,
Record<string, any>,
string,
string,
CoreModule
>
anyApi.endpoints[endpointName] ??= {} as any
if (isQueryDefinition(definition)) {
safeAssign(
anyApi.endpoints[endpointName],
{
name: endpointName,
select: buildQuerySelector(endpointName, definition),
initiate: buildInitiateQuery(endpointName, definition),
},
buildMatchThunkActions(queryThunk, endpointName)
)
} else if (isMutationDefinition(definition)) {
safeAssign(
anyApi.endpoints[endpointName],
{
name: endpointName,
select: buildMutationSelector(),
initiate: buildInitiateMutation(endpointName),
},
buildMatchThunkActions(mutationThunk, endpointName)
)
}
},
}
},
})

View File

@@ -0,0 +1,84 @@
import type {
ThunkDispatch,
ActionCreatorWithoutPayload, // Workaround for API-Extractor
} from '@reduxjs/toolkit'
import { createAction } from '@reduxjs/toolkit'
export const onFocus = /* @__PURE__ */ createAction('__rtkq/focused')
export const onFocusLost = /* @__PURE__ */ createAction('__rtkq/unfocused')
export const onOnline = /* @__PURE__ */ createAction('__rtkq/online')
export const onOffline = /* @__PURE__ */ createAction('__rtkq/offline')
let initialized = false
/**
* A utility used to enable `refetchOnMount` and `refetchOnReconnect` behaviors.
* It requires the dispatch method from your store.
* Calling `setupListeners(store.dispatch)` will configure listeners with the recommended defaults,
* but you have the option of providing a callback for more granular control.
*
* @example
* ```ts
* setupListeners(store.dispatch)
* ```
*
* @param dispatch - The dispatch method from your store
* @param customHandler - An optional callback for more granular control over listener behavior
* @returns Return value of the handler.
* The default handler returns an `unsubscribe` method that can be called to remove the listeners.
*/
export function setupListeners(
dispatch: ThunkDispatch<any, any, any>,
customHandler?: (
dispatch: ThunkDispatch<any, any, any>,
actions: {
onFocus: typeof onFocus
onFocusLost: typeof onFocusLost
onOnline: typeof onOnline
onOffline: typeof onOffline
}
) => () => void
) {
function defaultHandler() {
const handleFocus = () => dispatch(onFocus())
const handleFocusLost = () => dispatch(onFocusLost())
const handleOnline = () => dispatch(onOnline())
const handleOffline = () => dispatch(onOffline())
const handleVisibilityChange = () => {
if (window.document.visibilityState === 'visible') {
handleFocus()
} else {
handleFocusLost()
}
}
if (!initialized) {
if (typeof window !== 'undefined' && window.addEventListener) {
// Handle focus events
window.addEventListener(
'visibilitychange',
handleVisibilityChange,
false
)
window.addEventListener('focus', handleFocus, false)
// Handle connection events
window.addEventListener('online', handleOnline, false)
window.addEventListener('offline', handleOffline, false)
initialized = true
}
}
const unsubscribe = () => {
window.removeEventListener('focus', handleFocus)
window.removeEventListener('visibilitychange', handleVisibilityChange)
window.removeEventListener('online', handleOnline)
window.removeEventListener('offline', handleOffline)
initialized = false
}
return unsubscribe
}
return customHandler
? customHandler(dispatch, { onFocus, onFocusLost, onOffline, onOnline })
: defaultHandler()
}

View File

@@ -0,0 +1,358 @@
import type { Api, ApiContext, Module, ModuleName } from './apiTypes'
import type { CombinedState } from './core/apiState'
import type { BaseQueryArg, BaseQueryFn } from './baseQueryTypes'
import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
import { defaultSerializeQueryArgs } from './defaultSerializeQueryArgs'
import type {
EndpointBuilder,
EndpointDefinitions,
} from './endpointDefinitions'
import { DefinitionType, isQueryDefinition } from './endpointDefinitions'
import { nanoid } from '@reduxjs/toolkit'
import type { AnyAction } from '@reduxjs/toolkit'
import type { NoInfer } from './tsHelpers'
import { defaultMemoize } from 'reselect'
export interface CreateApiOptions<
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string = 'api',
TagTypes extends string = never
> {
/**
* The base query used by each endpoint if no `queryFn` option is specified. RTK Query exports a utility called [fetchBaseQuery](./fetchBaseQuery) as a lightweight wrapper around `fetch` for common use-cases. See [Customizing Queries](../../rtk-query/usage/customizing-queries) if `fetchBaseQuery` does not handle your requirements.
*
* @example
*
* ```ts
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
*
* const api = createApi({
* // highlight-start
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* // highlight-end
* endpoints: (build) => ({
* // ...endpoints
* }),
* })
* ```
*/
baseQuery: BaseQuery
/**
* An array of string tag type names. Specifying tag types is optional, but you should define them so that they can be used for caching and invalidation. When defining a tag type, you will be able to [provide](../../rtk-query/usage/automated-refetching#providing-tags) them with `providesTags` and [invalidate](../../rtk-query/usage/automated-refetching#invalidating-tags) them with `invalidatesTags` when configuring [endpoints](#endpoints).
*
* @example
*
* ```ts
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* // highlight-start
* tagTypes: ['Post', 'User'],
* // highlight-end
* endpoints: (build) => ({
* // ...endpoints
* }),
* })
* ```
*/
tagTypes?: readonly TagTypes[]
/**
* The `reducerPath` is a _unique_ key that your service will be mounted to in your store. If you call `createApi` more than once in your application, you will need to provide a unique value each time. Defaults to `'api'`.
*
* @example
*
* ```ts
* // codeblock-meta title="apis.js"
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';
*
* const apiOne = createApi({
* // highlight-start
* reducerPath: 'apiOne',
* // highlight-end
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (builder) => ({
* // ...endpoints
* }),
* });
*
* const apiTwo = createApi({
* // highlight-start
* reducerPath: 'apiTwo',
* // highlight-end
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (builder) => ({
* // ...endpoints
* }),
* });
* ```
*/
reducerPath?: ReducerPath
/**
* Accepts a custom function if you have a need to change the creation of cache keys for any reason.
*/
serializeQueryArgs?: SerializeQueryArgs<BaseQueryArg<BaseQuery>>
/**
* Endpoints are just a set of operations that you want to perform against your server. You define them as an object using the builder syntax. There are two basic endpoint types: [`query`](../../rtk-query/usage/queries) and [`mutation`](../../rtk-query/usage/mutations).
*/
endpoints(
build: EndpointBuilder<BaseQuery, TagTypes, ReducerPath>
): Definitions
/**
* Defaults to `60` _(this value is in seconds)_. This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
*
* ```ts
* // codeblock-meta title="keepUnusedDataFor example"
*
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* query: () => 'posts',
* // highlight-start
* keepUnusedDataFor: 5
* // highlight-end
* })
* })
* })
* ```
*/
keepUnusedDataFor?: number
/**
* Defaults to `false`. This setting allows you to control whether if a cached result is already available RTK Query will only serve a cached result, or if it should `refetch` when set to `true` or if an adequate amount of time has passed since the last successful query result.
* - `false` - Will not cause a query to be performed _unless_ it does not exist yet.
* - `true` - Will always refetch when a new subscriber to a query is added. Behaves the same as calling the `refetch` callback or passing `forceRefetch: true` in the action creator.
* - `number` - **Value is in seconds**. If a number is provided and there is an existing query in the cache, it will compare the current time vs the last fulfilled timestamp, and only refetch if enough time has elapsed.
*
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
*/
refetchOnMountOrArgChange?: boolean | number
/**
* Defaults to `false`. This setting allows you to control whether RTK Query will try to refetch all subscribed queries after the application window regains focus.
*
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
*
* Note: requires [`setupListeners`](./setupListeners) to have been called.
*/
refetchOnFocus?: boolean
/**
* Defaults to `false`. This setting allows you to control whether RTK Query will try to refetch all subscribed queries after regaining a network connection.
*
* If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
*
* Note: requires [`setupListeners`](./setupListeners) to have been called.
*/
refetchOnReconnect?: boolean
/**
* A function that is passed every dispatched action. If this returns something other than `undefined`,
* that return value will be used to rehydrate fulfilled & errored queries.
*
* @example
*
* ```ts
* // codeblock-meta title="next-redux-wrapper rehydration example"
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* import { HYDRATE } from 'next-redux-wrapper'
*
* export const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* // highlight-start
* extractRehydrationInfo(action, { reducerPath }) {
* if (action.type === HYDRATE) {
* return action.payload[reducerPath]
* }
* },
* // highlight-end
* endpoints: (build) => ({
* // omitted
* }),
* })
* ```
*/
extractRehydrationInfo?: (
action: AnyAction,
{
reducerPath,
}: {
reducerPath: ReducerPath
}
) =>
| undefined
| CombinedState<
NoInfer<Definitions>,
NoInfer<TagTypes>,
NoInfer<ReducerPath>
>
}
export type CreateApi<Modules extends ModuleName> = {
/**
* Creates a service to use in your application. Contains only the basic redux logic (the core module).
*
* @link https://rtk-query-docs.netlify.app/api/createApi
*/
<
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string = 'api',
TagTypes extends string = never
>(
options: CreateApiOptions<BaseQuery, Definitions, ReducerPath, TagTypes>
): Api<BaseQuery, Definitions, ReducerPath, TagTypes, Modules>
}
/**
* Builds a `createApi` method based on the provided `modules`.
*
* @link https://rtk-query-docs.netlify.app/concepts/customizing-create-api
*
* @example
* ```ts
* const MyContext = React.createContext<ReactReduxContextValue>(null as any);
* const customCreateApi = buildCreateApi(
* coreModule(),
* reactHooksModule({ useDispatch: createDispatchHook(MyContext) })
* );
* ```
*
* @param modules - A variable number of modules that customize how the `createApi` method handles endpoints
* @returns A `createApi` method using the provided `modules`.
*/
export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
...modules: Modules
): CreateApi<Modules[number]['name']> {
return function baseCreateApi(options) {
const extractRehydrationInfo = defaultMemoize((action: AnyAction) =>
options.extractRehydrationInfo?.(action, {
reducerPath: (options.reducerPath ?? 'api') as any,
})
)
const optionsWithDefaults: CreateApiOptions<any, any, any, any> = {
reducerPath: 'api',
keepUnusedDataFor: 60,
refetchOnMountOrArgChange: false,
refetchOnFocus: false,
refetchOnReconnect: false,
...options,
extractRehydrationInfo,
serializeQueryArgs(queryArgsApi) {
let finalSerializeQueryArgs = defaultSerializeQueryArgs
if ('serializeQueryArgs' in queryArgsApi.endpointDefinition) {
const endpointSQA =
queryArgsApi.endpointDefinition.serializeQueryArgs!
finalSerializeQueryArgs = (queryArgsApi) => {
const initialResult = endpointSQA(queryArgsApi)
if (typeof initialResult === 'string') {
// If the user function returned a string, use it as-is
return initialResult
} else {
// Assume they returned an object (such as a subset of the original
// query args) or a primitive, and serialize it ourselves
return defaultSerializeQueryArgs({
...queryArgsApi,
queryArgs: initialResult,
})
}
}
} else if (options.serializeQueryArgs) {
finalSerializeQueryArgs = options.serializeQueryArgs
}
return finalSerializeQueryArgs(queryArgsApi)
},
tagTypes: [...(options.tagTypes || [])],
}
const context: ApiContext<EndpointDefinitions> = {
endpointDefinitions: {},
batch(fn) {
// placeholder "batch" method to be overridden by plugins, for example with React.unstable_batchedUpdate
fn()
},
apiUid: nanoid(),
extractRehydrationInfo,
hasRehydrationInfo: defaultMemoize(
(action) => extractRehydrationInfo(action) != null
),
}
const api = {
injectEndpoints,
enhanceEndpoints({ addTagTypes, endpoints }) {
if (addTagTypes) {
for (const eT of addTagTypes) {
if (!optionsWithDefaults.tagTypes!.includes(eT as any)) {
;(optionsWithDefaults.tagTypes as any[]).push(eT)
}
}
}
if (endpoints) {
for (const [endpointName, partialDefinition] of Object.entries(
endpoints
)) {
if (typeof partialDefinition === 'function') {
partialDefinition(context.endpointDefinitions[endpointName])
} else {
Object.assign(
context.endpointDefinitions[endpointName] || {},
partialDefinition
)
}
}
}
return api
},
} as Api<BaseQueryFn, {}, string, string, Modules[number]['name']>
const initializedModules = modules.map((m) =>
m.init(api as any, optionsWithDefaults as any, context)
)
function injectEndpoints(
inject: Parameters<typeof api.injectEndpoints>[0]
) {
const evaluatedEndpoints = inject.endpoints({
query: (x) => ({ ...x, type: DefinitionType.query } as any),
mutation: (x) => ({ ...x, type: DefinitionType.mutation } as any),
})
for (const [endpointName, definition] of Object.entries(
evaluatedEndpoints
)) {
if (
!inject.overrideExisting &&
endpointName in context.endpointDefinitions
) {
if (
typeof process !== 'undefined' &&
process.env.NODE_ENV === 'development'
) {
console.error(
`called \`injectEndpoints\` to override already-existing endpointName ${endpointName} without specifying \`overrideExisting: true\``
)
}
continue
}
context.endpointDefinitions[endpointName] = definition
for (const m of initializedModules) {
m.injectEndpoint(endpointName, definition)
}
}
return api as any
}
return api.injectEndpoints({ endpoints: options.endpoints as any })
}
}

View File

@@ -0,0 +1,49 @@
import type { QueryCacheKey } from './core/apiState'
import type { EndpointDefinition } from './endpointDefinitions'
import { isPlainObject } from '@reduxjs/toolkit'
const cache: WeakMap<any, string> | undefined = WeakMap
? new WeakMap()
: undefined
export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
endpointName,
queryArgs,
}) => {
let serialized = ''
const cached = cache?.get(queryArgs)
if (typeof cached === 'string') {
serialized = cached
} else {
const stringified = JSON.stringify(queryArgs, (key, value) =>
isPlainObject(value)
? Object.keys(value)
.sort()
.reduce<any>((acc, key) => {
acc[key] = (value as any)[key]
return acc
}, {})
: value
)
if (isPlainObject(queryArgs)) {
cache?.set(queryArgs, stringified)
}
serialized = stringified
}
// Sort the object keys before stringifying, to prevent useQuery({ a: 1, b: 2 }) having a different cache key than useQuery({ b: 2, a: 1 })
return `${endpointName}(${serialized})`
}
export type SerializeQueryArgs<QueryArgs, ReturnType = string> = (_: {
queryArgs: QueryArgs
endpointDefinition: EndpointDefinition<any, any, any, any>
endpointName: string
}) => ReturnType
export type InternalSerializeQueryArgs = (_: {
queryArgs: any
endpointDefinition: EndpointDefinition<any, any, any, any>
endpointName: string
}) => QueryCacheKey

View File

@@ -0,0 +1,865 @@
import type { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
import type { QuerySubState, RootState } from './core/apiState'
import type {
BaseQueryExtraOptions,
BaseQueryFn,
BaseQueryResult,
BaseQueryArg,
BaseQueryApi,
QueryReturnValue,
BaseQueryError,
BaseQueryMeta,
} from './baseQueryTypes'
import type {
HasRequiredProps,
MaybePromise,
OmitFromUnion,
CastAny,
NonUndefined,
UnwrapPromise,
} from './tsHelpers'
import type { NEVER } from './fakeBaseQuery'
import type { Api } from '@reduxjs/toolkit/query'
const resultType = /* @__PURE__ */ Symbol()
const baseQuery = /* @__PURE__ */ Symbol()
interface EndpointDefinitionWithQuery<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType
> {
/**
* `query` can be a function that returns either a `string` or an `object` which is passed to your `baseQuery`. If you are using [fetchBaseQuery](./fetchBaseQuery), this can return either a `string` or an `object` of properties in `FetchArgs`. If you use your own custom [`baseQuery`](../../rtk-query/usage/customizing-queries), you can customize this behavior to your liking.
*
* @example
*
* ```ts
* // codeblock-meta title="query example"
*
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* tagTypes: ['Post'],
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* // highlight-start
* query: () => 'posts',
* // highlight-end
* }),
* addPost: build.mutation<Post, Partial<Post>>({
* // highlight-start
* query: (body) => ({
* url: `posts`,
* method: 'POST',
* body,
* }),
* // highlight-end
* invalidatesTags: [{ type: 'Post', id: 'LIST' }],
* }),
* })
* })
* ```
*/
query(arg: QueryArg): BaseQueryArg<BaseQuery>
queryFn?: never
/**
* A function to manipulate the data returned by a query or mutation.
*/
transformResponse?(
baseQueryReturnValue: BaseQueryResult<BaseQuery>,
meta: BaseQueryMeta<BaseQuery>,
arg: QueryArg
): ResultType | Promise<ResultType>
/**
* A function to manipulate the data returned by a failed query or mutation.
*/
transformErrorResponse?(
baseQueryReturnValue: BaseQueryError<BaseQuery>,
meta: BaseQueryMeta<BaseQuery>,
arg: QueryArg
): unknown
/**
* Defaults to `true`.
*
* Most apps should leave this setting on. The only time it can be a performance issue
* is if an API returns extremely large amounts of data (e.g. 10,000 rows per request) and
* you're unable to paginate it.
*
* For details of how this works, please see the below. When it is set to `false`,
* every request will cause subscribed components to rerender, even when the data has not changed.
*
* @see https://redux-toolkit.js.org/api/other-exports#copywithstructuralsharing
*/
structuralSharing?: boolean
}
interface EndpointDefinitionWithQueryFn<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType
> {
/**
* Can be used in place of `query` as an inline function that bypasses `baseQuery` completely for the endpoint.
*
* @example
* ```ts
* // codeblock-meta title="Basic queryFn example"
*
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* query: () => 'posts',
* }),
* flipCoin: build.query<'heads' | 'tails', void>({
* // highlight-start
* queryFn(arg, queryApi, extraOptions, baseQuery) {
* const randomVal = Math.random()
* if (randomVal < 0.45) {
* return { data: 'heads' }
* }
* if (randomVal < 0.9) {
* return { data: 'tails' }
* }
* return { error: { status: 500, statusText: 'Internal Server Error', data: "Coin landed on it's edge!" } }
* }
* // highlight-end
* })
* })
* })
* ```
*/
queryFn(
arg: QueryArg,
api: BaseQueryApi,
extraOptions: BaseQueryExtraOptions<BaseQuery>,
baseQuery: (arg: Parameters<BaseQuery>[0]) => ReturnType<BaseQuery>
): MaybePromise<QueryReturnValue<ResultType, BaseQueryError<BaseQuery>>>
query?: never
transformResponse?: never
transformErrorResponse?: never
/**
* Defaults to `true`.
*
* Most apps should leave this setting on. The only time it can be a performance issue
* is if an API returns extremely large amounts of data (e.g. 10,000 rows per request) and
* you're unable to paginate it.
*
* For details of how this works, please see the below. When it is set to `false`,
* every request will cause subscribed components to rerender, even when the data has not changed.
*
* @see https://redux-toolkit.js.org/api/other-exports#copywithstructuralsharing
*/
structuralSharing?: boolean
}
export interface BaseEndpointTypes<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType
> {
QueryArg: QueryArg
BaseQuery: BaseQuery
ResultType: ResultType
}
export type BaseEndpointDefinition<
QueryArg,
BaseQuery extends BaseQueryFn,
ResultType
> = (
| ([CastAny<BaseQueryResult<BaseQuery>, {}>] extends [NEVER]
? never
: EndpointDefinitionWithQuery<QueryArg, BaseQuery, ResultType>)
| EndpointDefinitionWithQueryFn<QueryArg, BaseQuery, ResultType>
) & {
/* phantom type */
[resultType]?: ResultType
/* phantom type */
[baseQuery]?: BaseQuery
} & HasRequiredProps<
BaseQueryExtraOptions<BaseQuery>,
{ extraOptions: BaseQueryExtraOptions<BaseQuery> },
{ extraOptions?: BaseQueryExtraOptions<BaseQuery> }
>
export enum DefinitionType {
query = 'query',
mutation = 'mutation',
}
export type GetResultDescriptionFn<
TagTypes extends string,
ResultType,
QueryArg,
ErrorType,
MetaType
> = (
result: ResultType | undefined,
error: ErrorType | undefined,
arg: QueryArg,
meta: MetaType
) => ReadonlyArray<TagDescription<TagTypes>>
export type FullTagDescription<TagType> = {
type: TagType
id?: number | string
}
export type TagDescription<TagType> = TagType | FullTagDescription<TagType>
export type ResultDescription<
TagTypes extends string,
ResultType,
QueryArg,
ErrorType,
MetaType
> =
| ReadonlyArray<TagDescription<TagTypes>>
| GetResultDescriptionFn<TagTypes, ResultType, QueryArg, ErrorType, MetaType>
/** @deprecated please use `onQueryStarted` instead */
export interface QueryApi<ReducerPath extends string, Context extends {}> {
/** @deprecated please use `onQueryStarted` instead */
dispatch: ThunkDispatch<any, any, AnyAction>
/** @deprecated please use `onQueryStarted` instead */
getState(): RootState<any, any, ReducerPath>
/** @deprecated please use `onQueryStarted` instead */
extra: unknown
/** @deprecated please use `onQueryStarted` instead */
requestId: string
/** @deprecated please use `onQueryStarted` instead */
context: Context
}
export interface QueryTypes<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string
> extends BaseEndpointTypes<QueryArg, BaseQuery, ResultType> {
/**
* The endpoint definition type. To be used with some internal generic types.
* @example
* ```ts
* const useMyWrappedHook: UseQuery<typeof api.endpoints.query.Types.QueryDefinition> = ...
* ```
*/
QueryDefinition: QueryDefinition<
QueryArg,
BaseQuery,
TagTypes,
ResultType,
ReducerPath
>
TagTypes: TagTypes
ReducerPath: ReducerPath
}
export interface QueryExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
type: DefinitionType.query
/**
* Used by `query` endpoints. Determines which 'tag' is attached to the cached data returned by the query.
* Expects an array of tag type strings, an array of objects of tag types with ids, or a function that returns such an array.
* 1. `['Post']` - equivalent to `2`
* 2. `[{ type: 'Post' }]` - equivalent to `1`
* 3. `[{ type: 'Post', id: 1 }]`
* 4. `(result, error, arg) => ['Post']` - equivalent to `5`
* 5. `(result, error, arg) => [{ type: 'Post' }]` - equivalent to `4`
* 6. `(result, error, arg) => [{ type: 'Post', id: 1 }]`
*
* @example
*
* ```ts
* // codeblock-meta title="providesTags example"
*
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* tagTypes: ['Posts'],
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* query: () => 'posts',
* // highlight-start
* providesTags: (result) =>
* result
* ? [
* ...result.map(({ id }) => ({ type: 'Posts' as const, id })),
* { type: 'Posts', id: 'LIST' },
* ]
* : [{ type: 'Posts', id: 'LIST' }],
* // highlight-end
* })
* })
* })
* ```
*/
providesTags?: ResultDescription<
TagTypes,
ResultType,
QueryArg,
BaseQueryError<BaseQuery>,
BaseQueryMeta<BaseQuery>
>
/**
* Not to be used. A query should not invalidate tags in the cache.
*/
invalidatesTags?: never
/**
* Can be provided to return a custom cache key value based on the query arguments.
*
* This is primarily intended for cases where a non-serializable value is passed as part of the query arg object and should be excluded from the cache key. It may also be used for cases where an endpoint should only have a single cache entry, such as an infinite loading / pagination implementation.
*
* Unlike the `createApi` version which can _only_ return a string, this per-endpoint option can also return an an object, number, or boolean. If it returns a string, that value will be used as the cache key directly. If it returns an object / number / boolean, that value will be passed to the built-in `defaultSerializeQueryArgs`. This simplifies the use case of stripping out args you don't want included in the cache key.
*
*
* @example
*
* ```ts
* // codeblock-meta title="serializeQueryArgs : exclude value"
*
* import { createApi, fetchBaseQuery, defaultSerializeQueryArgs } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
*
* interface MyApiClient {
* fetchPost: (id: string) => Promise<Post>
* }
*
* createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (build) => ({
* // Example: an endpoint with an API client passed in as an argument,
* // but only the item ID should be used as the cache key
* getPost: build.query<Post, { id: string; client: MyApiClient }>({
* queryFn: async ({ id, client }) => {
* const post = await client.fetchPost(id)
* return { data: post }
* },
* // highlight-start
* serializeQueryArgs: ({ queryArgs, endpointDefinition, endpointName }) => {
* const { id } = queryArgs
* // This can return a string, an object, a number, or a boolean.
* // If it returns an object, number or boolean, that value
* // will be serialized automatically via `defaultSerializeQueryArgs`
* return { id } // omit `client` from the cache key
*
* // Alternately, you can use `defaultSerializeQueryArgs` yourself:
* // return defaultSerializeQueryArgs({
* // endpointName,
* // queryArgs: { id },
* // endpointDefinition
* // })
* // Or create and return a string yourself:
* // return `getPost(${id})`
* },
* // highlight-end
* }),
* }),
*})
* ```
*/
serializeQueryArgs?: SerializeQueryArgs<
QueryArg,
string | number | boolean | Record<any, any>
>
/**
* Can be provided to merge an incoming response value into the current cache data.
* If supplied, no automatic structural sharing will be applied - it's up to
* you to update the cache appropriately.
*
* Since RTKQ normally replaces cache entries with the new response, you will usually
* need to use this with the `serializeQueryArgs` or `forceRefetch` options to keep
* an existing cache entry so that it can be updated.
*
* Since this is wrapped with Immer, you may either mutate the `currentCacheValue` directly,
* or return a new value, but _not_ both at once.
*
* Will only be called if the existing `currentCacheData` is _not_ `undefined` - on first response,
* the cache entry will just save the response data directly.
*
* Useful if you don't want a new request to completely override the current cache value,
* maybe because you have manually updated it from another source and don't want those
* updates to get lost.
*
*
* @example
*
* ```ts
* // codeblock-meta title="merge: pagination"
*
* import { createApi, fetchBaseQuery, defaultSerializeQueryArgs } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
*
* createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (build) => ({
* listItems: build.query<string[], number>({
* query: (pageNumber) => `/listItems?page=${pageNumber}`,
* // Only have one cache entry because the arg always maps to one string
* serializeQueryArgs: ({ endpointName }) => {
* return endpointName
* },
* // Always merge incoming data to the cache entry
* merge: (currentCache, newItems) => {
* currentCache.push(...newItems)
* },
* // Refetch when the page arg changes
* forceRefetch({ currentArg, previousArg }) {
* return currentArg !== previousArg
* },
* }),
* }),
*})
* ```
*/
merge?(
currentCacheData: ResultType,
responseData: ResultType,
otherArgs: {
arg: QueryArg
baseQueryMeta: BaseQueryMeta<BaseQuery>
requestId: string
fulfilledTimeStamp: number
}
): ResultType | void
/**
* Check to see if the endpoint should force a refetch in cases where it normally wouldn't.
* This is primarily useful for "infinite scroll" / pagination use cases where
* RTKQ is keeping a single cache entry that is added to over time, in combination
* with `serializeQueryArgs` returning a fixed cache key and a `merge` callback
* set to add incoming data to the cache entry each time.
*
* @example
*
* ```ts
* // codeblock-meta title="forceRefresh: pagination"
*
* import { createApi, fetchBaseQuery, defaultSerializeQueryArgs } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
*
* createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* endpoints: (build) => ({
* listItems: build.query<string[], number>({
* query: (pageNumber) => `/listItems?page=${pageNumber}`,
* // Only have one cache entry because the arg always maps to one string
* serializeQueryArgs: ({ endpointName }) => {
* return endpointName
* },
* // Always merge incoming data to the cache entry
* merge: (currentCache, newItems) => {
* currentCache.push(...newItems)
* },
* // Refetch when the page arg changes
* forceRefetch({ currentArg, previousArg }) {
* return currentArg !== previousArg
* },
* }),
* }),
*})
* ```
*/
forceRefetch?(params: {
currentArg: QueryArg | undefined
previousArg: QueryArg | undefined
state: RootState<any, any, string>
endpointState?: QuerySubState<any>
}): boolean
/**
* All of these are `undefined` at runtime, purely to be used in TypeScript declarations!
*/
Types?: QueryTypes<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
}
export type QueryDefinition<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string
> = BaseEndpointDefinition<QueryArg, BaseQuery, ResultType> &
QueryExtraOptions<TagTypes, ResultType, QueryArg, BaseQuery, ReducerPath>
export interface MutationTypes<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string
> extends BaseEndpointTypes<QueryArg, BaseQuery, ResultType> {
/**
* The endpoint definition type. To be used with some internal generic types.
* @example
* ```ts
* const useMyWrappedHook: UseMutation<typeof api.endpoints.query.Types.MutationDefinition> = ...
* ```
*/
MutationDefinition: MutationDefinition<
QueryArg,
BaseQuery,
TagTypes,
ResultType,
ReducerPath
>
TagTypes: TagTypes
ReducerPath: ReducerPath
}
export interface MutationExtraOptions<
TagTypes extends string,
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
ReducerPath extends string = string
> {
type: DefinitionType.mutation
/**
* Used by `mutation` endpoints. Determines which cached data should be either re-fetched or removed from the cache.
* Expects the same shapes as `providesTags`.
*
* @example
*
* ```ts
* // codeblock-meta title="invalidatesTags example"
* import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* const api = createApi({
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
* tagTypes: ['Posts'],
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* query: () => 'posts',
* providesTags: (result) =>
* result
* ? [
* ...result.map(({ id }) => ({ type: 'Posts' as const, id })),
* { type: 'Posts', id: 'LIST' },
* ]
* : [{ type: 'Posts', id: 'LIST' }],
* }),
* addPost: build.mutation<Post, Partial<Post>>({
* query(body) {
* return {
* url: `posts`,
* method: 'POST',
* body,
* }
* },
* // highlight-start
* invalidatesTags: [{ type: 'Posts', id: 'LIST' }],
* // highlight-end
* }),
* })
* })
* ```
*/
invalidatesTags?: ResultDescription<
TagTypes,
ResultType,
QueryArg,
BaseQueryError<BaseQuery>,
BaseQueryMeta<BaseQuery>
>
/**
* Not to be used. A mutation should not provide tags to the cache.
*/
providesTags?: never
/**
* All of these are `undefined` at runtime, purely to be used in TypeScript declarations!
*/
Types?: MutationTypes<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
}
export type MutationDefinition<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string
> = BaseEndpointDefinition<QueryArg, BaseQuery, ResultType> &
MutationExtraOptions<TagTypes, ResultType, QueryArg, BaseQuery, ReducerPath>
export type EndpointDefinition<
QueryArg,
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ResultType,
ReducerPath extends string = string
> =
| QueryDefinition<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
| MutationDefinition<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
export type EndpointDefinitions = Record<
string,
EndpointDefinition<any, any, any, any>
>
export function isQueryDefinition(
e: EndpointDefinition<any, any, any, any>
): e is QueryDefinition<any, any, any, any> {
return e.type === DefinitionType.query
}
export function isMutationDefinition(
e: EndpointDefinition<any, any, any, any>
): e is MutationDefinition<any, any, any, any> {
return e.type === DefinitionType.mutation
}
export type EndpointBuilder<
BaseQuery extends BaseQueryFn,
TagTypes extends string,
ReducerPath extends string
> = {
/**
* An endpoint definition that retrieves data, and may provide tags to the cache.
*
* @example
* ```js
* // codeblock-meta title="Example of all query endpoint options"
* const api = createApi({
* baseQuery,
* endpoints: (build) => ({
* getPost: build.query({
* query: (id) => ({ url: `post/${id}` }),
* // Pick out data and prevent nested properties in a hook or selector
* transformResponse: (response) => response.data,
* // Pick out error and prevent nested properties in a hook or selector
* transformErrorResponse: (response) => response.error,
* // `result` is the server response
* providesTags: (result, error, id) => [{ type: 'Post', id }],
* // trigger side effects or optimistic updates
* onQueryStarted(id, { dispatch, getState, extra, requestId, queryFulfilled, getCacheEntry, updateCachedData }) {},
* // handle subscriptions etc
* onCacheEntryAdded(id, { dispatch, getState, extra, requestId, cacheEntryRemoved, cacheDataLoaded, getCacheEntry, updateCachedData }) {},
* }),
* }),
*});
*```
*/
query<ResultType, QueryArg>(
definition: OmitFromUnion<
QueryDefinition<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>,
'type'
>
): QueryDefinition<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
/**
* An endpoint definition that alters data on the server or will possibly invalidate the cache.
*
* @example
* ```js
* // codeblock-meta title="Example of all mutation endpoint options"
* const api = createApi({
* baseQuery,
* endpoints: (build) => ({
* updatePost: build.mutation({
* query: ({ id, ...patch }) => ({ url: `post/${id}`, method: 'PATCH', body: patch }),
* // Pick out data and prevent nested properties in a hook or selector
* transformResponse: (response) => response.data,
* // Pick out error and prevent nested properties in a hook or selector
* transformErrorResponse: (response) => response.error,
* // `result` is the server response
* invalidatesTags: (result, error, id) => [{ type: 'Post', id }],
* // trigger side effects or optimistic updates
* onQueryStarted(id, { dispatch, getState, extra, requestId, queryFulfilled, getCacheEntry }) {},
* // handle subscriptions etc
* onCacheEntryAdded(id, { dispatch, getState, extra, requestId, cacheEntryRemoved, cacheDataLoaded, getCacheEntry }) {},
* }),
* }),
* });
* ```
*/
mutation<ResultType, QueryArg>(
definition: OmitFromUnion<
MutationDefinition<
QueryArg,
BaseQuery,
TagTypes,
ResultType,
ReducerPath
>,
'type'
>
): MutationDefinition<QueryArg, BaseQuery, TagTypes, ResultType, ReducerPath>
}
export type AssertTagTypes = <T extends FullTagDescription<string>>(t: T) => T
export function calculateProvidedBy<ResultType, QueryArg, ErrorType, MetaType>(
description:
| ResultDescription<string, ResultType, QueryArg, ErrorType, MetaType>
| undefined,
result: ResultType | undefined,
error: ErrorType | undefined,
queryArg: QueryArg,
meta: MetaType | undefined,
assertTagTypes: AssertTagTypes
): readonly FullTagDescription<string>[] {
if (isFunction(description)) {
return description(
result as ResultType,
error as undefined,
queryArg,
meta as MetaType
)
.map(expandTagDescription)
.map(assertTagTypes)
}
if (Array.isArray(description)) {
return description.map(expandTagDescription).map(assertTagTypes)
}
return []
}
function isFunction<T>(t: T): t is Extract<T, Function> {
return typeof t === 'function'
}
export function expandTagDescription(
description: TagDescription<string>
): FullTagDescription<string> {
return typeof description === 'string' ? { type: description } : description
}
export type QueryArgFrom<D extends BaseEndpointDefinition<any, any, any>> =
D extends BaseEndpointDefinition<infer QA, any, any> ? QA : unknown
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, 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
export type TagTypesFromApi<T> = T extends Api<any, any, any, infer TagTypes>
? TagTypes
: never
export type DefinitionsFromApi<T> = T extends Api<
any,
infer Definitions,
any,
any
>
? Definitions
: never
export type TransformedResponse<
NewDefinitions extends EndpointDefinitions,
K,
ResultType
> = K extends keyof NewDefinitions
? NewDefinitions[K]['transformResponse'] extends undefined
? ResultType
: UnwrapPromise<
ReturnType<NonUndefined<NewDefinitions[K]['transformResponse']>>
>
: ResultType
export type OverrideResultType<Definition, NewResultType> =
Definition extends QueryDefinition<
infer QueryArg,
infer BaseQuery,
infer TagTypes,
any,
infer ReducerPath
>
? QueryDefinition<QueryArg, BaseQuery, TagTypes, NewResultType, ReducerPath>
: Definition extends MutationDefinition<
infer QueryArg,
infer BaseQuery,
infer TagTypes,
any,
infer ReducerPath
>
? MutationDefinition<
QueryArg,
BaseQuery,
TagTypes,
NewResultType,
ReducerPath
>
: never
export type UpdateDefinitions<
Definitions extends EndpointDefinitions,
NewTagTypes extends string,
NewDefinitions extends EndpointDefinitions
> = {
[K in keyof Definitions]: Definitions[K] extends QueryDefinition<
infer QueryArg,
infer BaseQuery,
any,
infer ResultType,
infer ReducerPath
>
? QueryDefinition<
QueryArg,
BaseQuery,
NewTagTypes,
TransformedResponse<NewDefinitions, K, ResultType>,
ReducerPath
>
: Definitions[K] extends MutationDefinition<
infer QueryArg,
infer BaseQuery,
any,
infer ResultType,
infer ReducerPath
>
? MutationDefinition<
QueryArg,
BaseQuery,
NewTagTypes,
TransformedResponse<NewDefinitions, K, ResultType>,
ReducerPath
>
: never
}

View File

@@ -0,0 +1,21 @@
import type { BaseQueryFn } from './baseQueryTypes'
const _NEVER = /* @__PURE__ */ Symbol()
export type NEVER = typeof _NEVER
/**
* Creates a "fake" baseQuery to be used if your api *only* uses the `queryFn` definition syntax.
* This also allows you to specify a specific error type to be shared by all your `queryFn` definitions.
*/
export function fakeBaseQuery<ErrorType>(): BaseQueryFn<
void,
NEVER,
ErrorType,
{}
> {
return function () {
throw new Error(
'When using `fakeBaseQuery`, all queries & mutations must use the `queryFn` definition syntax.'
)
}
}

View File

@@ -0,0 +1,359 @@
import { joinUrls } from './utils'
import { isPlainObject } from '@reduxjs/toolkit'
import type { BaseQueryApi, BaseQueryFn } from './baseQueryTypes'
import type { MaybePromise, Override } from './tsHelpers'
export type ResponseHandler =
| 'content-type'
| 'json'
| 'text'
| ((response: Response) => Promise<any>)
type CustomRequestInit = Override<
RequestInit,
{
headers?:
| Headers
| string[][]
| Record<string, string | undefined>
| undefined
}
>
export interface FetchArgs extends CustomRequestInit {
url: string
params?: Record<string, any>
body?: any
responseHandler?: ResponseHandler
validateStatus?: (response: Response, body: any) => boolean
/**
* A number in milliseconds that represents that maximum time a request can take before timing out.
*/
timeout?: number
}
/**
* A mini-wrapper that passes arguments straight through to
* {@link [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)}.
* Avoids storing `fetch` in a closure, in order to permit mocking/monkey-patching.
*/
const defaultFetchFn: typeof fetch = (...args) => fetch(...args)
const defaultValidateStatus = (response: Response) =>
response.status >= 200 && response.status <= 299
const defaultIsJsonContentType = (headers: Headers) =>
/*applicat*/ /ion\/(vnd\.api\+)?json/.test(headers.get('content-type') || '')
export type FetchBaseQueryError =
| {
/**
* * `number`:
* HTTP status code
*/
status: number
data: unknown
}
| {
/**
* * `"FETCH_ERROR"`:
* An error that occurred during execution of `fetch` or the `fetchFn` callback option
**/
status: 'FETCH_ERROR'
data?: undefined
error: string
}
| {
/**
* * `"PARSING_ERROR"`:
* An error happened during parsing.
* Most likely a non-JSON-response was returned with the default `responseHandler` "JSON",
* or an error occurred while executing a custom `responseHandler`.
**/
status: 'PARSING_ERROR'
originalStatus: number
data: string
error: string
}
| {
/**
* * `"TIMEOUT_ERROR"`:
* Request timed out
**/
status: 'TIMEOUT_ERROR'
data?: undefined
error: string
}
| {
/**
* * `"CUSTOM_ERROR"`:
* A custom error type that you can return from your `queryFn` where another error might not make sense.
**/
status: 'CUSTOM_ERROR'
data?: unknown
error: string
}
function stripUndefined(obj: any) {
if (!isPlainObject(obj)) {
return obj
}
const copy: Record<string, any> = { ...obj }
for (const [k, v] of Object.entries(copy)) {
if (v === undefined) delete copy[k]
}
return copy
}
export type FetchBaseQueryArgs = {
baseUrl?: string
prepareHeaders?: (
headers: Headers,
api: Pick<
BaseQueryApi,
'getState' | 'extra' | 'endpoint' | 'type' | 'forced'
>
) => MaybePromise<Headers | void>
fetchFn?: (
input: RequestInfo,
init?: RequestInit | undefined
) => Promise<Response>
paramsSerializer?: (params: Record<string, any>) => string
/**
* By default, we only check for 'application/json' and 'application/vnd.api+json' as the content-types for json. If you need to support another format, you can pass
* in a predicate function for your given api to get the same automatic stringifying behavior
* @example
* ```ts
* const isJsonContentType = (headers: Headers) => ["application/vnd.api+json", "application/json", "application/vnd.hal+json"].includes(headers.get("content-type")?.trim());
* ```
*/
isJsonContentType?: (headers: Headers) => boolean
/**
* Defaults to `application/json`;
*/
jsonContentType?: string
/**
* Custom replacer function used when calling `JSON.stringify()`;
*/
jsonReplacer?: (this: any, key: string, value: any) => any
} & RequestInit &
Pick<FetchArgs, 'responseHandler' | 'validateStatus' | 'timeout'>
export type FetchBaseQueryMeta = { request: Request; response?: Response }
/**
* This is a very small wrapper around fetch that aims to simplify requests.
*
* @example
* ```ts
* const baseQuery = fetchBaseQuery({
* baseUrl: 'https://api.your-really-great-app.com/v1/',
* prepareHeaders: (headers, { getState }) => {
* const token = (getState() as RootState).auth.token;
* // If we have a token set in state, let's assume that we should be passing it.
* if (token) {
* headers.set('authorization', `Bearer ${token}`);
* }
* return headers;
* },
* })
* ```
*
* @param {string} baseUrl
* The base URL for an API service.
* Typically in the format of https://example.com/
*
* @param {(headers: Headers, api: { getState: () => unknown; extra: unknown; endpoint: string; type: 'query' | 'mutation'; forced: boolean; }) => Headers} prepareHeaders
* An optional function that can be used to inject headers on requests.
* Provides a Headers object, as well as most of the `BaseQueryApi` (`dispatch` is not available).
* Useful for setting authentication or headers that need to be set conditionally.
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/Headers
*
* @param {(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>} fetchFn
* Accepts a custom `fetch` function if you do not want to use the default on the window.
* Useful in SSR environments if you need to use a library such as `isomorphic-fetch` or `cross-fetch`
*
* @param {(params: Record<string, unknown>) => string} paramsSerializer
* An optional function that can be used to stringify querystring parameters.
*
* @param {(headers: Headers) => boolean} isJsonContentType
* An optional predicate function to determine if `JSON.stringify()` should be called on the `body` arg of `FetchArgs`
*
* @param {string} jsonContentType Used when automatically setting the content-type header for a request with a jsonifiable body that does not have an explicit content-type header. Defaults to `application/json`.
*
* @param {(this: any, key: string, value: any) => any} jsonReplacer Custom replacer function used when calling `JSON.stringify()`.
*
* @param {number} timeout
* A number in milliseconds that represents the maximum time a request can take before timing out.
*/
export function fetchBaseQuery({
baseUrl,
prepareHeaders = (x) => x,
fetchFn = defaultFetchFn,
paramsSerializer,
isJsonContentType = defaultIsJsonContentType,
jsonContentType = 'application/json',
jsonReplacer,
timeout: defaultTimeout,
responseHandler: globalResponseHandler,
validateStatus: globalValidateStatus,
...baseFetchOptions
}: FetchBaseQueryArgs = {}): BaseQueryFn<
string | FetchArgs,
unknown,
FetchBaseQueryError,
{},
FetchBaseQueryMeta
> {
if (typeof fetch === 'undefined' && fetchFn === defaultFetchFn) {
console.warn(
'Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments.'
)
}
return async (arg, api) => {
const { signal, getState, extra, endpoint, forced, type } = api
let meta: FetchBaseQueryMeta | undefined
let {
url,
headers = new Headers(baseFetchOptions.headers),
params = undefined,
responseHandler = globalResponseHandler ?? ('json' as const),
validateStatus = globalValidateStatus ?? defaultValidateStatus,
timeout = defaultTimeout,
...rest
} = typeof arg == 'string' ? { url: arg } : arg
let config: RequestInit = {
...baseFetchOptions,
signal,
...rest,
}
headers = new Headers(stripUndefined(headers))
config.headers =
(await prepareHeaders(headers, {
getState,
extra,
endpoint,
forced,
type,
})) || headers
// Only set the content-type to json if appropriate. Will not be true for FormData, ArrayBuffer, Blob, etc.
const isJsonifiable = (body: any) =>
typeof body === 'object' &&
(isPlainObject(body) ||
Array.isArray(body) ||
typeof body.toJSON === 'function')
if (!config.headers.has('content-type') && isJsonifiable(config.body)) {
config.headers.set('content-type', jsonContentType)
}
if (isJsonifiable(config.body) && isJsonContentType(config.headers)) {
config.body = JSON.stringify(config.body, jsonReplacer)
}
if (params) {
const divider = ~url.indexOf('?') ? '&' : '?'
const query = paramsSerializer
? paramsSerializer(params)
: new URLSearchParams(stripUndefined(params))
url += divider + query
}
url = joinUrls(baseUrl, url)
const request = new Request(url, config)
const requestClone = new Request(url, config)
meta = { request: requestClone }
let response,
timedOut = false,
timeoutId =
timeout &&
setTimeout(() => {
timedOut = true
api.abort()
}, timeout)
try {
response = await fetchFn(request)
} catch (e) {
return {
error: {
status: timedOut ? 'TIMEOUT_ERROR' : 'FETCH_ERROR',
error: String(e),
},
meta,
}
} finally {
if (timeoutId) clearTimeout(timeoutId)
}
const responseClone = response.clone()
meta.response = responseClone
let resultData: any
let responseText: string = ''
try {
let handleResponseError
await Promise.all([
handleResponse(response, responseHandler).then(
(r) => (resultData = r),
(e) => (handleResponseError = e)
),
// see https://github.com/node-fetch/node-fetch/issues/665#issuecomment-538995182
// we *have* to "use up" both streams at the same time or they will stop running in node-fetch scenarios
responseClone.text().then(
(r) => (responseText = r),
() => {}
),
])
if (handleResponseError) throw handleResponseError
} catch (e) {
return {
error: {
status: 'PARSING_ERROR',
originalStatus: response.status,
data: responseText,
error: String(e),
},
meta,
}
}
return validateStatus(response, resultData)
? {
data: resultData,
meta,
}
: {
error: {
status: response.status,
data: resultData,
},
meta,
}
}
async function handleResponse(
response: Response,
responseHandler: ResponseHandler
) {
if (typeof responseHandler === 'function') {
return responseHandler(response)
}
if (responseHandler === 'content-type') {
responseHandler = isJsonContentType(response.headers) ? 'json' : 'text'
}
if (responseHandler === 'json') {
const text = await response.text()
return text.length ? JSON.parse(text) : null
}
return response.text()
}
}

View File

@@ -0,0 +1,62 @@
export type {
CombinedState,
QueryCacheKey,
QueryKeys,
QuerySubState,
RootState,
SubscriptionOptions,
} from './core/apiState'
export { QueryStatus } from './core/apiState'
export type { Api, ApiContext, ApiModules, Module } from './apiTypes'
export type {
BaseQueryApi,
BaseQueryEnhancer,
BaseQueryFn,
} from './baseQueryTypes'
export type {
EndpointDefinitions,
EndpointDefinition,
QueryDefinition,
MutationDefinition,
TagDescription,
QueryArgFrom,
ResultTypeFrom,
DefinitionType,
} from './endpointDefinitions'
export { fetchBaseQuery } from './fetchBaseQuery'
export type {
FetchBaseQueryError,
FetchBaseQueryMeta,
FetchArgs,
} from './fetchBaseQuery'
export { retry } from './retry'
export { setupListeners } from './core/setupListeners'
export { skipSelector, skipToken } from './core/buildSelectors'
export type {
QueryResultSelectorResult,
MutationResultSelectorResult,
SkipToken,
} from './core/buildSelectors'
export type {
QueryActionCreatorResult,
MutationActionCreatorResult,
} from './core/buildInitiate'
export type { CreateApi, CreateApiOptions } from './createApi'
export { buildCreateApi } from './createApi'
export { fakeBaseQuery } from './fakeBaseQuery'
export { copyWithStructuralSharing } from './utils/copyWithStructuralSharing'
export { createApi, coreModule, coreModuleName } from './core'
export type {
ApiEndpointMutation,
ApiEndpointQuery,
CoreModule,
PrefetchOptions,
} from './core/module'
export { defaultSerializeQueryArgs } from './defaultSerializeQueryArgs'
export type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
export type {
Id as TSHelpersId,
NoInfer as TSHelpersNoInfer,
Override as TSHelpersOverride,
} from './tsHelpers'

View File

@@ -0,0 +1,62 @@
import { configureStore } from '@reduxjs/toolkit'
import type { Context } from 'react'
import { useEffect } from 'react'
import React from 'react'
import type { ReactReduxContextValue } from 'react-redux'
import { Provider } from 'react-redux'
import { setupListeners } from '@reduxjs/toolkit/query'
import type { Api } from '@reduxjs/toolkit/query'
/**
* Can be used as a `Provider` if you **do not already have a Redux store**.
*
* @example
* ```tsx
* // codeblock-meta no-transpile title="Basic usage - wrap your App with ApiProvider"
* import * as React from 'react';
* import { ApiProvider } from '@reduxjs/toolkit/query/react';
* import { Pokemon } from './features/Pokemon';
*
* function App() {
* return (
* <ApiProvider api={api}>
* <Pokemon />
* </ApiProvider>
* );
* }
* ```
*
* @remarks
* Using this together with an existing redux store, both will
* conflict with each other - please use the traditional redux setup
* in that case.
*/
export function ApiProvider<A extends Api<any, {}, any, any>>(props: {
children: any
api: A
setupListeners?: Parameters<typeof setupListeners>[1] | false
context?: Context<ReactReduxContextValue>
}) {
const [store] = React.useState(() =>
configureStore({
reducer: {
[props.api.reducerPath]: props.api.reducer,
},
middleware: (gDM) => gDM().concat(props.api.middleware),
})
)
// Adds the event listeners for online/offline/focus/etc
useEffect(
(): undefined | (() => void) =>
props.setupListeners === false
? undefined
: setupListeners(store.dispatch, props.setupListeners),
[props.setupListeners, store.dispatch]
)
return (
<Provider store={store} context={props.context}>
{props.children}
</Provider>
)
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,2 @@
export const UNINITIALIZED_VALUE = Symbol()
export type UninitializedValue = typeof UNINITIALIZED_VALUE

View File

@@ -0,0 +1,18 @@
import { coreModule, buildCreateApi } from '@reduxjs/toolkit/query'
import { reactHooksModule, reactHooksModuleName } from './module'
export * from '@reduxjs/toolkit/query'
export { ApiProvider } from './ApiProvider'
const createApi = /* @__PURE__ */ buildCreateApi(
coreModule(),
reactHooksModule()
)
export type {
TypedUseQueryHookResult,
TypedUseQueryStateResult,
TypedUseQuerySubscriptionResult,
TypedUseMutationResult,
} from './buildHooks'
export { createApi, reactHooksModule, reactHooksModuleName }

View File

@@ -0,0 +1,185 @@
import type { MutationHooks, QueryHooks } from './buildHooks'
import { buildHooks } from './buildHooks'
import { isQueryDefinition, isMutationDefinition } from '../endpointDefinitions'
import type {
EndpointDefinitions,
QueryDefinition,
MutationDefinition,
QueryArgFrom,
} from '@reduxjs/toolkit/query'
import type { Api, Module } from '../apiTypes'
import { capitalize } from '../utils'
import { safeAssign } from '../tsHelpers'
import type { BaseQueryFn } from '@reduxjs/toolkit/query'
import type { HooksWithUniqueNames } from './namedHooks'
import {
useDispatch as rrUseDispatch,
useSelector as rrUseSelector,
useStore as rrUseStore,
batch as rrBatch,
} from 'react-redux'
import type { QueryKeys } from '../core/apiState'
import type { PrefetchOptions } from '../core/module'
export const reactHooksModuleName = /* @__PURE__ */ Symbol()
export type ReactHooksModule = typeof reactHooksModuleName
declare module '@reduxjs/toolkit/query' {
export interface ApiModules<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ReducerPath extends string,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
TagTypes extends string
> {
[reactHooksModuleName]: {
/**
* Endpoints based on the input endpoints provided to `createApi`, containing `select`, `hooks` and `action matchers`.
*/
endpoints: {
[K in keyof Definitions]: Definitions[K] extends QueryDefinition<
any,
any,
any,
any,
any
>
? QueryHooks<Definitions[K]>
: Definitions[K] extends MutationDefinition<any, any, any, any, any>
? MutationHooks<Definitions[K]>
: never
}
/**
* A hook that accepts a string endpoint name, and provides a callback that when called, pre-fetches the data for that endpoint.
*/
usePrefetch<EndpointName extends QueryKeys<Definitions>>(
endpointName: EndpointName,
options?: PrefetchOptions
): (
arg: QueryArgFrom<Definitions[EndpointName]>,
options?: PrefetchOptions
) => void
} & HooksWithUniqueNames<Definitions>
}
}
type RR = typeof import('react-redux')
export interface ReactHooksModuleOptions {
/**
* The version of the `batchedUpdates` function to be used
*/
batch?: RR['batch']
/**
* The version of the `useDispatch` hook to be used
*/
useDispatch?: RR['useDispatch']
/**
* The version of the `useSelector` hook to be used
*/
useSelector?: RR['useSelector']
/**
* The version of the `useStore` hook to be used
*/
useStore?: RR['useStore']
/**
* Enables performing asynchronous tasks immediately within a render.
*
* @example
*
* ```ts
* import {
* buildCreateApi,
* coreModule,
* reactHooksModule
* } from '@reduxjs/toolkit/query/react'
*
* const createApi = buildCreateApi(
* coreModule(),
* reactHooksModule({ unstable__sideEffectsInRender: true })
* )
* ```
*/
unstable__sideEffectsInRender?: boolean
}
/**
* Creates a module that generates react hooks from endpoints, for use with `buildCreateApi`.
*
* @example
* ```ts
* const MyContext = React.createContext<ReactReduxContextValue>(null as any);
* const customCreateApi = buildCreateApi(
* coreModule(),
* reactHooksModule({ useDispatch: createDispatchHook(MyContext) })
* );
* ```
*
* @returns A module for use with `buildCreateApi`
*/
export const reactHooksModule = ({
batch = rrBatch,
useDispatch = rrUseDispatch,
useSelector = rrUseSelector,
useStore = rrUseStore,
unstable__sideEffectsInRender = false,
}: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => ({
name: reactHooksModuleName,
init(api, { serializeQueryArgs }, context) {
const anyApi = api as any as Api<
any,
Record<string, any>,
string,
string,
ReactHooksModule
>
const { buildQueryHooks, buildMutationHook, usePrefetch } = buildHooks({
api,
moduleOptions: {
batch,
useDispatch,
useSelector,
useStore,
unstable__sideEffectsInRender,
},
serializeQueryArgs,
context,
})
safeAssign(anyApi, { usePrefetch })
safeAssign(context, { batch })
return {
injectEndpoint(endpointName, definition) {
if (isQueryDefinition(definition)) {
const {
useQuery,
useLazyQuery,
useLazyQuerySubscription,
useQueryState,
useQuerySubscription,
} = buildQueryHooks(endpointName)
safeAssign(anyApi.endpoints[endpointName], {
useQuery,
useLazyQuery,
useLazyQuerySubscription,
useQueryState,
useQuerySubscription,
})
;(api as any)[`use${capitalize(endpointName)}Query`] = useQuery
;(api as any)[`useLazy${capitalize(endpointName)}Query`] =
useLazyQuery
} else if (isMutationDefinition(definition)) {
const useMutation = buildMutationHook(endpointName)
safeAssign(anyApi.endpoints[endpointName], {
useMutation,
})
;(api as any)[`use${capitalize(endpointName)}Mutation`] = useMutation
}
},
}
},
})

View File

@@ -0,0 +1,42 @@
import type { UseMutation, UseLazyQuery, UseQuery } from './buildHooks'
import type {
DefinitionType,
EndpointDefinitions,
MutationDefinition,
QueryDefinition,
} from '@reduxjs/toolkit/query'
type QueryHookNames<Definitions extends EndpointDefinitions> = {
[K in keyof Definitions as Definitions[K] extends {
type: DefinitionType.query
}
? `use${Capitalize<K & string>}Query`
: never]: UseQuery<
Extract<Definitions[K], QueryDefinition<any, any, any, any>>
>
}
type LazyQueryHookNames<Definitions extends EndpointDefinitions> = {
[K in keyof Definitions as Definitions[K] extends {
type: DefinitionType.query
}
? `useLazy${Capitalize<K & string>}Query`
: never]: UseLazyQuery<
Extract<Definitions[K], QueryDefinition<any, any, any, any>>
>
}
type MutationHookNames<Definitions extends EndpointDefinitions> = {
[K in keyof Definitions as Definitions[K] extends {
type: DefinitionType.mutation
}
? `use${Capitalize<K & string>}Mutation`
: never]: UseMutation<
Extract<Definitions[K], MutationDefinition<any, any, any, any>>
>
}
export type HooksWithUniqueNames<Definitions extends EndpointDefinitions> =
QueryHookNames<Definitions> &
LazyQueryHookNames<Definitions> &
MutationHookNames<Definitions>

View File

@@ -0,0 +1,31 @@
import { useEffect, useRef, useMemo } from 'react'
import type { SerializeQueryArgs } from '@reduxjs/toolkit/query'
import type { EndpointDefinition } from '@reduxjs/toolkit/query'
export function useStableQueryArgs<T>(
queryArgs: T,
serialize: SerializeQueryArgs<any>,
endpointDefinition: EndpointDefinition<any, any, any, any>,
endpointName: string
) {
const incoming = useMemo(
() => ({
queryArgs,
serialized:
typeof queryArgs == 'object'
? serialize({ queryArgs, endpointDefinition, endpointName })
: queryArgs,
}),
[queryArgs, serialize, endpointDefinition, endpointName]
)
const cache = useRef(incoming)
useEffect(() => {
if (cache.current.serialized !== incoming.serialized) {
cache.current = incoming
}
}, [incoming])
return cache.current.serialized === incoming.serialized
? cache.current.queryArgs
: queryArgs
}

View File

@@ -0,0 +1,13 @@
import { useEffect, useRef } from 'react'
import { shallowEqual } from 'react-redux'
export function useShallowStableValue<T>(value: T) {
const cache = useRef(value)
useEffect(() => {
if (!shallowEqual(cache.current, value)) {
cache.current = value
}
}, [value])
return shallowEqual(cache.current, value) ? cache.current : value
}

172
server/node_modules/@reduxjs/toolkit/src/query/retry.ts generated vendored Normal file
View File

@@ -0,0 +1,172 @@
import type {
BaseQueryApi,
BaseQueryArg,
BaseQueryEnhancer,
BaseQueryExtraOptions,
BaseQueryFn,
} from './baseQueryTypes'
import type { FetchBaseQueryError } from './fetchBaseQuery'
import { HandledError } from './HandledError'
/**
* Exponential backoff based on the attempt number.
*
* @remarks
* 1. 600ms * random(0.4, 1.4)
* 2. 1200ms * random(0.4, 1.4)
* 3. 2400ms * random(0.4, 1.4)
* 4. 4800ms * random(0.4, 1.4)
* 5. 9600ms * random(0.4, 1.4)
*
* @param attempt - Current attempt
* @param maxRetries - Maximum number of retries
*/
async function defaultBackoff(attempt: number = 0, maxRetries: number = 5) {
const attempts = Math.min(attempt, maxRetries)
const timeout = ~~((Math.random() + 0.4) * (300 << attempts)) // Force a positive int in the case we make this an option
await new Promise((resolve) =>
setTimeout((res: any) => resolve(res), timeout)
)
}
type RetryConditionFunction = (
error: FetchBaseQueryError,
args: BaseQueryArg<BaseQueryFn>,
extraArgs: {
attempt: number
baseQueryApi: BaseQueryApi
extraOptions: BaseQueryExtraOptions<BaseQueryFn> & RetryOptions
}
) => boolean
export type RetryOptions = {
/**
* Function used to determine delay between retries
*/
backoff?: (attempt: number, maxRetries: number) => Promise<void>
} & (
| {
/**
* How many times the query will be retried (default: 5)
*/
maxRetries?: number
retryCondition?: undefined
}
| {
/**
* Callback to determine if a retry should be attempted.
* Return `true` for another retry and `false` to quit trying prematurely.
*/
retryCondition?: RetryConditionFunction
maxRetries?: undefined
}
)
function fail(e: any): never {
throw Object.assign(new HandledError({ error: e }), {
throwImmediately: true,
})
}
const EMPTY_OPTIONS = {}
const retryWithBackoff: BaseQueryEnhancer<
unknown,
RetryOptions,
RetryOptions | void
> = (baseQuery, defaultOptions) => async (args, api, extraOptions) => {
// We need to figure out `maxRetries` before we define `defaultRetryCondition.
// This is probably goofy, but ought to work.
// Put our defaults in one array, filter out undefineds, grab the last value.
const possibleMaxRetries: number[] = [
5,
((defaultOptions as any) || EMPTY_OPTIONS).maxRetries,
((extraOptions as any) || EMPTY_OPTIONS).maxRetries,
].filter(x => x !== undefined)
const [maxRetries] = possibleMaxRetries.slice(-1)
const defaultRetryCondition: RetryConditionFunction = (_, __, { attempt }) =>
attempt <= maxRetries
const options: {
maxRetries: number
backoff: typeof defaultBackoff
retryCondition: typeof defaultRetryCondition
} = {
maxRetries,
backoff: defaultBackoff,
retryCondition: defaultRetryCondition,
...defaultOptions,
...extraOptions,
}
let retry = 0
while (true) {
try {
const result = await baseQuery(args, api, extraOptions)
// baseQueries _should_ return an error property, so we should check for that and throw it to continue retrying
if (result.error) {
throw new HandledError(result)
}
return result
} catch (e: any) {
retry++
if (e.throwImmediately) {
if (e instanceof HandledError) {
return e.value
}
// We don't know what this is, so we have to rethrow it
throw e
}
if (
e instanceof HandledError &&
!options.retryCondition(e.value.error as FetchBaseQueryError, args, {
attempt: retry,
baseQueryApi: api,
extraOptions,
})
) {
return e.value
}
await options.backoff(retry, options.maxRetries)
}
}
}
/**
* A utility that can wrap `baseQuery` in the API definition to provide retries with a basic exponential backoff.
*
* @example
*
* ```ts
* // codeblock-meta title="Retry every request 5 times by default"
* import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react'
* interface Post {
* id: number
* name: string
* }
* type PostsResponse = Post[]
*
* // maxRetries: 5 is the default, and can be omitted. Shown for documentation purposes.
* const staggeredBaseQuery = retry(fetchBaseQuery({ baseUrl: '/' }), { maxRetries: 5 });
* export const api = createApi({
* baseQuery: staggeredBaseQuery,
* endpoints: (build) => ({
* getPosts: build.query<PostsResponse, void>({
* query: () => ({ url: 'posts' }),
* }),
* getPost: build.query<PostsResponse, string>({
* query: (id) => ({ url: `post/${id}` }),
* extraOptions: { maxRetries: 8 }, // You can override the retry behavior on each endpoint
* }),
* }),
* });
*
* export const { useGetPostsQuery, useGetPostQuery } = api;
* ```
*/
export const retry = /* @__PURE__ */ Object.assign(retryWithBackoff, { fail })

View File

@@ -0,0 +1,60 @@
import * as React from 'react'
import { createApi, ApiProvider } from '@reduxjs/toolkit/query/react'
import { fireEvent, render, waitFor } from '@testing-library/react'
import { waitMs } from './helpers'
const api = createApi({
baseQuery: async (arg: any) => {
await waitMs()
return { data: arg?.body ? arg.body : null }
},
endpoints: (build) => ({
getUser: build.query<any, number>({
query: (arg) => arg,
}),
updateUser: build.mutation<any, { name: string }>({
query: (update) => ({ body: update }),
}),
}),
})
describe('ApiProvider', () => {
test('ApiProvider allows a user to make queries without a traditional Redux setup', async () => {
function User() {
const [value, setValue] = React.useState(0)
const { isFetching } = api.endpoints.getUser.useQuery(1, {
skip: value < 1,
})
return (
<div>
<div data-testid="isFetching">{String(isFetching)}</div>
<button onClick={() => setValue((val) => val + 1)}>
Increment value
</button>
</div>
)
}
const { getByText, getByTestId } = render(
<ApiProvider api={api}>
<User />
</ApiProvider>
)
await waitFor(() =>
expect(getByTestId('isFetching').textContent).toBe('false')
)
fireEvent.click(getByText('Increment value'))
await waitFor(() =>
expect(getByTestId('isFetching').textContent).toBe('true')
)
await waitFor(() =>
expect(getByTestId('isFetching').textContent).toBe('false')
)
fireEvent.click(getByText('Increment value'))
// Being that nothing has changed in the args, this should never fire.
expect(getByTestId('isFetching').textContent).toBe('false')
})
})

View File

@@ -0,0 +1,33 @@
import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query'
/**
* Test: BaseQuery meta types propagate to endpoint callbacks
*/
{
createApi({
baseQuery: fetchBaseQuery(),
endpoints: (build) => ({
getDummy: build.query<null, undefined>({
query: () => 'dummy',
onCacheEntryAdded: async (arg, { cacheDataLoaded }) => {
const { meta } = await cacheDataLoaded
const { request, response } = meta! // Expect request and response to be there
},
}),
}),
})
const baseQuery = retry(fetchBaseQuery()) // Even when wrapped with retry
createApi({
baseQuery,
endpoints: (build) => ({
getDummy: build.query<null, undefined>({
query: () => 'dummy',
onCacheEntryAdded: async (arg, { cacheDataLoaded }) => {
const { meta } = await cacheDataLoaded
const { request, response } = meta! // Expect request and response to be there
},
}),
}),
})
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,54 @@
import { createApi } from '../core'
import { fakeBaseQuery } from '../fakeBaseQuery'
import { setupApiStore } from './helpers'
let calls = 0
const api = createApi({
baseQuery: fakeBaseQuery(),
endpoints: (build) => ({
increment: build.query<number, void>({
async queryFn() {
const data = calls++
await Promise.resolve()
return { data }
},
}),
}),
})
const storeRef = setupApiStore(api)
test('multiple synchonrous initiate calls with pre-existing cache entry', async () => {
const { store, api } = storeRef
// seed the store
const firstValue = await store.dispatch(api.endpoints.increment.initiate())
expect(firstValue).toMatchObject({ data: 0, status: 'fulfilled' })
// dispatch another increment
const secondValuePromise = store.dispatch(api.endpoints.increment.initiate())
// and one with a forced refresh
const thirdValuePromise = store.dispatch(
api.endpoints.increment.initiate(undefined, { forceRefetch: true })
)
// and another increment
const fourthValuePromise = store.dispatch(api.endpoints.increment.initiate())
const secondValue = await secondValuePromise
const thirdValue = await thirdValuePromise
const fourthValue = await fourthValuePromise
expect(secondValue).toMatchObject({
data: firstValue.data,
status: 'fulfilled',
requestId: firstValue.requestId,
})
expect(thirdValue).toMatchObject({ data: 1, status: 'fulfilled' })
expect(thirdValue.requestId).not.toBe(firstValue.requestId)
expect(fourthValue).toMatchObject({
data: thirdValue.data,
status: 'fulfilled',
requestId: thirdValue.requestId,
})
})

View File

@@ -0,0 +1,121 @@
import { createApi } from '@reduxjs/toolkit/query'
import { actionsReducer, setupApiStore, waitMs } from './helpers'
const baseQuery = (args?: any) => ({ data: args })
const api = createApi({
baseQuery,
tagTypes: ['Banana', 'Bread'],
endpoints: (build) => ({
getBanana: build.query<unknown, number>({
query(id) {
return { url: `banana/${id}` }
},
providesTags: ['Banana'],
}),
getBananas: build.query<unknown, void>({
query() {
return { url: 'bananas' }
},
providesTags: ['Banana'],
}),
getBread: build.query<unknown, number>({
query(id) {
return { url: `bread/${id}` }
},
providesTags: ['Bread'],
}),
}),
})
const { getBanana, getBread } = api.endpoints
const storeRef = setupApiStore(api, {
...actionsReducer,
})
it('invalidates the specified tags', async () => {
await storeRef.store.dispatch(getBanana.initiate(1))
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
getBanana.matchPending,
api.internalActions.subscriptionsUpdated.match,
getBanana.matchFulfilled
)
await storeRef.store.dispatch(api.util.invalidateTags(['Banana', 'Bread']))
// Slight pause to let the middleware run and such
await waitMs(20)
const firstSequence = [
api.internalActions.middlewareRegistered.match,
getBanana.matchPending,
api.internalActions.subscriptionsUpdated.match,
getBanana.matchFulfilled,
api.util.invalidateTags.match,
getBanana.matchPending,
getBanana.matchFulfilled,
]
expect(storeRef.store.getState().actions).toMatchSequence(...firstSequence)
await storeRef.store.dispatch(getBread.initiate(1))
await storeRef.store.dispatch(api.util.invalidateTags([{ type: 'Bread' }]))
await waitMs(20)
expect(storeRef.store.getState().actions).toMatchSequence(
...firstSequence,
getBread.matchPending,
api.internalActions.subscriptionsUpdated.match,
getBread.matchFulfilled,
api.util.invalidateTags.match,
getBread.matchPending,
getBread.matchFulfilled
)
})
describe.skip('TS only tests', () => {
it('should allow for an array of string TagTypes', () => {
api.util.invalidateTags(['Banana', 'Bread'])
})
it('should allow for an array of full TagTypes descriptions', () => {
api.util.invalidateTags([{ type: 'Banana' }, { type: 'Bread', id: 1 }])
})
it('should allow for a mix of full descriptions as well as plain strings', () => {
api.util.invalidateTags(['Banana', { type: 'Bread', id: 1 }])
})
it('should error when using non-existing TagTypes', () => {
// @ts-expect-error
api.util.invalidateTags(['Missing Tag'])
})
it('should error when using non-existing TagTypes in the full format', () => {
// @ts-expect-error
api.util.invalidateTags([{ type: 'Missing' }])
})
it('should allow pre-fetching for an endpoint that takes an arg', () => {
api.util.prefetch('getBanana', 5, { force: true })
api.util.prefetch('getBanana', 5, { force: false })
api.util.prefetch('getBanana', 5, { ifOlderThan: false })
api.util.prefetch('getBanana', 5, { ifOlderThan: 30 })
api.util.prefetch('getBanana', 5, {})
})
it('should error when pre-fetching with the incorrect arg type', () => {
// @ts-expect-error arg should be number, not string
api.util.prefetch('getBanana', '5', { force: true })
})
it('should allow pre-fetching for an endpoint with a void arg', () => {
api.util.prefetch('getBananas', undefined, { force: true })
api.util.prefetch('getBananas', undefined, { force: false })
api.util.prefetch('getBananas', undefined, { ifOlderThan: false })
api.util.prefetch('getBananas', undefined, { ifOlderThan: 30 })
api.util.prefetch('getBananas', undefined, {})
})
it('should error when pre-fetching with a defined arg when expecting void', () => {
// @ts-expect-error arg should be void, not number
api.util.prefetch('getBananas', 5, { force: true })
})
it('should error when pre-fetching for an incorrect endpoint name', () => {
// @ts-expect-error endpoint name does not exist
api.util.prefetch('getPomegranates', undefined, { force: true })
})
})

View File

@@ -0,0 +1,55 @@
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,
other: () => 1,
},
})
const todoTitle = firstTodoTitleSelector(store.getState())
// This only compiles if we carried the types through
const upperTitle = todoTitle.toUpperCase()
expectExactType<string>(upperTitle)
})
})

View File

@@ -0,0 +1,225 @@
import { createSlice } from '@reduxjs/toolkit'
import { createApi } from '@reduxjs/toolkit/query'
import { setupApiStore } from './helpers'
import { delay } from '../../utils'
let shouldApiResponseSuccess = true
const baseQuery = (args?: any) => ({ data: args })
const api = createApi({
baseQuery,
tagTypes: ['SUCCEED', 'FAILED'],
endpoints: (build) => ({
getUser: build.query<{ url: string; success: boolean }, number>({
query(id) {
return { url: `user/${id}`, success: shouldApiResponseSuccess }
},
providesTags: (result) => (result?.success ? ['SUCCEED'] : ['FAILED']),
}),
}),
})
const { getUser } = api.endpoints
const authSlice = createSlice({
name: 'auth',
initialState: {
token: '1234',
},
reducers: {
setToken(state, action) {
state.token = action.payload
},
},
})
const storeRef = setupApiStore(api, { auth: authSlice.reducer })
describe('buildSlice', () => {
beforeEach(() => {
shouldApiResponseSuccess = true
})
it('only resets the api state when resetApiState is dispatched', async () => {
storeRef.store.dispatch({ type: 'unrelated' }) // trigger "registered middleware" into place
const initialState = storeRef.store.getState()
await storeRef.store.dispatch(
getUser.initiate(1, { subscriptionOptions: { pollingInterval: 10 } })
)
const initialQueryState = {
api: {
config: {
focused: true,
keepUnusedDataFor: 60,
middlewareRegistered: true,
online: true,
reducerPath: 'api',
refetchOnFocus: false,
refetchOnMountOrArgChange: false,
refetchOnReconnect: false,
},
mutations: {},
provided: expect.any(Object),
queries: {
'getUser(1)': {
data: {
success: true,
url: 'user/1',
},
endpointName: 'getUser',
fulfilledTimeStamp: expect.any(Number),
originalArgs: 1,
requestId: expect.any(String),
startedTimeStamp: expect.any(Number),
status: 'fulfilled',
},
},
// Filled in a tick later
subscriptions: expect.any(Object),
},
auth: {
token: '1234',
},
}
expect(storeRef.store.getState()).toEqual(initialQueryState)
await delay(1)
expect(storeRef.store.getState()).toEqual({
...initialQueryState,
api: {
...initialQueryState.api,
subscriptions: {
'getUser(1)': expect.any(Object),
},
},
})
storeRef.store.dispatch(api.util.resetApiState())
expect(storeRef.store.getState()).toEqual(initialState)
})
it('replaces previous tags with new provided tags', async () => {
await storeRef.store.dispatch(getUser.initiate(1))
expect(
api.util.selectInvalidatedBy(storeRef.store.getState(), ['SUCCEED'])
).toHaveLength(1)
expect(
api.util.selectInvalidatedBy(storeRef.store.getState(), ['FAILED'])
).toHaveLength(0)
shouldApiResponseSuccess = false
storeRef.store.dispatch(getUser.initiate(1)).refetch()
await delay(10)
expect(
api.util.selectInvalidatedBy(storeRef.store.getState(), ['SUCCEED'])
).toHaveLength(0)
expect(
api.util.selectInvalidatedBy(storeRef.store.getState(), ['FAILED'])
).toHaveLength(1)
})
})
describe('`merge` callback', () => {
const baseQuery = (args?: any) => ({ data: args })
interface Todo {
id: string
text: string
}
it('Calls `merge` once there is existing data, and allows mutations of cache state', async () => {
let mergeCalled = false
let queryFnCalls = 0
const todoTexts = ['A', 'B', 'C', 'D']
const api = createApi({
baseQuery,
endpoints: (build) => ({
getTodos: build.query<Todo[], void>({
async queryFn() {
const text = todoTexts[queryFnCalls]
return { data: [{ id: `${queryFnCalls++}`, text }] }
},
merge(currentCacheValue, responseData) {
mergeCalled = true
currentCacheValue.push(...responseData)
},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
const selectTodoEntry = api.endpoints.getTodos.select()
const res = storeRef.store.dispatch(api.endpoints.getTodos.initiate())
await res
expect(mergeCalled).toBe(false)
const todoEntry1 = selectTodoEntry(storeRef.store.getState())
expect(todoEntry1.data).toEqual([{ id: '0', text: 'A' }])
res.refetch()
await delay(10)
expect(mergeCalled).toBe(true)
const todoEntry2 = selectTodoEntry(storeRef.store.getState())
expect(todoEntry2.data).toEqual([
{ id: '0', text: 'A' },
{ id: '1', text: 'B' },
])
})
it('Allows returning a different value from `merge`', async () => {
let firstQueryFnCall = true
const api = createApi({
baseQuery,
endpoints: (build) => ({
getTodos: build.query<Todo[], void>({
async queryFn() {
const item = firstQueryFnCall
? { id: '0', text: 'A' }
: { id: '1', text: 'B' }
firstQueryFnCall = false
return { data: [item] }
},
merge(currentCacheValue, responseData) {
return responseData
},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
const selectTodoEntry = api.endpoints.getTodos.select()
const res = storeRef.store.dispatch(api.endpoints.getTodos.initiate())
await res
const todoEntry1 = selectTodoEntry(storeRef.store.getState())
expect(todoEntry1.data).toEqual([{ id: '0', text: 'A' }])
res.refetch()
await delay(10)
const todoEntry2 = selectTodoEntry(storeRef.store.getState())
expect(todoEntry2.data).toEqual([{ id: '1', text: 'B' }])
})
})

View File

@@ -0,0 +1,202 @@
import { configureStore } from '@reduxjs/toolkit'
import { createApi } from '@reduxjs/toolkit/query/react'
import { renderHook, waitFor } from '@testing-library/react'
import type { BaseQueryApi } from '../baseQueryTypes'
import { withProvider } from './helpers'
test('handles a non-async baseQuery without error', async () => {
const baseQuery = (args?: any) => ({ data: args })
const api = createApi({
baseQuery,
endpoints: (build) => ({
getUser: build.query<unknown, number>({
query(id) {
return { url: `user/${id}` }
},
}),
}),
})
const { getUser } = api.endpoints
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (gDM) => gDM().concat(api.middleware),
})
const promise = store.dispatch(getUser.initiate(1))
const { data } = await promise
expect(data).toEqual({
url: 'user/1',
})
const storeResult = getUser.select(1)(store.getState())
expect(storeResult).toEqual({
data: {
url: 'user/1',
},
endpointName: 'getUser',
isError: false,
isLoading: false,
isSuccess: true,
isUninitialized: false,
originalArgs: 1,
requestId: expect.any(String),
status: 'fulfilled',
startedTimeStamp: expect.any(Number),
fulfilledTimeStamp: expect.any(Number),
})
})
test('passes the extraArgument property to the baseQueryApi', async () => {
const baseQuery = (_args: any, api: BaseQueryApi) => ({ data: api.extra })
const api = createApi({
baseQuery,
endpoints: (build) => ({
getUser: build.query<unknown, void>({
query: () => '',
}),
}),
})
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (gDM) =>
gDM({ thunk: { extraArgument: 'cakes' } }).concat(api.middleware),
})
const { getUser } = api.endpoints
const { data } = await store.dispatch(getUser.initiate())
expect(data).toBe('cakes')
})
describe('re-triggering behavior on arg change', () => {
const api = createApi({
baseQuery: () => ({ data: null }),
endpoints: (build) => ({
getUser: build.query<any, any>({
query: (obj) => obj,
}),
}),
})
const { getUser } = api.endpoints
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gDM) => gDM().concat(api.middleware),
})
const spy = jest.spyOn(getUser, 'initiate')
beforeEach(() => void spy.mockClear())
test('re-trigger on literal value change', async () => {
const { result, rerender } = renderHook(
(props) => getUser.useQuery(props),
{
wrapper: withProvider(store),
initialProps: 5,
}
)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(1)
for (let x = 1; x < 3; x++) {
rerender(6)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(2)
}
for (let x = 1; x < 3; x++) {
rerender(7)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(3)
}
})
test('only re-trigger on shallow-equal arg change', async () => {
const { result, rerender } = renderHook(
(props) => getUser.useQuery(props),
{
wrapper: withProvider(store),
initialProps: { name: 'Bob', likes: 'iceCream' },
}
)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(1)
for (let x = 1; x < 3; x++) {
rerender({ name: 'Bob', likes: 'waffles' })
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(2)
}
for (let x = 1; x < 3; x++) {
rerender({ name: 'Alice', likes: 'waffles' })
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(3)
}
})
test('re-triggers every time on deeper value changes', async () => {
const name = 'Tim'
const { result, rerender } = renderHook(
(props) => getUser.useQuery(props),
{
wrapper: withProvider(store),
initialProps: { person: { name } },
}
)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(1)
for (let x = 1; x < 3; x++) {
rerender({ person: { name: name + x } })
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(x + 1)
}
})
test('do not re-trigger if the order of keys change while maintaining the same values', async () => {
const { result, rerender } = renderHook(
(props) => getUser.useQuery(props),
{
wrapper: withProvider(store),
initialProps: { name: 'Tim', likes: 'Bananas' },
}
)
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(1)
for (let x = 1; x < 3; x++) {
rerender({ likes: 'Bananas', name: 'Tim' })
await waitFor(() => {
expect(result.current.status).not.toBe('pending')
})
expect(spy).toHaveBeenCalledTimes(1)
}
})
})

View File

@@ -0,0 +1,171 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import { configureStore } from '@reduxjs/toolkit'
import { waitMs } from './helpers'
import type { Middleware, Reducer } from 'redux'
import {
THIRTY_TWO_BIT_MAX_INT,
THIRTY_TWO_BIT_MAX_TIMER_SECONDS,
} from '../core/buildMiddleware/cacheCollection'
beforeAll(() => {
jest.useFakeTimers('legacy')
})
const onCleanup = jest.fn()
beforeEach(() => {
onCleanup.mockClear()
})
test(`query: await cleanup, defaults`, async () => {
const { store, api } = storeForApi(
createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: (build) => ({
query: build.query<unknown, string>({
query: () => '/success',
}),
}),
})
)
store.dispatch(api.endpoints.query.initiate('arg')).unsubscribe()
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
test(`query: await cleanup, keepUnusedDataFor set`, async () => {
const { store, api } = storeForApi(
createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: (build) => ({
query: build.query<unknown, string>({
query: () => '/success',
}),
}),
keepUnusedDataFor: 29,
})
)
store.dispatch(api.endpoints.query.initiate('arg')).unsubscribe()
jest.advanceTimersByTime(28000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
test(`query: handles large keepUnuseDataFor values over 32-bit ms`, async () => {
const { store, api } = storeForApi(
createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: (build) => ({
query: build.query<unknown, string>({
query: () => '/success',
}),
}),
keepUnusedDataFor: THIRTY_TWO_BIT_MAX_TIMER_SECONDS - 10,
})
)
store.dispatch(api.endpoints.query.initiate('arg')).unsubscribe()
// Shouldn't have been called right away
jest.advanceTimersByTime(1000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
// Shouldn't have been called any time in the next few minutes
jest.advanceTimersByTime(1_000_000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
// _Should_ be called _wayyyy_ in the future (like 24.8 days from now)
jest.advanceTimersByTime(THIRTY_TWO_BIT_MAX_TIMER_SECONDS * 1000),
await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
describe(`query: await cleanup, keepUnusedDataFor set`, () => {
const { store, api } = storeForApi(
createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: (build) => ({
query: build.query<unknown, string>({
query: () => '/success',
}),
query2: build.query<unknown, string>({
query: () => '/success',
keepUnusedDataFor: 35,
}),
query3: build.query<unknown, string>({
query: () => '/success',
keepUnusedDataFor: 0,
}),
query4: build.query<unknown, string>({
query: () => '/success',
keepUnusedDataFor: Infinity,
}),
}),
keepUnusedDataFor: 29,
})
)
test('global keepUnusedDataFor', async () => {
store.dispatch(api.endpoints.query.initiate('arg')).unsubscribe()
jest.advanceTimersByTime(28000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
test('endpoint keepUnusedDataFor', async () => {
store.dispatch(api.endpoints.query2.initiate('arg')).unsubscribe()
jest.advanceTimersByTime(34000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
test('endpoint keepUnusedDataFor: 0 ', async () => {
expect(onCleanup).not.toHaveBeenCalled()
store.dispatch(api.endpoints.query3.initiate('arg')).unsubscribe()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(1)
await waitMs()
expect(onCleanup).toHaveBeenCalled()
})
test('endpoint keepUnusedDataFor: Infinity', async () => {
expect(onCleanup).not.toHaveBeenCalled()
store.dispatch(api.endpoints.query4.initiate('arg')).unsubscribe()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(THIRTY_TWO_BIT_MAX_INT)
expect(onCleanup).not.toHaveBeenCalled()
})
})
function storeForApi<
A extends {
reducerPath: 'api'
reducer: Reducer<any, any>
middleware: Middleware
util: { resetApiState(): any }
}
>(api: A) {
const store = configureStore({
reducer: { api: api.reducer },
middleware: (gdm) =>
gdm({ serializableCheck: false, immutableCheck: false }).concat(
api.middleware
),
})
let hadQueries = false
store.subscribe(() => {
const queryState = store.getState().api.queries
if (hadQueries && Object.keys(queryState).length === 0) {
onCleanup()
}
hadQueries = hadQueries || Object.keys(queryState).length > 0
})
return { api, store }
}

View File

@@ -0,0 +1,579 @@
import { createApi } from '@reduxjs/toolkit/query'
import type { FetchBaseQueryMeta } from '@reduxjs/toolkit/query'
import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import { expectType, fakeTimerWaitFor, setupApiStore, waitMs } from './helpers'
beforeAll(() => {
jest.useFakeTimers('legacy')
})
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: () => ({}),
})
const storeRef = setupApiStore(api)
const onNewCacheEntry = jest.fn()
const gotFirstValue = jest.fn()
const onCleanup = jest.fn()
const onCatch = jest.fn()
beforeEach(() => {
onNewCacheEntry.mockClear()
gotFirstValue.mockClear()
onCleanup.mockClear()
onCatch.mockClear()
})
describe.each([['query'], ['mutation']] as const)(
'generic cases: %s',
(type) => {
test(`${type}: new cache entry only`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/success',
onCacheEntryAdded(arg, { dispatch, getState }) {
onNewCacheEntry(arg)
},
}),
}),
})
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
})
test(`${type}: await cacheEntryRemoved`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/success',
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved }
) {
onNewCacheEntry(arg)
await cacheEntryRemoved
onCleanup()
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
expect(onCleanup).not.toHaveBeenCalled()
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
}
expect(onCleanup).toHaveBeenCalled()
})
test(`${type}: await cacheDataLoaded, await cacheEntryRemoved (success)`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<number, string>({
query: () => '/success',
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved, cacheDataLoaded }
) {
onNewCacheEntry(arg)
const firstValue = await cacheDataLoaded
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(
firstValue
)
gotFirstValue(firstValue)
await cacheEntryRemoved
onCleanup()
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
expect(gotFirstValue).not.toHaveBeenCalled()
expect(onCleanup).not.toHaveBeenCalled()
await fakeTimerWaitFor(() => {
expect(gotFirstValue).toHaveBeenCalled()
})
expect(gotFirstValue).toHaveBeenCalledWith({
data: { value: 'success' },
meta: {
request: expect.any(Request),
response: expect.any(Object), // Response is not available in jest env
},
})
expect(onCleanup).not.toHaveBeenCalled()
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
}
expect(onCleanup).toHaveBeenCalled()
})
test(`${type}: await cacheDataLoaded, await cacheEntryRemoved (cacheDataLoaded never resolves)`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/error', // we will initiate only once and that one time will be an error -> cacheDataLoaded will never resolve
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved, cacheDataLoaded }
) {
onNewCacheEntry(arg)
// this will wait until cacheEntryRemoved, then reject => nothing past that line will execute
// but since this special "cacheEntryRemoved" rejection is handled outside, there will be no
// uncaught rejection error
const firstValue = await cacheDataLoaded
gotFirstValue(firstValue)
await cacheEntryRemoved
onCleanup()
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(120000), await waitMs()
}
expect(gotFirstValue).not.toHaveBeenCalled()
expect(onCleanup).not.toHaveBeenCalled()
})
test(`${type}: try { await cacheDataLoaded }, await cacheEntryRemoved (cacheDataLoaded never resolves)`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/error', // we will initiate only once and that one time will be an error -> cacheDataLoaded will never resolve
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved, cacheDataLoaded }
) {
onNewCacheEntry(arg)
try {
// this will wait until cacheEntryRemoved, then reject => nothing else in this try..catch block will execute
const firstValue = await cacheDataLoaded
gotFirstValue(firstValue)
} catch (e) {
onCatch(e)
}
await cacheEntryRemoved
onCleanup()
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
}
expect(onCleanup).toHaveBeenCalled()
expect(gotFirstValue).not.toHaveBeenCalled()
expect(onCatch.mock.calls[0][0]).toMatchObject({
message: 'Promise never resolved before cacheEntryRemoved.',
})
})
test(`${type}: try { await cacheDataLoaded, await cacheEntryRemoved } (cacheDataLoaded never resolves)`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/error', // we will initiate only once and that one time will be an error -> cacheDataLoaded will never resolve
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved, cacheDataLoaded }
) {
onNewCacheEntry(arg)
try {
// this will wait until cacheEntryRemoved, then reject => nothing else in this try..catch block will execute
const firstValue = await cacheDataLoaded
gotFirstValue(firstValue)
// cleanup in this scenario only needs to be done for stuff within this try..catch block - totally valid scenario
await cacheEntryRemoved
onCleanup()
} catch (e) {
onCatch(e)
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
}
expect(onCleanup).not.toHaveBeenCalled()
expect(gotFirstValue).not.toHaveBeenCalled()
expect(onCatch.mock.calls[0][0]).toMatchObject({
message: 'Promise never resolved before cacheEntryRemoved.',
})
})
test(`${type}: try { await cacheDataLoaded } finally { await cacheEntryRemoved } (cacheDataLoaded never resolves)`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/error', // we will initiate only once and that one time will be an error -> cacheDataLoaded will never resolve
async onCacheEntryAdded(
arg,
{ dispatch, getState, cacheEntryRemoved, cacheDataLoaded }
) {
onNewCacheEntry(arg)
try {
// this will wait until cacheEntryRemoved, then reject => nothing else in this try..catch block will execute
const firstValue = await cacheDataLoaded
gotFirstValue(firstValue)
} catch (e) {
onCatch(e)
} finally {
await cacheEntryRemoved
onCleanup()
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onNewCacheEntry).toHaveBeenCalledWith('arg')
promise.unsubscribe(), await waitMs()
if (type === 'query') {
jest.advanceTimersByTime(59000), await waitMs()
expect(onCleanup).not.toHaveBeenCalled()
jest.advanceTimersByTime(2000), await waitMs()
}
expect(onCleanup).toHaveBeenCalled()
expect(gotFirstValue).not.toHaveBeenCalled()
expect(onCatch.mock.calls[0][0]).toMatchObject({
message: 'Promise never resolved before cacheEntryRemoved.',
})
})
}
)
test(`query: getCacheEntry`, async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, string>({
query: () => '/success',
async onCacheEntryAdded(
arg,
{
dispatch,
getState,
getCacheEntry,
cacheEntryRemoved,
cacheDataLoaded,
}
) {
snapshot(getCacheEntry())
gotFirstValue(await cacheDataLoaded)
snapshot(getCacheEntry())
await cacheEntryRemoved
snapshot(getCacheEntry())
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
promise.unsubscribe()
await fakeTimerWaitFor(() => {
expect(gotFirstValue).toHaveBeenCalled()
})
jest.advanceTimersByTime(120000), await waitMs()
expect(snapshot).toHaveBeenCalledTimes(3)
expect(snapshot.mock.calls[0][0]).toMatchObject({
endpointName: 'injected',
isError: false,
isLoading: true,
isSuccess: false,
isUninitialized: false,
originalArgs: 'arg',
requestId: promise.requestId,
startedTimeStamp: expect.any(Number),
status: 'pending',
})
expect(snapshot.mock.calls[1][0]).toMatchObject({
data: {
value: 'success',
},
endpointName: 'injected',
fulfilledTimeStamp: expect.any(Number),
isError: false,
isLoading: false,
isSuccess: true,
isUninitialized: false,
originalArgs: 'arg',
requestId: promise.requestId,
startedTimeStamp: expect.any(Number),
status: 'fulfilled',
})
expect(snapshot.mock.calls[2][0]).toMatchObject({
isError: false,
isLoading: false,
isSuccess: false,
isUninitialized: true,
status: 'uninitialized',
})
})
test(`mutation: getCacheEntry`, async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.mutation<unknown, string>({
query: () => '/success',
async onCacheEntryAdded(
arg,
{
dispatch,
getState,
getCacheEntry,
cacheEntryRemoved,
cacheDataLoaded,
}
) {
snapshot(getCacheEntry())
gotFirstValue(await cacheDataLoaded)
snapshot(getCacheEntry())
await cacheEntryRemoved
snapshot(getCacheEntry())
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
await fakeTimerWaitFor(() => {
expect(gotFirstValue).toHaveBeenCalled()
})
promise.unsubscribe(), await waitMs()
expect(snapshot).toHaveBeenCalledTimes(3)
expect(snapshot.mock.calls[0][0]).toMatchObject({
endpointName: 'injected',
isError: false,
isLoading: true,
isSuccess: false,
isUninitialized: false,
startedTimeStamp: expect.any(Number),
status: 'pending',
})
expect(snapshot.mock.calls[1][0]).toMatchObject({
data: {
value: 'success',
},
endpointName: 'injected',
fulfilledTimeStamp: expect.any(Number),
isError: false,
isLoading: false,
isSuccess: true,
isUninitialized: false,
startedTimeStamp: expect.any(Number),
status: 'fulfilled',
})
expect(snapshot.mock.calls[2][0]).toMatchObject({
isError: false,
isLoading: false,
isSuccess: false,
isUninitialized: true,
status: 'uninitialized',
})
})
test('updateCachedData', async () => {
const trackCalls = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<{ value: string }, string>({
query: () => '/success',
async onCacheEntryAdded(
arg,
{
dispatch,
getState,
getCacheEntry,
updateCachedData,
cacheEntryRemoved,
cacheDataLoaded,
}
) {
expect(getCacheEntry().data).toEqual(undefined)
// calling `updateCachedData` when there is no data yet should not do anything
updateCachedData((draft) => {
draft.value = 'TEST'
trackCalls()
})
expect(trackCalls).toHaveBeenCalledTimes(0)
expect(getCacheEntry().data).toEqual(undefined)
gotFirstValue(await cacheDataLoaded)
expect(getCacheEntry().data).toEqual({ value: 'success' })
updateCachedData((draft) => {
draft.value = 'TEST'
trackCalls()
})
expect(trackCalls).toHaveBeenCalledTimes(1)
expect(getCacheEntry().data).toEqual({ value: 'TEST' })
await cacheEntryRemoved
expect(getCacheEntry().data).toEqual(undefined)
// calling `updateCachedData` when there is no data any more should not do anything
updateCachedData((draft) => {
draft.value = 'TEST2'
trackCalls()
})
expect(trackCalls).toHaveBeenCalledTimes(1)
expect(getCacheEntry().data).toEqual(undefined)
onCleanup()
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
promise.unsubscribe()
await fakeTimerWaitFor(() => {
expect(gotFirstValue).toHaveBeenCalled()
})
jest.advanceTimersByTime(61000)
await fakeTimerWaitFor(() => {
expect(onCleanup).toHaveBeenCalled()
})
})
test('dispatching further actions does not trigger another lifecycle', async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, void>({
query: () => '/success',
async onCacheEntryAdded() {
onNewCacheEntry()
},
}),
}),
})
await storeRef.store.dispatch(extended.endpoints.injected.initiate())
expect(onNewCacheEntry).toHaveBeenCalledTimes(1)
await storeRef.store.dispatch(extended.endpoints.injected.initiate())
expect(onNewCacheEntry).toHaveBeenCalledTimes(1)
await storeRef.store.dispatch(
extended.endpoints.injected.initiate(undefined, { forceRefetch: true })
)
expect(onNewCacheEntry).toHaveBeenCalledTimes(1)
})
test('dispatching a query initializer with `subscribe: false` does not start a lifecycle', async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, void>({
query: () => '/success',
async onCacheEntryAdded() {
onNewCacheEntry()
},
}),
}),
})
await storeRef.store.dispatch(
extended.endpoints.injected.initiate(undefined, { subscribe: false })
)
expect(onNewCacheEntry).toHaveBeenCalledTimes(0)
await storeRef.store.dispatch(extended.endpoints.injected.initiate(undefined))
expect(onNewCacheEntry).toHaveBeenCalledTimes(1)
})
test('dispatching a mutation initializer with `track: false` does not start a lifecycle', async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.mutation<unknown, void>({
query: () => '/success',
async onCacheEntryAdded() {
onNewCacheEntry()
},
}),
}),
})
await storeRef.store.dispatch(
extended.endpoints.injected.initiate(undefined, { track: false })
)
expect(onNewCacheEntry).toHaveBeenCalledTimes(0)
await storeRef.store.dispatch(extended.endpoints.injected.initiate(undefined))
expect(onNewCacheEntry).toHaveBeenCalledTimes(1)
})

View File

@@ -0,0 +1,209 @@
// tests for "cleanup-after-unsubscribe" behaviour
import React, { Profiler, ProfilerOnRenderCallback } from 'react'
import { createListenerMiddleware } from '@reduxjs/toolkit'
import { createApi, QueryStatus } from '@reduxjs/toolkit/query/react'
import { render, waitFor, act, screen } from '@testing-library/react'
import { setupApiStore } from './helpers'
import { delay } from '../../utils'
const tick = () => new Promise((res) => setImmediate(res))
export const runAllTimers = async () => jest.runAllTimers() && (await tick())
const api = createApi({
baseQuery: () => ({ data: 42 }),
endpoints: (build) => ({
a: build.query<unknown, void>({ query: () => '' }),
b: build.query<unknown, void>({ query: () => '' }),
}),
})
const storeRef = setupApiStore(api)
let getSubStateA = () => storeRef.store.getState().api.queries['a(undefined)']
let getSubStateB = () => storeRef.store.getState().api.queries['b(undefined)']
function UsingA() {
const { data } = api.endpoints.a.useQuery()
return <>Result: {data} </>
}
function UsingB() {
api.endpoints.b.useQuery()
return <></>
}
function UsingAB() {
api.endpoints.a.useQuery()
api.endpoints.b.useQuery()
return <></>
}
beforeAll(() => {
jest.useFakeTimers('legacy')
})
test('data stays in store when component stays rendered', async () => {
expect(getSubStateA()).toBeUndefined()
render(<UsingA />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
)
jest.advanceTimersByTime(120000)
await waitFor(() =>
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
)
})
test('data is removed from store after 60 seconds', async () => {
expect(getSubStateA()).toBeUndefined()
const { unmount } = render(<UsingA />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
)
unmount()
jest.advanceTimersByTime(59000)
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
jest.advanceTimersByTime(2000)
expect(getSubStateA()).toBeUndefined()
})
test('data stays in store when component stays rendered while data for another component is removed after it unmounted', async () => {
expect(getSubStateA()).toBeUndefined()
expect(getSubStateB()).toBeUndefined()
const { rerender } = render(
<>
<UsingA />
<UsingB />
</>,
{ wrapper: storeRef.wrapper }
)
await waitFor(() => {
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
expect(getSubStateB()?.status).toBe(QueryStatus.fulfilled)
})
const statusA = getSubStateA()
await act(async () => {
rerender(
<>
<UsingA />
</>
)
jest.advanceTimersByTime(10)
})
jest.advanceTimersByTime(120000)
expect(getSubStateA()).toEqual(statusA)
expect(getSubStateB()).toBeUndefined()
})
test('data stays in store when one component requiring the data stays in the store', async () => {
expect(getSubStateA()).toBeUndefined()
expect(getSubStateB()).toBeUndefined()
const { rerender } = render(
<>
<UsingA key="a" />
<UsingAB key="ab" />
</>,
{ wrapper: storeRef.wrapper }
)
await waitFor(() => {
expect(getSubStateA()?.status).toBe(QueryStatus.fulfilled)
expect(getSubStateB()?.status).toBe(QueryStatus.fulfilled)
})
const statusA = getSubStateA()
const statusB = getSubStateB()
await act(async () => {
rerender(
<>
<UsingAB key="ab" />
</>
)
jest.advanceTimersByTime(10)
jest.runAllTimers()
})
await act(async () => {
jest.advanceTimersByTime(120000)
jest.runAllTimers()
})
expect(getSubStateA()).toEqual(statusA)
expect(getSubStateB()).toEqual(statusB)
})
test('Minimizes the number of subscription dispatches when multiple components ask for the same data', async () => {
const listenerMiddleware = createListenerMiddleware()
const storeRef = setupApiStore(api, undefined, {
middleware: {
concat: [listenerMiddleware.middleware],
},
withoutTestLifecycles: true,
})
let getSubscriptionsA = () =>
storeRef.store.getState().api.subscriptions['a(undefined)']
let actionTypes: string[] = []
listenerMiddleware.startListening({
predicate: () => true,
effect: (action) => {
actionTypes.push(action.type)
},
})
const NUM_LIST_ITEMS = 1000
function ParentComponent() {
const listItems = Array.from({ length: NUM_LIST_ITEMS }).map((_, i) => (
<UsingA key={i} />
))
return <>{listItems}</>
}
render(<ParentComponent />, {
wrapper: storeRef.wrapper,
})
jest.advanceTimersByTime(10)
await waitFor(() => {
return screen.getAllByText(/42/).length > 0
})
await runAllTimers()
const subscriptions = getSubscriptionsA()
expect(Object.keys(subscriptions!).length).toBe(NUM_LIST_ITEMS)
expect(actionTypes).toEqual([
'api/config/middlewareRegistered',
'api/executeQuery/pending',
'api/internalSubscriptions/subscriptionsUpdated',
'api/executeQuery/fulfilled',
])
}, 25000)

View File

@@ -0,0 +1,88 @@
import { copyWithStructuralSharing } from '@reduxjs/toolkit/query'
test('equal object from JSON Object', () => {
const json = JSON.stringify({
a: { b: { c: { d: 1, e: '2', f: true }, g: false }, h: null },
i: null,
})
const objA = JSON.parse(json)
const objB = JSON.parse(json)
expect(objA).toStrictEqual(objB)
expect(objA).not.toBe(objB)
const newCopy = copyWithStructuralSharing(objA, objB)
expect(newCopy).toBe(objA)
expect(newCopy).not.toBe(objB)
expect(newCopy).toStrictEqual(objB)
})
test('equal object from JSON Object', () => {
const json = JSON.stringify({
a: { b: { c: { d: 1, e: '2', f: true }, g: false }, h: null },
i: null,
})
const objA = JSON.parse(json)
const objB = JSON.parse(json)
objB.a.h = 4
expect(objA).not.toStrictEqual(objB)
expect(objA).not.toBe(objB)
expect(objA.a.b).toStrictEqual(objB.a.b)
expect(objA.a.b).not.toBe(objB.a.b)
const newCopy = copyWithStructuralSharing(objA, objB)
expect(newCopy).not.toBe(objA)
expect(newCopy).not.toStrictEqual(objA)
expect(newCopy).toStrictEqual(objB)
expect(newCopy.a.b).toBe(objA.a.b)
expect(newCopy.a.b).not.toBe(objB.a.b)
expect(newCopy.a.b).toStrictEqual(objB.a.b)
})
test('equal object from JSON Array', () => {
const json = JSON.stringify([
1,
'a',
{ 2: 'b' },
{ 3: { 4: 'c' }, d: null },
null,
5,
])
const objA = JSON.parse(json)
const objB = JSON.parse(json)
expect(objA).toStrictEqual(objB)
expect(objA).not.toBe(objB)
const newCopy = copyWithStructuralSharing(objA, objB)
expect(newCopy).toBe(objA)
expect(newCopy).not.toBe(objB)
expect(newCopy).toStrictEqual(objB)
})
test('equal object from JSON Array', () => {
const json = JSON.stringify([
1,
'a',
{ 2: 'b' },
{ 3: { 4: 'c' }, d: null },
null,
5,
])
const objA = JSON.parse(json)
const objB = JSON.parse(json)
objB[2][2] = 'x'
expect(objA).not.toStrictEqual(objB)
expect(objA).not.toBe(objB)
const newCopy = copyWithStructuralSharing(objA, objB)
expect(newCopy).not.toBe(objA)
expect(newCopy).not.toBe(objB)
expect(newCopy).toStrictEqual(objB)
expect(newCopy[3]).toBe(objA[3])
expect(newCopy[3]).not.toBe(objB[3])
expect(newCopy[3]).toStrictEqual(objB[3])
expect(newCopy[2]).not.toBe(objA[2])
expect(newCopy[2]).not.toBe(objB[2])
expect(newCopy[2]).toStrictEqual(objB[2])
})

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,112 @@
import { defaultSerializeQueryArgs } from '@internal/query/defaultSerializeQueryArgs'
const endpointDefinition: any = {}
const endpointName = 'test'
test('string arg', () => {
expect(
defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: 'arg',
})
).toMatchInlineSnapshot(`"test(\\"arg\\")"`)
})
test('number arg', () => {
expect(
defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: 5,
})
).toMatchInlineSnapshot(`"test(5)"`)
})
test('simple object arg is sorted', () => {
expect(
defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: { name: 'arg', age: 5 },
})
).toMatchInlineSnapshot(`"test({\\"age\\":5,\\"name\\":\\"arg\\"})"`)
})
test('nested object arg is sorted recursively', () => {
expect(
defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: { name: { last: 'Split', first: 'Banana' }, age: 5 },
})
).toMatchInlineSnapshot(
`"test({\\"age\\":5,\\"name\\":{\\"first\\":\\"Banana\\",\\"last\\":\\"Split\\"}})"`
)
})
test('Fully serializes a deeply nested object', () => {
const nestedObj = {
a: {
a1: {
a11: {
a111: 1,
},
},
},
b: {
b2: {
b21: 3,
},
b1: {
b11: 2,
},
},
}
const res = defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: nestedObj,
})
expect(res).toMatchInlineSnapshot(
`"test({\\"a\\":{\\"a1\\":{\\"a11\\":{\\"a111\\":1}}},\\"b\\":{\\"b1\\":{\\"b11\\":2},\\"b2\\":{\\"b21\\":3}}})"`
)
})
test('Caches results for plain objects', () => {
const testData = Array.from({ length: 10000 }).map((_, i) => {
return {
albumId: i,
id: i,
title: 'accusamus beatae ad facilis cum similique qui sunt',
url: 'https://via.placeholder.com/600/92c952',
thumbnailUrl: 'https://via.placeholder.com/150/92c952',
}
})
const data = {
testData,
}
const runWithTimer = (data: any) => {
const start = Date.now()
const res = defaultSerializeQueryArgs({
endpointDefinition,
endpointName,
queryArgs: data,
})
const end = Date.now()
const duration = end - start
return [res, duration] as const
}
const [res1, time1] = runWithTimer(data)
const [res2, time2] = runWithTimer(data)
expect(res1).toBe(res2)
expect(time2).toBeLessThanOrEqual(time1)
// Locally, stringifying 10K items takes 25-30ms.
// Assuming the WeakMap cache hit, this _should_ be 0
expect(time2).toBeLessThan(2)
})

View File

@@ -0,0 +1,438 @@
import { configureStore } from '@reduxjs/toolkit'
import {
mockConsole,
createConsole,
getLog,
} from 'console-testing-library/pure'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
let restore: () => void
let nodeEnv: string
beforeEach(() => {
restore = mockConsole(createConsole())
nodeEnv = process.env.NODE_ENV!
;(process.env as any).NODE_ENV = 'development'
})
afterEach(() => {
;(process.env as any).NODE_ENV = nodeEnv
restore()
})
const baseUrl = 'https://example.com'
function createApis() {
const api1 = createApi({
baseQuery: fetchBaseQuery({ baseUrl }),
endpoints: (builder) => ({
q1: builder.query({ query: () => '/success' }),
}),
})
const api1_2 = createApi({
baseQuery: fetchBaseQuery({ baseUrl }),
endpoints: (builder) => ({
q1: builder.query({ query: () => '/success' }),
}),
})
const api2 = createApi({
reducerPath: 'api2',
baseQuery: fetchBaseQuery({ baseUrl }),
endpoints: (builder) => ({
q1: builder.query({ query: () => '/success' }),
}),
})
return [api1, api1_2, api2] as const
}
let [api1, api1_2, api2] = createApis()
beforeEach(() => {
;[api1, api1_2, api2] = createApis()
})
const reMatchMissingMiddlewareError =
/Warning: Middleware for RTK-Query API at reducerPath "api" has not been added to the store/
describe('missing middleware', () => {
test.each([
['development', true],
['production', false],
])('%s warns if middleware is missing: %s', ([env, shouldWarn]) => {
;(process.env as any).NODE_ENV = env
const store = configureStore({
reducer: { [api1.reducerPath]: api1.reducer },
})
const doDispatch = () => {
store.dispatch(api1.endpoints.q1.initiate(undefined))
}
if (shouldWarn) {
expect(doDispatch).toThrowError(reMatchMissingMiddlewareError)
} else {
expect(doDispatch).not.toThrowError()
}
})
test('does not warn if middleware is not missing', () => {
const store = configureStore({
reducer: { [api1.reducerPath]: api1.reducer },
middleware: (gdm) => gdm().concat(api1.middleware),
})
store.dispatch(api1.endpoints.q1.initiate(undefined))
expect(getLog().log).toBe(``)
})
test('warns only once per api', () => {
const store = configureStore({
reducer: { [api1.reducerPath]: api1.reducer },
})
const doDispatch = () => {
store.dispatch(api1.endpoints.q1.initiate(undefined))
}
expect(doDispatch).toThrowError(reMatchMissingMiddlewareError)
expect(doDispatch).not.toThrowError()
})
test('warns multiple times for multiple apis', () => {
const store = configureStore({
reducer: {
[api1.reducerPath]: api1.reducer,
[api2.reducerPath]: api2.reducer,
},
})
const doDispatch1 = () => {
store.dispatch(api1.endpoints.q1.initiate(undefined))
}
const doDispatch2 = () => {
store.dispatch(api2.endpoints.q1.initiate(undefined))
}
expect(doDispatch1).toThrowError(reMatchMissingMiddlewareError)
expect(doDispatch2).toThrowError(
/Warning: Middleware for RTK-Query API at reducerPath "api2" has not been added to the store/
)
})
})
describe('missing reducer', () => {
describe.each([
['development', true],
['production', false],
])('%s warns if reducer is missing: %s', ([env, shouldWarn]) => {
;(process.env as any).NODE_ENV = env
test('middleware not crashing if reducer is missing', async () => {
const store = configureStore({
reducer: { x: () => 0 },
// @ts-expect-error
middleware: (gdm) => gdm().concat(api1.middleware),
})
await store.dispatch(api1.endpoints.q1.initiate(undefined))
})
test(`warning behaviour`, () => {
const store = configureStore({
reducer: { x: () => 0 },
// @ts-expect-error
middleware: (gdm) => gdm().concat(api1.middleware),
})
// @ts-expect-error
api1.endpoints.q1.select(undefined)(store.getState())
expect(getLog().log).toBe(
shouldWarn
? 'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
: ''
)
})
})
test('does not warn if reducer is not missing', () => {
const store = configureStore({
reducer: { [api1.reducerPath]: api1.reducer },
middleware: (gdm) => gdm().concat(api1.middleware),
})
api1.endpoints.q1.select(undefined)(store.getState())
expect(getLog().log).toBe(``)
})
test('warns only once per api', () => {
const store = configureStore({
reducer: { x: () => 0 },
// @ts-expect-error
middleware: (gdm) => gdm().concat(api1.middleware),
})
// @ts-expect-error
api1.endpoints.q1.select(undefined)(store.getState())
// @ts-expect-error
api1.endpoints.q1.select(undefined)(store.getState())
expect(getLog().log).toBe(
'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
)
})
test('warns multiple times for multiple apis', () => {
const store = configureStore({
reducer: { x: () => 0 },
// @ts-expect-error
middleware: (gdm) => gdm().concat(api1.middleware),
})
// @ts-expect-error
api1.endpoints.q1.select(undefined)(store.getState())
// @ts-expect-error
api2.endpoints.q1.select(undefined)(store.getState())
expect(getLog().log).toBe(
'Error: No data found at `state.api`. Did you forget to add the reducer to the store?\nError: No data found at `state.api2`. Did you forget to add the reducer to the store?'
)
})
})
test('warns for reducer and also throws error if everything is missing', async () => {
const store = configureStore({
reducer: { x: () => 0 },
})
// @ts-expect-error
api1.endpoints.q1.select(undefined)(store.getState())
const doDispatch = () => {
store.dispatch(api1.endpoints.q1.initiate(undefined))
}
expect(doDispatch).toThrowError(reMatchMissingMiddlewareError)
expect(getLog().log).toBe(
'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
)
})
describe('warns on multiple apis using the same `reducerPath`', () => {
test('common: two apis, same order', async () => {
const store = configureStore({
reducer: {
[api1.reducerPath]: api1.reducer,
[api1_2.reducerPath]: api1_2.reducer,
},
middleware: (gDM) => gDM().concat(api1.middleware, api1_2.middleware),
})
await store.dispatch(api1.endpoints.q1.initiate(undefined))
// only second api prints
expect(getLog().log).toBe(
`There is a mismatch between slice and middleware for the reducerPath "api".
You can only have one api per reducer path, this will lead to crashes in various situations!
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
)
})
test('common: two apis, opposing order', async () => {
const store = configureStore({
reducer: {
[api1.reducerPath]: api1.reducer,
[api1_2.reducerPath]: api1_2.reducer,
},
middleware: (gDM) => gDM().concat(api1_2.middleware, api1.middleware),
})
await store.dispatch(api1.endpoints.q1.initiate(undefined))
// both apis print
expect(getLog().log).toBe(
`There is a mismatch between slice and middleware for the reducerPath "api".
You can only have one api per reducer path, this will lead to crashes in various situations!
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!
There is a mismatch between slice and middleware for the reducerPath "api".
You can only have one api per reducer path, this will lead to crashes in various situations!
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
)
})
test('common: two apis, only first middleware', async () => {
const store = configureStore({
reducer: {
[api1.reducerPath]: api1.reducer,
[api1_2.reducerPath]: api1_2.reducer,
},
middleware: (gDM) => gDM().concat(api1.middleware),
})
await store.dispatch(api1.endpoints.q1.initiate(undefined))
expect(getLog().log).toBe(
`There is a mismatch between slice and middleware for the reducerPath "api".
You can only have one api per reducer path, this will lead to crashes in various situations!
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
)
})
/**
* This is the one edge case that we currently cannot detect:
* Multiple apis with the same reducer key and only the middleware of the last api is being used.
*
* It would be great to support this case as well, but for now:
* "It is what it is."
*/
test.skip('common: two apis, only second middleware', async () => {
const store = configureStore({
reducer: {
[api1.reducerPath]: api1.reducer,
[api1_2.reducerPath]: api1_2.reducer,
},
middleware: (gDM) => gDM().concat(api1_2.middleware),
})
await store.dispatch(api1.endpoints.q1.initiate(undefined))
expect(getLog().log).toBe(
`There is a mismatch between slice and middleware for the reducerPath "api".
You can only have one api per reducer path, this will lead to crashes in various situations!
If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
)
})
})
describe('`console.error` on unhandled errors during `initiate`', () => {
test('error thrown in `baseQuery`', async () => {
const api = createApi({
baseQuery(): { data: any } {
throw new Error('this was kinda expected')
},
endpoints: (build) => ({
baseQuery: build.query<any, void>({ query() {} }),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.baseQuery.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "baseQuery".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
test('error thrown in `queryFn`', async () => {
const api = createApi({
baseQuery() {
return { data: {} }
},
endpoints: (build) => ({
queryFn: build.query<any, void>({
queryFn() {
throw new Error('this was kinda expected')
},
}),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.queryFn.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "queryFn".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
test('error thrown in `transformResponse`', async () => {
const api = createApi({
baseQuery() {
return { data: {} }
},
endpoints: (build) => ({
transformRspn: build.query<any, void>({
query() {},
transformResponse() {
throw new Error('this was kinda expected')
},
}),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.transformRspn.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "transformRspn".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
test('error thrown in `transformErrorResponse`', async () => {
const api = createApi({
baseQuery() {
return { error: {} }
},
endpoints: (build) => ({
// @ts-ignore TS doesn't like `() => never` for `tER`
transformErRspn: build.query<number, void>({
// @ts-ignore TS doesn't like `() => never` for `tER`
query: () => '/dummy',
// @ts-ignore TS doesn't like `() => never` for `tER`
transformErrorResponse() {
throw new Error('this was kinda expected')
},
}),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.transformErRspn.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "transformErRspn".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
test('`fetchBaseQuery`: error thrown in `prepareHeaders`', async () => {
const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl,
prepareHeaders() {
throw new Error('this was kinda expected')
},
}),
endpoints: (build) => ({
prep: build.query<any, void>({
query() {
return '/success'
},
}),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.prep.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "prep".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
test('`fetchBaseQuery`: error thrown in `validateStatus`', async () => {
const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl,
}),
endpoints: (build) => ({
val: build.query<any, void>({
query() {
return {
url: '/success',
validateStatus() {
throw new Error('this was kinda expected')
},
}
},
}),
}),
})
const store = configureStore({
reducer: { [api.reducerPath]: api.reducer },
middleware: (gdm) => gdm().concat(api.middleware),
})
await store.dispatch(api.endpoints.val.initiate())
expect(getLog().log)
.toBe(`An unhandled error occurred processing a request for the endpoint "val".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: this was kinda expected]`)
})
})

View File

@@ -0,0 +1,624 @@
import * as React from 'react'
import type { BaseQueryFn } from '@reduxjs/toolkit/query/react'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { rest } from 'msw'
import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
import axios from 'axios'
import { expectExactType, hookWaitFor, setupApiStore } from './helpers'
import { server } from './mocks/server'
import { fireEvent, render, waitFor, screen, act, renderHook } from '@testing-library/react'
import { useDispatch } from 'react-redux'
import type { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
import type { BaseQueryApi } from '../baseQueryTypes'
const baseQuery = fetchBaseQuery({ baseUrl: 'https://example.com' })
const api = createApi({
baseQuery,
endpoints(build) {
return {
query: build.query({ query: () => '/query' }),
mutation: build.mutation({
query: () => ({ url: '/mutation', method: 'POST' }),
}),
}
},
})
const storeRef = setupApiStore(api)
const failQueryOnce = rest.get('/query', (_, req, ctx) =>
req.once(ctx.status(500), ctx.json({ value: 'failed' }))
)
describe('fetchBaseQuery', () => {
let commonBaseQueryApiArgs: BaseQueryApi = {} as any
beforeEach(() => {
const abortController = new AbortController()
commonBaseQueryApiArgs = {
signal: abortController.signal,
abort: (reason) =>
//@ts-ignore
abortController.abort(reason),
dispatch: storeRef.store.dispatch,
getState: storeRef.store.getState,
extra: undefined,
type: 'query',
endpoint: 'doesntmatterhere',
}
})
test('success', async () => {
await expect(
baseQuery('/success', commonBaseQueryApiArgs, {})
).resolves.toEqual({
data: { value: 'success' },
meta: {
request: expect.any(Object),
response: expect.any(Object),
},
})
})
test('error', async () => {
server.use(failQueryOnce)
await expect(
baseQuery('/error', commonBaseQueryApiArgs, {})
).resolves.toEqual({
error: {
data: { value: 'error' },
status: 500,
},
meta: {
request: expect.any(Object),
response: expect.any(Object),
},
})
})
})
describe('query error handling', () => {
test('success', async () => {
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
data: { value: 'success' },
})
)
})
test('error', async () => {
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res(ctx.status(500), ctx.json({ value: 'error' }))
)
)
const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
})
)
})
test('success -> error', async () => {
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
data: { value: 'success' },
})
)
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res.once(ctx.status(500), ctx.json({ value: 'error' }))
)
)
act(() => void result.current.refetch())
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
// last data will stay available
data: { value: 'success' },
})
)
})
test('error -> success', async () => {
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
server.use(
rest.get('https://example.com/query', (_, res, ctx) =>
res.once(ctx.status(500), ctx.json({ value: 'error' }))
)
)
const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
})
)
act(() => void result.current.refetch())
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
data: { value: 'success' },
})
)
})
})
describe('mutation error handling', () => {
test('success', async () => {
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
wrapper: storeRef.wrapper,
})
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
data: { value: 'success' },
})
)
})
test('error', async () => {
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res(ctx.status(500), ctx.json({ value: 'error' }))
)
)
const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
wrapper: storeRef.wrapper,
})
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
})
)
})
test('success -> error', async () => {
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
wrapper: storeRef.wrapper,
})
{
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
data: { value: 'success' },
})
)
}
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res.once(ctx.status(500), ctx.json({ value: 'error' }))
)
)
{
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
})
)
expect(result.current[1].data).toBeUndefined()
}
})
test('error -> success', async () => {
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
)
)
server.use(
rest.post('https://example.com/mutation', (_, res, ctx) =>
res.once(ctx.status(500), ctx.json({ value: 'error' }))
)
)
const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
wrapper: storeRef.wrapper,
})
{
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: {
status: 500,
data: { value: 'error' },
},
})
)
}
{
const [trigger] = result.current
act(() => void trigger({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(result.current[1]).toEqual(
expect.objectContaining({
isLoading: false,
isError: false,
isSuccess: true,
})
)
expect(result.current[1].error).toBeUndefined()
}
})
})
describe('custom axios baseQuery', () => {
const axiosBaseQuery =
(
{ baseUrl }: { baseUrl: string } = { baseUrl: '' }
): BaseQueryFn<
{
url: string
method: AxiosRequestConfig['method']
data?: AxiosRequestConfig['data']
},
unknown,
unknown,
unknown,
{ response: AxiosResponse; request: AxiosRequestConfig }
> =>
async ({ url, method, data }) => {
const config = { url: baseUrl + url, method, data }
try {
const result = await axios(config)
return {
data: result.data,
meta: { request: config, response: result },
}
} catch (axiosError) {
let err = axiosError as AxiosError
return {
error: {
status: err.response?.status,
data: err.response?.data,
},
meta: { request: config, response: err.response as AxiosResponse },
}
}
}
type SuccessResponse = { value: 'success' }
const api = createApi({
baseQuery: axiosBaseQuery({
baseUrl: 'https://example.com',
}),
endpoints(build) {
return {
query: build.query<SuccessResponse, void>({
query: () => ({ url: '/success', method: 'get' }),
transformResponse: (result: SuccessResponse, meta) => {
return { ...result, metaResponseData: meta?.response.data }
},
}),
mutation: build.mutation<SuccessResponse, any>({
query: () => ({ url: '/success', method: 'post' }),
}),
}
},
})
const storeRef = setupApiStore(api)
test('axiosBaseQuery transformResponse uses its custom meta format', async () => {
const result = await storeRef.store.dispatch(api.endpoints.query.initiate())
expect(result.data).toEqual({
value: 'success',
metaResponseData: { value: 'success' },
})
})
test('axios errors behave as expected', async () => {
server.use(
rest.get('https://example.com/success', (_, res, ctx) =>
res(ctx.status(500), ctx.json({ value: 'error' }))
)
)
const { result } = renderHook(() => api.endpoints.query.useQuery(), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isFetching).toBeFalsy())
expect(result.current).toEqual(
expect.objectContaining({
isLoading: false,
isError: true,
isSuccess: false,
error: { status: 500, data: { value: 'error' } },
})
)
})
})
describe('error handling in a component', () => {
const mockErrorResponse = { value: 'error', very: 'mean' }
const mockSuccessResponse = { value: 'success' }
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: (build) => ({
update: build.mutation<typeof mockSuccessResponse, any>({
query: () => ({ url: 'success' }),
}),
failedUpdate: build.mutation<typeof mockSuccessResponse, any>({
query: () => ({ url: 'error' }),
}),
}),
})
const storeRef = setupApiStore(api)
test('a mutation is unwrappable and has the correct types', async () => {
server.use(
rest.get('https://example.com/success', (_, res, ctx) =>
res.once(ctx.status(500), ctx.json(mockErrorResponse))
)
)
function User() {
const [manualError, setManualError] = React.useState<any>()
const [update, { isLoading, data, error }] =
api.endpoints.update.useMutation()
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="data">{JSON.stringify(data)}</div>
<div data-testid="error">{JSON.stringify(error)}</div>
<div data-testid="manuallySetError">
{JSON.stringify(manualError)}
</div>
<button
onClick={() => {
update({ name: 'hello' })
.unwrap()
.then((result) => {
expectExactType(mockSuccessResponse)(result)
setManualError(undefined)
})
.catch((error) => act(() => setManualError(error)))
}}
>
Update User
</button>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
fireEvent.click(screen.getByText('Update User'))
expect(screen.getByTestId('isLoading').textContent).toBe('true')
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
// Make sure the hook and the unwrapped action return the same things in an error state
await waitFor(() =>
expect(screen.getByTestId('error').textContent).toEqual(
screen.getByTestId('manuallySetError').textContent
)
)
fireEvent.click(screen.getByText('Update User'))
expect(screen.getByTestId('isLoading').textContent).toBe('true')
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('error').textContent).toBeFalsy()
)
await waitFor(() =>
expect(screen.getByTestId('manuallySetError').textContent).toBeFalsy()
)
await waitFor(() =>
expect(screen.getByTestId('data').textContent).toEqual(
JSON.stringify(mockSuccessResponse)
)
)
})
for (const track of [true, false]) {
test(`an un-subscribed mutation will still return something useful (success case, track: ${track})`, async () => {
const hook = renderHook(useDispatch, { wrapper: storeRef.wrapper })
const dispatch = hook.result.current as ThunkDispatch<any, any, AnyAction>
let mutationqueryFulfilled: ReturnType<
ReturnType<typeof api.endpoints.update.initiate>
>
act(() => {
mutationqueryFulfilled = dispatch(
api.endpoints.update.initiate({}, { track })
)
})
const result = await mutationqueryFulfilled!
expect(result).toMatchObject({
data: { value: 'success' },
})
})
test(`an un-subscribed mutation will still return something useful (error case, track: ${track})`, async () => {
const hook = renderHook(useDispatch, { wrapper: storeRef.wrapper })
const dispatch = hook.result.current as ThunkDispatch<any, any, AnyAction>
let mutationqueryFulfilled: ReturnType<
ReturnType<typeof api.endpoints.failedUpdate.initiate>
>
act(() => {
mutationqueryFulfilled = dispatch(
api.endpoints.failedUpdate.initiate({}, { track })
)
})
const result = await mutationqueryFulfilled!
expect(result).toMatchObject({
error: {
status: 500,
data: { value: 'error' },
},
})
})
test(`an un-subscribed mutation will still be unwrappable (success case), track: ${track}`, async () => {
const hook = renderHook(useDispatch, { wrapper: storeRef.wrapper })
const dispatch = hook.result.current as ThunkDispatch<any, any, AnyAction>
let mutationqueryFulfilled: ReturnType<
ReturnType<typeof api.endpoints.update.initiate>
>
act(() => {
mutationqueryFulfilled = dispatch(
api.endpoints.update.initiate({}, { track })
)
})
const result = await mutationqueryFulfilled!.unwrap()
expect(result).toMatchObject({
value: 'success',
})
})
test(`an un-subscribed mutation will still be unwrappable (error case, track: ${track})`, async () => {
const hook = renderHook(useDispatch, { wrapper: storeRef.wrapper })
const dispatch = hook.result.current as ThunkDispatch<any, any, AnyAction>
let mutationqueryFulfilled: ReturnType<
ReturnType<typeof api.endpoints.failedUpdate.initiate>
>
act(() => {
mutationqueryFulfilled = dispatch(
api.endpoints.failedUpdate.initiate({}, { track })
)
})
const unwrappedPromise = mutationqueryFulfilled!.unwrap()
expect(unwrappedPromise).rejects.toMatchObject({
status: 500,
data: { value: 'error' },
})
})
}
})

View File

@@ -0,0 +1,140 @@
import { configureStore } from '@reduxjs/toolkit'
import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'
import './helpers'
type CustomErrorType = { type: 'Custom' }
const api = createApi({
baseQuery: fakeBaseQuery<CustomErrorType>(),
endpoints: (build) => ({
withQuery: build.query<string, string>({
// @ts-expect-error
query(arg: string) {
return `resultFrom(${arg})`
},
// @ts-expect-error
transformResponse(response) {
return response.wrappedByBaseQuery
},
}),
withQueryFn: build.query<string, string>({
queryFn(arg: string) {
return { data: `resultFrom(${arg})` }
},
}),
withInvalidDataQueryFn: build.query<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { data: 5 }
},
}),
withErrorQueryFn: build.query<string, string>({
queryFn(arg: string) {
return { error: { type: 'Custom' } }
},
}),
withInvalidErrorQueryFn: build.query<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { error: 5 }
},
}),
withAsyncQueryFn: build.query<string, string>({
async queryFn(arg: string) {
return { data: `resultFrom(${arg})` }
},
}),
withInvalidDataAsyncQueryFn: build.query<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { data: 5 }
},
}),
withAsyncErrorQueryFn: build.query<string, string>({
async queryFn(arg: string) {
return { error: { type: 'Custom' } }
},
}),
withInvalidAsyncErrorQueryFn: build.query<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { error: 5 }
},
}),
mutationWithQueryFn: build.mutation<string, string>({
queryFn(arg: string) {
return { data: `resultFrom(${arg})` }
},
}),
mutationWithInvalidDataQueryFn: build.mutation<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { data: 5 }
},
}),
mutationWithErrorQueryFn: build.mutation<string, string>({
queryFn(arg: string) {
return { error: { type: 'Custom' } }
},
}),
mutationWithInvalidErrorQueryFn: build.mutation<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { error: 5 }
},
}),
mutationWithAsyncQueryFn: build.mutation<string, string>({
async queryFn(arg: string) {
return { data: `resultFrom(${arg})` }
},
}),
mutationWithInvalidAsyncQueryFn: build.mutation<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { data: 5 }
},
}),
mutationWithAsyncErrorQueryFn: build.mutation<string, string>({
async queryFn(arg: string) {
return { error: { type: 'Custom' } }
},
}),
mutationWithInvalidAsyncErrorQueryFn: build.mutation<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { error: 5 }
},
}),
// @ts-expect-error
withNeither: build.query<string, string>({}),
// @ts-expect-error
mutationWithNeither: build.mutation<string, string>({}),
}),
})
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (gDM) => gDM({}).concat(api.middleware),
})
test('fakeBaseQuery throws when invoking query', async () => {
const thunk = api.endpoints.withQuery.initiate('')
let result: { error?: any } | undefined
await expect(async () => {
result = await store.dispatch(thunk)
}).toHaveConsoleOutput(
`An unhandled error occurred processing a request for the endpoint "withQuery".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: When using \`fakeBaseQuery\`, all queries & mutations must use the \`queryFn\` definition syntax.]`
)
expect(result!.error).toEqual({
message:
'When using `fakeBaseQuery`, all queries & mutations must use the `queryFn` definition syntax.',
name: 'Error',
stack: expect.any(String),
})
})

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,302 @@
import type {
AnyAction,
EnhancedStore,
Middleware,
Store,
} from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import type { Reducer } from 'react'
import React, { useCallback } from 'react'
import { Provider } from 'react-redux'
import {
mockConsole,
createConsole,
getLog,
} from 'console-testing-library/pure'
import { cleanup, act } from '@testing-library/react'
export const ANY = 0 as any
export const DEFAULT_DELAY_MS = 150
export const getSerializedHeaders = (headers: Headers = new Headers()) => {
let result: Record<string, string> = {}
headers.forEach((val, key) => {
result[key] = val
})
return result
}
export async function waitMs(time = DEFAULT_DELAY_MS) {
const now = Date.now()
while (Date.now() < now + time) {
await new Promise((res) => process.nextTick(res))
}
}
export function waitForFakeTimer(time = DEFAULT_DELAY_MS) {
return new Promise((resolve) => setTimeout(resolve, time))
}
export function withProvider(store: Store<any>) {
return function Wrapper({ children }: any) {
return <Provider store={store}>{children}</Provider>
}
}
export const hookWaitFor = async (cb: () => void, time = 2000) => {
const startedAt = Date.now()
while (true) {
try {
cb()
return true
} catch (e) {
if (Date.now() > startedAt + time) {
throw e
}
await act(() => waitMs(2))
}
}
}
export const fakeTimerWaitFor = hookWaitFor
export const useRenderCounter = () => {
const countRef = React.useRef(0)
React.useEffect(() => {
countRef.current += 1
})
React.useEffect(() => {
return () => {
countRef.current = 0
}
}, [])
return useCallback(() => countRef.current, [])
}
declare global {
namespace jest {
interface Matchers<R> {
toMatchSequence(...matchers: Array<(arg: any) => boolean>): R
}
}
}
expect.extend({
toMatchSequence(
_actions: AnyAction[],
...matchers: Array<(arg: any) => boolean>
) {
const actions = _actions.concat()
actions.shift() // remove INIT
for (let i = 0; i < matchers.length; i++) {
if (!matchers[i](actions[i])) {
return {
message: () =>
`Action ${actions[i].type} does not match sequence at position ${i}.`,
pass: false,
}
}
}
return {
message: () => `All actions match the sequence.`,
pass: true,
}
},
})
declare global {
namespace jest {
interface Matchers<R> {
toHaveConsoleOutput(expectedOutput: string): Promise<R>
}
}
}
function normalize(str: string) {
return str
.normalize()
.replace(/\s*\r?\n\r?\s*/g, '')
.trim()
}
expect.extend({
async toHaveConsoleOutput(
fn: () => void | Promise<void>,
expectedOutput: string
) {
const restore = mockConsole(createConsole())
await fn()
const log = getLog().log
restore()
if (normalize(log) === normalize(expectedOutput))
return {
message: () => `Console output matches
===
${expectedOutput}
===`,
pass: true,
}
else
return {
message: () => `Console output
===
${log}
===
does not match
===
${expectedOutput}
===`,
pass: false,
}
},
})
export const actionsReducer = {
actions: (state: AnyAction[] = [], action: AnyAction) => {
return [...state, action]
},
}
export function setupApiStore<
A extends {
reducerPath: 'api'
reducer: Reducer<any, any>
middleware: Middleware
util: { resetApiState(): any }
},
R extends Record<string, Reducer<any, any>> = Record<never, never>
>(
api: A,
extraReducers?: R,
options: {
withoutListeners?: boolean
withoutTestLifecycles?: boolean
middleware?: {
prepend?: Middleware[]
concat?: Middleware[]
}
} = {}
) {
const { middleware } = options
const getStore = () =>
configureStore({
reducer: { api: api.reducer, ...extraReducers },
middleware: (gdm) => {
const tempMiddleware = gdm({
serializableCheck: false,
immutableCheck: false,
}).concat(api.middleware)
return tempMiddleware
.concat(...(middleware?.concat ?? []))
.prepend(...(middleware?.prepend ?? [])) as typeof tempMiddleware
},
})
type StoreType = EnhancedStore<
{
api: ReturnType<A['reducer']>
} & {
[K in keyof R]: ReturnType<R[K]>
},
AnyAction,
ReturnType<typeof getStore> extends EnhancedStore<any, any, infer M>
? M
: never
>
const initialStore = getStore() as StoreType
const refObj = {
api,
store: initialStore,
wrapper: withProvider(initialStore),
}
let cleanupListeners: () => void
if (!options.withoutTestLifecycles) {
beforeEach(() => {
const store = getStore() as StoreType
refObj.store = store
refObj.wrapper = withProvider(store)
if (!options.withoutListeners) {
cleanupListeners = setupListeners(store.dispatch)
}
})
afterEach(() => {
cleanup()
if (!options.withoutListeners) {
cleanupListeners()
}
refObj.store.dispatch(api.util.resetApiState())
})
}
return refObj
}
// type test helpers
export declare type IsAny<T, True, False = never> = true | false extends (
T extends never ? true : false
)
? True
: False
export declare type IsUnknown<T, True, False = never> = unknown extends T
? IsAny<T, False, True>
: False
export function expectType<T>(t: T): T {
return t
}
type Equals<T, U> = IsAny<
T,
never,
IsAny<U, never, [T] extends [U] ? ([U] extends [T] ? any : never) : never>
>
export function expectExactType<T>(t: T) {
return <U extends Equals<T, U>>(u: U) => {}
}
type EnsureUnknown<T extends any> = IsUnknown<T, any, never>
export function expectUnknown<T extends EnsureUnknown<T>>(t: T) {
return t
}
type EnsureAny<T extends any> = IsAny<T, any, never>
export function expectExactAny<T extends EnsureAny<T>>(t: T) {
return t
}
type IsNotAny<T> = IsAny<T, never, any>
export function expectNotAny<T extends IsNotAny<T>>(t: T): T {
return t
}
expectType<string>('5' as string)
expectType<string>('5' as const)
expectType<string>('5' as any)
expectExactType('5' as const)('5' as const)
// @ts-expect-error
expectExactType('5' as string)('5' as const)
// @ts-expect-error
expectExactType('5' as any)('5' as const)
expectUnknown('5' as unknown)
// @ts-expect-error
expectUnknown('5' as const)
// @ts-expect-error
expectUnknown('5' as any)
expectExactAny('5' as any)
// @ts-expect-error
expectExactAny('5' as const)
// @ts-expect-error
expectExactAny('5' as unknown)

View File

@@ -0,0 +1,141 @@
import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'
import { setupApiStore, waitMs } from './helpers'
import type { TagDescription } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
import { waitFor } from '@testing-library/react'
const tagTypes = [
'apple',
'pear',
'banana',
'tomato',
'cat',
'dog',
'giraffe',
] as const
type TagTypes = typeof tagTypes[number]
type Tags = TagDescription<TagTypes>[]
/** providesTags, invalidatesTags, shouldInvalidate */
const caseMatrix: [Tags, Tags, boolean][] = [
// *****************************
// basic invalidation behaviour
// *****************************
// string
[['apple'], ['apple'], true],
[['apple'], ['pear'], false],
// string and type only behave identical
[[{ type: 'apple' }], ['apple'], true],
[[{ type: 'apple' }], ['pear'], false],
[['apple'], [{ type: 'apple' }], true],
[['apple'], [{ type: 'pear' }], false],
// type only invalidates type + id
[[{ type: 'apple', id: 1 }], [{ type: 'apple' }], true],
[[{ type: 'pear', id: 1 }], ['apple'], false],
// type + id never invalidates type only
[['apple'], [{ type: 'apple', id: 1 }], false],
[['pear'], [{ type: 'apple', id: 1 }], false],
// type + id invalidates type + id
[[{ type: 'apple', id: 1 }], [{ type: 'apple', id: 1 }], true],
[[{ type: 'apple', id: 1 }], [{ type: 'apple', id: 2 }], false],
// *****************************
// test multiple values in array
// *****************************
[['apple', 'banana', 'tomato'], ['apple'], true],
[['apple'], ['pear', 'banana', 'tomato'], false],
[
[
{ type: 'apple', id: 1 },
{ type: 'apple', id: 3 },
{ type: 'apple', id: 4 },
],
[{ type: 'apple', id: 1 }],
true,
],
[
[{ type: 'apple', id: 1 }],
[
{ type: 'apple', id: 2 },
{ type: 'apple', id: 3 },
{ type: 'apple', id: 4 },
],
false,
],
]
test.each(caseMatrix)(
'\tprovidesTags: %O,\n\tinvalidatesTags: %O,\n\tshould invalidate: %s',
async (providesTags, invalidatesTags, shouldInvalidate) => {
let queryCount = 0
const {
store,
api,
api: {
endpoints: { invalidating, providing, unrelated },
},
} = setupApiStore(
createApi({
baseQuery: fakeBaseQuery(),
tagTypes,
endpoints: (build) => ({
providing: build.query<unknown, void>({
queryFn() {
queryCount++
return { data: {} }
},
providesTags,
}),
unrelated: build.query<unknown, void>({
queryFn() {
return { data: {} }
},
providesTags: ['cat', 'dog', { type: 'giraffe', id: 8 }],
}),
invalidating: build.mutation<unknown, void>({
queryFn() {
return { data: {} }
},
invalidatesTags,
}),
}),
}),
undefined,
{ withoutTestLifecycles: true }
)
store.dispatch(providing.initiate())
store.dispatch(unrelated.initiate())
expect(queryCount).toBe(1)
await waitFor(() => {
expect(api.endpoints.providing.select()(store.getState()).status).toBe(
'fulfilled'
)
expect(api.endpoints.unrelated.select()(store.getState()).status).toBe(
'fulfilled'
)
})
const toInvalidate = api.util.selectInvalidatedBy(
store.getState(),
invalidatesTags
)
if (shouldInvalidate) {
expect(toInvalidate).toEqual([
{
queryCacheKey: 'providing(undefined)',
endpointName: 'providing',
originalArgs: undefined,
},
])
} else {
expect(toInvalidate).toEqual([])
}
store.dispatch(invalidating.initiate())
expect(queryCount).toBe(1)
await waitMs(2)
expect(queryCount).toBe(shouldInvalidate ? 2 : 1)
}
)

View File

@@ -0,0 +1,259 @@
import type { SerializedError } from '@reduxjs/toolkit'
import { createSlice } from '@reduxjs/toolkit'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { renderHook, act } from '@testing-library/react'
import {
actionsReducer,
expectExactType,
hookWaitFor,
setupApiStore,
} from './helpers'
interface ResultType {
result: 'complex'
}
interface ArgType {
foo: 'bar'
count: 3
}
const baseQuery = fetchBaseQuery({ baseUrl: 'https://example.com' })
const api = createApi({
baseQuery,
endpoints(build) {
return {
querySuccess: build.query<ResultType, ArgType>({
query: () => '/success',
}),
querySuccess2: build.query({ query: () => '/success' }),
queryFail: build.query({ query: () => '/error' }),
mutationSuccess: build.mutation({
query: () => ({ url: '/success', method: 'POST' }),
}),
mutationSuccess2: build.mutation({
query: () => ({ url: '/success', method: 'POST' }),
}),
mutationFail: build.mutation({
query: () => ({ url: '/error', method: 'POST' }),
}),
}
},
})
const storeRef = setupApiStore(api, {
...actionsReducer,
})
const {
mutationFail,
mutationSuccess,
mutationSuccess2,
queryFail,
querySuccess,
querySuccess2,
} = api.endpoints
test('matches query pending & fulfilled actions for the given endpoint', async () => {
const endpoint = querySuccess2
const otherEndpoint = queryFail
const { result } = renderHook(() => endpoint.useQuery({} as any), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchFulfilled
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
otherEndpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
otherEndpoint.matchFulfilled
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
})
test('matches query pending & rejected actions for the given endpoint', async () => {
const endpoint = queryFail
const { result } = renderHook(() => endpoint.useQuery({}), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchFulfilled
)
})
test('matches lazy query pending & fulfilled actions for given endpoint', async () => {
const endpoint = querySuccess
const { result } = renderHook(() => endpoint.useLazyQuery(), {
wrapper: storeRef.wrapper,
})
act(() => void result.current[0]({} as any))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchFulfilled
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
})
test('matches lazy query pending & rejected actions for given endpoint', async () => {
const endpoint = queryFail
const { result } = renderHook(() => endpoint.useLazyQuery(), {
wrapper: storeRef.wrapper,
})
act(() => void result.current[0]({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
api.internalActions.subscriptionsUpdated.match,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchFulfilled
)
})
test('matches mutation pending & fulfilled actions for the given endpoint', async () => {
const endpoint = mutationSuccess
const otherEndpoint = mutationSuccess2
const { result } = renderHook(() => endpoint.useMutation(), {
wrapper: storeRef.wrapper,
})
act(() => void result.current[0]({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchFulfilled
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
otherEndpoint.matchPending,
otherEndpoint.matchFulfilled
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchRejected
)
})
test('matches mutation pending & rejected actions for the given endpoint', async () => {
const endpoint = mutationFail
const { result } = renderHook(() => endpoint.useMutation(), {
wrapper: storeRef.wrapper,
})
act(() => void result.current[0]({}))
await hookWaitFor(() => expect(result.current[1].isLoading).toBeFalsy())
expect(storeRef.store.getState().actions).toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchFulfilled,
endpoint.matchRejected
)
expect(storeRef.store.getState().actions).not.toMatchSequence(
api.internalActions.middlewareRegistered.match,
endpoint.matchPending,
endpoint.matchFulfilled
)
})
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)
expectExactType(0 as number)(action.meta.fulfilledTimeStamp)
// @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)
}
)
},
})
})

View File

@@ -0,0 +1,62 @@
import { setupServer } from 'msw/node'
import { rest } from 'msw'
// This configures a request mocking server with the given request handlers.
export type Post = {
id: number
title: string
body: string
}
export const posts: Record<number, Post> = {
1: { id: 1, title: 'hello', body: 'extra body!' },
}
export const server = setupServer(
rest.get('https://example.com/echo', (req, res, ctx) =>
res(ctx.json({ ...req, headers: req.headers.all() }))
),
rest.post('https://example.com/echo', (req, res, ctx) =>
res(ctx.json({ ...req, headers: req.headers.all() }))
),
rest.get('https://example.com/success', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
),
rest.post('https://example.com/success', (_, res, ctx) =>
res(ctx.json({ value: 'success' }))
),
rest.get('https://example.com/empty', (_, res, ctx) => res(ctx.body(''))),
rest.get('https://example.com/error', (_, res, ctx) =>
res(ctx.status(500), ctx.json({ value: 'error' }))
),
rest.post('https://example.com/error', (_, res, ctx) =>
res(ctx.status(500), ctx.json({ value: 'error' }))
),
rest.get('https://example.com/nonstandard-error', (_, res, ctx) =>
res(
ctx.status(200),
ctx.json({
success: false,
message: 'This returns a 200 but is really an error',
})
)
),
rest.get('https://example.com/mirror', (req, res, ctx) =>
res(ctx.json(req.params))
),
rest.post('https://example.com/mirror', (req, res, ctx) =>
res(ctx.json(req.params))
),
rest.get('https://example.com/posts/random', (req, res, ctx) => {
// just simulate an api that returned a random ID
const { id, ..._post } = posts[1]
return res(ctx.json({ id }))
}),
rest.get<Post, any, { id: number }>(
'https://example.com/post/:id',
(req, res, ctx) => {
return res(ctx.json(posts[req.params.id]))
}
)
)

View File

@@ -0,0 +1,488 @@
import { createApi } from '@reduxjs/toolkit/query/react'
import { actionsReducer, hookWaitFor, setupApiStore, waitMs } from './helpers'
import { renderHook, act } from '@testing-library/react'
import type { InvalidationState } from '../core/apiState'
interface Post {
id: string
title: string
contents: string
}
const baseQuery = jest.fn()
beforeEach(() => baseQuery.mockReset())
const api = createApi({
baseQuery: (...args: any[]) => {
const result = baseQuery(...args)
if (typeof result === 'object' && 'then' in result)
return result
.then((data: any) => ({ data, meta: 'meta' }))
.catch((e: any) => ({ error: e }))
return { data: result, meta: 'meta' }
},
tagTypes: ['Post'],
endpoints: (build) => ({
post: build.query<Post, string>({
query: (id) => `post/${id}`,
providesTags: ['Post'],
}),
listPosts: build.query<Post[], void>({
query: () => `posts`,
providesTags: (result) => [
...(result?.map(({ id }) => ({ type: 'Post' as const, id })) ?? []),
'Post',
],
}),
updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
query: ({ id, ...patch }) => ({
url: `post/${id}`,
method: 'PATCH',
body: patch,
}),
async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
const { undo } = dispatch(
api.util.updateQueryData('post', id, (draft) => {
Object.assign(draft, patch)
})
)
queryFulfilled.catch(undo)
},
invalidatesTags: (result) => (result ? ['Post'] : []),
}),
}),
})
const storeRef = setupApiStore(api, {
...actionsReducer,
})
describe('basic lifecycle', () => {
let onStart = jest.fn(),
onError = jest.fn(),
onSuccess = jest.fn()
const extendedApi = api.injectEndpoints({
endpoints: (build) => ({
test: build.mutation({
query: (x) => x,
async onQueryStarted(arg, api) {
onStart(arg)
try {
const result = await api.queryFulfilled
onSuccess(result)
} catch (e) {
onError(e)
}
},
}),
}),
overrideExisting: true,
})
beforeEach(() => {
onStart.mockReset()
onError.mockReset()
onSuccess.mockReset()
})
test('success', async () => {
const { result } = renderHook(
() => extendedApi.endpoints.test.useMutation(),
{
wrapper: storeRef.wrapper,
}
)
baseQuery.mockResolvedValue('success')
expect(onStart).not.toHaveBeenCalled()
expect(baseQuery).not.toHaveBeenCalled()
act(() => void result.current[0]('arg'))
expect(onStart).toHaveBeenCalledWith('arg')
expect(baseQuery).toHaveBeenCalledWith('arg', expect.any(Object), undefined)
expect(onError).not.toHaveBeenCalled()
expect(onSuccess).not.toHaveBeenCalled()
await act(() => waitMs(5))
expect(onError).not.toHaveBeenCalled()
expect(onSuccess).toHaveBeenCalledWith({ data: 'success', meta: 'meta' })
})
test('error', async () => {
const { result } = renderHook(
() => extendedApi.endpoints.test.useMutation(),
{
wrapper: storeRef.wrapper,
}
)
baseQuery.mockRejectedValue('error')
expect(onStart).not.toHaveBeenCalled()
expect(baseQuery).not.toHaveBeenCalled()
act(() => void result.current[0]('arg'))
expect(onStart).toHaveBeenCalledWith('arg')
expect(baseQuery).toHaveBeenCalledWith('arg', expect.any(Object), undefined)
expect(onError).not.toHaveBeenCalled()
expect(onSuccess).not.toHaveBeenCalled()
await act(() => waitMs(5))
expect(onError).toHaveBeenCalledWith({
error: 'error',
isUnhandledError: false,
meta: undefined,
})
expect(onSuccess).not.toHaveBeenCalled()
})
})
describe('updateQueryData', () => {
test('updates cache values, can apply inverse patch', async () => {
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,
})
await hookWaitFor(() => expect(result.current.isSuccess).toBeTruthy())
const dataBefore = result.current.data
expect(dataBefore).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
let returnValue!: ReturnType<ReturnType<typeof api.util.updateQueryData>>
act(() => {
returnValue = storeRef.store.dispatch(
api.util.updateQueryData('post', '3', (draft) => {
draft.contents = 'I love cheese!'
})
)
})
expect(result.current.data).not.toBe(dataBefore)
expect(result.current.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'I love cheese!',
})
expect(returnValue).toEqual({
inversePatches: [{ op: 'replace', path: ['contents'], value: 'TODO' }],
patches: [{ op: 'replace', path: ['contents'], value: 'I love cheese!' }],
undo: expect.any(Function),
})
act(() => {
storeRef.store.dispatch(
api.util.patchQueryData('post', '3', returnValue.inversePatches)
)
})
expect(result.current.data).toEqual(dataBefore)
})
test('updates (list) cache values including provided tags, undos that', async () => {
baseQuery
.mockResolvedValueOnce([
{
id: '3',
title: 'All about cheese.',
contents: 'TODO',
},
])
.mockResolvedValueOnce(42)
const { result } = renderHook(() => api.endpoints.listPosts.useQuery(), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isSuccess).toBeTruthy())
let provided!: InvalidationState<'Post'>
act(() => {
provided = storeRef.store.getState().api.provided
})
const provided3 = provided['Post']['3']
let returnValue!: ReturnType<ReturnType<typeof api.util.updateQueryData>>
act(() => {
returnValue = storeRef.store.dispatch(
api.util.updateQueryData(
'listPosts',
undefined,
(draft) => {
draft.push({
id: '4',
title: 'Mostly about cheese.',
contents: 'TODO',
})
},
true
)
)
})
act(() => {
provided = storeRef.store.getState().api.provided
})
const provided4 = provided['Post']['4']
expect(provided4).toEqual(provided3)
act(() => {
returnValue.undo()
})
act(() => {
provided = storeRef.store.getState().api.provided
})
const provided4Next = provided['Post']['4']
expect(provided4Next).toEqual([])
})
test('updates (list) cache values excluding provided tags, undos that', async () => {
baseQuery
.mockResolvedValueOnce([
{
id: '3',
title: 'All about cheese.',
contents: 'TODO',
},
])
.mockResolvedValueOnce(42)
const { result } = renderHook(() => api.endpoints.listPosts.useQuery(), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isSuccess).toBeTruthy())
let provided!: InvalidationState<'Post'>
act(() => {
provided = storeRef.store.getState().api.provided
})
let returnValue!: ReturnType<ReturnType<typeof api.util.updateQueryData>>
act(() => {
returnValue = storeRef.store.dispatch(
api.util.updateQueryData(
'listPosts',
undefined,
(draft) => {
draft.push({
id: '4',
title: 'Mostly about cheese.',
contents: 'TODO',
})
},
false
)
)
})
act(() => {
provided = storeRef.store.getState().api.provided
})
const provided4 = provided['Post']['4']
expect(provided4).toEqual(undefined)
act(() => {
returnValue.undo()
})
act(() => {
provided = storeRef.store.getState().api.provided
})
const provided4Next = provided['Post']['4']
expect(provided4Next).toEqual(undefined)
})
test('does not update non-existing values', async () => {
baseQuery
.mockImplementationOnce(async () => ({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
}))
.mockResolvedValueOnce(42)
const { result } = renderHook(() => api.endpoints.post.useQuery('3'), {
wrapper: storeRef.wrapper,
})
await hookWaitFor(() => expect(result.current.isSuccess).toBeTruthy())
const dataBefore = result.current.data
expect(dataBefore).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
let returnValue!: ReturnType<ReturnType<typeof api.util.updateQueryData>>
act(() => {
returnValue = storeRef.store.dispatch(
api.util.updateQueryData('post', '4', (draft) => {
draft.contents = 'I love cheese!'
})
)
})
expect(result.current.data).toBe(dataBefore)
expect(returnValue).toEqual({
inversePatches: [],
patches: [],
undo: expect.any(Function),
})
})
})
describe('full integration', () => {
test('success case', async () => {
baseQuery
.mockResolvedValueOnce({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
.mockResolvedValueOnce({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'Delicious cheese!',
})
.mockResolvedValueOnce({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'Delicious cheese!',
})
.mockResolvedValueOnce(42)
const { result } = renderHook(
() => ({
query: api.endpoints.post.useQuery('3'),
mutation: api.endpoints.updatePost.useMutation(),
}),
{
wrapper: storeRef.wrapper,
}
)
await hookWaitFor(() => expect(result.current.query.isSuccess).toBeTruthy())
expect(result.current.query.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
act(() => {
result.current.mutation[0]({ id: '3', contents: 'Delicious cheese!' })
})
expect(result.current.query.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'Delicious cheese!',
})
await hookWaitFor(() =>
expect(result.current.query.data).toEqual({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'Delicious cheese!',
})
)
})
test('error case', async () => {
baseQuery
.mockResolvedValueOnce({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
.mockRejectedValueOnce('some error!')
.mockResolvedValueOnce({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'TODO',
})
.mockResolvedValueOnce(42)
const { result } = renderHook(
() => ({
query: api.endpoints.post.useQuery('3'),
mutation: api.endpoints.updatePost.useMutation(),
}),
{
wrapper: storeRef.wrapper,
}
)
await hookWaitFor(() => expect(result.current.query.isSuccess).toBeTruthy())
expect(result.current.query.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
act(() => {
result.current.mutation[0]({ id: '3', contents: 'Delicious cheese!' })
})
// optimistic update
expect(result.current.query.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'Delicious cheese!',
})
// rollback
await hookWaitFor(() =>
expect(result.current.query.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
)
// mutation failed - will not invalidate query and not refetch data from the server
await expect(() =>
hookWaitFor(
() =>
expect(result.current.query.data).toEqual({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'TODO',
}),
50
)
).rejects.toBeTruthy()
act(() => void result.current.query.refetch())
// manually refetching gives up-to-date data
await hookWaitFor(
() =>
expect(result.current.query.data).toEqual({
id: '3',
title: 'Meanwhile, this changed server-side.',
contents: 'TODO',
}),
50
)
})
})

Some files were not shown because too many files have changed in this diff Show More