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

View File

@@ -0,0 +1,497 @@
import { createApi } from '@reduxjs/toolkit/query/react'
import { actionsReducer, hookWaitFor, setupApiStore, waitMs } from './helpers'
import { skipToken } from '../core/buildSelectors'
import { renderHook, act, waitFor } from '@testing-library/react'
import { delay } from '../../utils'
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'],
}),
updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
query: ({ id, ...patch }) => ({
url: `post/${id}`,
method: 'PATCH',
body: patch,
}),
async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
const currentItem = api.endpoints.post.select(arg.id)(getState())
if (currentItem?.data) {
dispatch(
api.util.upsertQueryData('post', arg.id, {
...currentItem.data,
...arg,
})
)
}
},
invalidatesTags: (result) => (result ? ['Post'] : []),
}),
post2: build.query<Post, string>({
queryFn: async (id) => {
await delay(20)
return {
data: {
id,
title: 'All about cheese.',
contents: 'TODO',
},
}
},
}),
}),
})
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('Does basic inserts and upserts', async () => {
const newPost: Post = {
id: '3',
contents: 'Inserted content',
title: 'Inserted title',
}
const insertPromise = storeRef.store.dispatch(
api.util.upsertQueryData('post', newPost.id, newPost)
)
await insertPromise
const selectPost3 = api.endpoints.post.select(newPost.id)
const insertedPostEntry = selectPost3(storeRef.store.getState())
expect(insertedPostEntry.isSuccess).toBe(true)
expect(insertedPostEntry.data).toEqual(newPost)
const updatedPost: Post = {
id: '3',
contents: 'Updated content',
title: 'Updated title',
}
const updatePromise = storeRef.store.dispatch(
api.util.upsertQueryData('post', updatedPost.id, updatedPost)
)
await updatePromise
const updatedPostEntry = selectPost3(storeRef.store.getState())
expect(updatedPostEntry.isSuccess).toBe(true)
expect(updatedPostEntry.data).toEqual(updatedPost)
})
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('upsertQueryData', () => {
test('inserts cache entry', 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',
})
await act(async () => {
storeRef.store.dispatch(
api.util.upsertQueryData('post', '3', {
id: '3',
title: 'All about cheese.',
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!',
})
})
test('does update non-existing values', async () => {
baseQuery
// throw an error to make sure there is no cached data
.mockImplementationOnce(async () => {
throw new Error('failed to load')
})
.mockResolvedValueOnce(42)
// a subscriber is needed to have the data stay in the cache
// Not sure if this is the wanted behaviour, I would have liked
// it to stay in the cache for the x amount of time the cache
// is preserved normally after the last subscriber was unmounted
const { result, rerender } = renderHook(
() => api.endpoints.post.useQuery('4'),
{
wrapper: storeRef.wrapper,
}
)
await hookWaitFor(() => expect(result.current.isError).toBeTruthy())
// upsert the data
act(() => {
storeRef.store.dispatch(
api.util.upsertQueryData('post', '4', {
id: '4',
title: 'All about cheese',
contents: 'I love cheese!',
})
)
})
// rerender the hook
rerender()
// wait until everything has settled
await hookWaitFor(() => expect(result.current.isSuccess).toBeTruthy())
// the cached data is returned as the result
expect(result.current.data).toStrictEqual({
id: '4',
title: 'All about cheese',
contents: 'I love cheese!',
})
})
test('upsert while a normal query is running (success)', async () => {
const fetchedData = {
id: '3',
title: 'All about cheese.',
contents: 'Yummy',
}
baseQuery.mockImplementation(() => delay(20).then(() => fetchedData))
const upsertedData = {
id: '3',
title: 'Data from a SSR Render',
contents: 'This is just some random data',
}
const selector = api.endpoints.post.select('3')
const fetchRes = storeRef.store.dispatch(api.endpoints.post.initiate('3'))
const upsertRes = storeRef.store.dispatch(
api.util.upsertQueryData('post', '3', upsertedData)
)
await upsertRes
let state = selector(storeRef.store.getState())
expect(state.data).toEqual(upsertedData)
await fetchRes
state = selector(storeRef.store.getState())
expect(state.data).toEqual(fetchedData)
})
test('upsert while a normal query is running (rejected)', async () => {
baseQuery.mockImplementation(async () => {
await delay(20)
// eslint-disable-next-line no-throw-literal
throw 'Error!'
})
const upsertedData = {
id: '3',
title: 'Data from a SSR Render',
contents: 'This is just some random data',
}
const selector = api.endpoints.post.select('3')
const fetchRes = storeRef.store.dispatch(api.endpoints.post.initiate('3'))
const upsertRes = storeRef.store.dispatch(
api.util.upsertQueryData('post', '3', upsertedData)
)
await upsertRes
let state = selector(storeRef.store.getState())
expect(state.data).toEqual(upsertedData)
expect(state.isSuccess).toBeTruthy()
await fetchRes
state = selector(storeRef.store.getState())
expect(state.data).toEqual(upsertedData)
expect(state.isError).toBeTruthy()
})
})
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',
})
await act(async () => {
await result.current.mutation[0]({
id: '3',
contents: 'Delicious cheese!',
})
})
expect(result.current.query.data).toEqual({
id: '3',
title: 'Meanwhile, this changed server-side.',
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',
})
await act(async () => {
await 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!',
})
// 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
)
})
test('Interop with in-flight requests', async () => {
await act(async () => {
const fetchRes = storeRef.store.dispatch(
api.endpoints.post2.initiate('3')
)
const upsertRes = storeRef.store.dispatch(
api.util.upsertQueryData('post2', '3', {
id: '3',
title: 'Upserted title',
contents: 'Upserted contents',
})
)
const selectEntry = api.endpoints.post2.select('3')
await waitFor(
() => {
const entry1 = selectEntry(storeRef.store.getState())
expect(entry1.data).toEqual({
id: '3',
title: 'Upserted title',
contents: 'Upserted contents',
})
},
{ interval: 1, timeout: 15 }
)
await waitFor(
() => {
const entry2 = selectEntry(storeRef.store.getState())
expect(entry2.data).toEqual({
id: '3',
title: 'All about cheese.',
contents: 'TODO',
})
},
{ interval: 1 }
)
})
})
})

View File

@@ -0,0 +1,116 @@
import { createApi } from '@reduxjs/toolkit/query'
import { setupApiStore, waitMs } from './helpers'
import { delay } from '../../utils'
const mockBaseQuery = jest
.fn()
.mockImplementation((args: any) => ({ data: args }))
const api = createApi({
baseQuery: mockBaseQuery,
tagTypes: ['Posts'],
endpoints: (build) => ({
getPosts: build.query<unknown, number>({
query(pageNumber) {
return { url: 'posts', params: pageNumber }
},
providesTags: ['Posts'],
}),
}),
})
const { getPosts } = api.endpoints
const storeRef = setupApiStore(api)
const getSubscribersForQueryCacheKey = (queryCacheKey: string) =>
storeRef.store.getState()[api.reducerPath].subscriptions[queryCacheKey] || {}
const createSubscriptionGetter = (queryCacheKey: string) => () =>
getSubscribersForQueryCacheKey(queryCacheKey)
describe('polling tests', () => {
it('clears intervals when seeing a resetApiState action', async () => {
await storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 10 },
subscribe: true,
})
)
expect(mockBaseQuery).toHaveBeenCalledTimes(1)
storeRef.store.dispatch(api.util.resetApiState())
await waitMs(30)
expect(mockBaseQuery).toHaveBeenCalledTimes(1)
})
it('replaces polling interval when the subscription options are updated', async () => {
const { requestId, queryCacheKey, ...subscription } =
storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 10 },
subscribe: true,
})
)
const getSubs = createSubscriptionGetter(queryCacheKey)
await delay(1)
expect(Object.keys(getSubs())).toHaveLength(1)
expect(getSubs()[requestId].pollingInterval).toBe(10)
subscription.updateSubscriptionOptions({ pollingInterval: 20 })
await delay(1)
expect(Object.keys(getSubs())).toHaveLength(1)
expect(getSubs()[requestId].pollingInterval).toBe(20)
})
it(`doesn't replace the interval when removing a shared query instance with a poll `, async () => {
const subscriptionOne = storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 10 },
subscribe: true,
})
)
storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 10 },
subscribe: true,
})
)
await delay(10)
const getSubs = createSubscriptionGetter(subscriptionOne.queryCacheKey)
expect(Object.keys(getSubs())).toHaveLength(2)
subscriptionOne.unsubscribe()
await delay(1)
expect(Object.keys(getSubs())).toHaveLength(1)
})
it('uses lowest specified interval when two components are mounted', async () => {
storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 30000 },
subscribe: true,
})
)
storeRef.store.dispatch(
getPosts.initiate(1, {
subscriptionOptions: { pollingInterval: 10 },
subscribe: true,
})
)
await waitMs(20)
expect(mockBaseQuery.mock.calls.length).toBeGreaterThanOrEqual(2)
})
})

View File

@@ -0,0 +1,403 @@
import type { SerializedError } from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import type { BaseQueryFn, FetchBaseQueryError } from '@reduxjs/toolkit/query'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post } from './mocks/server'
import { posts } from './mocks/server'
import { actionsReducer, setupApiStore } from './helpers'
import type { QuerySubState } from '@reduxjs/toolkit/dist/query/core/apiState'
describe('queryFn base implementation tests', () => {
const baseQuery: BaseQueryFn<string, { wrappedByBaseQuery: string }, string> =
jest.fn((arg: string) => arg.includes('withErrorQuery')
? ({ error: `cut${arg}` })
: ({ data: { wrappedByBaseQuery: arg } }))
const api = createApi({
baseQuery,
endpoints: (build) => ({
withQuery: build.query<string, string>({
query(arg: string) {
return `resultFrom(${arg})`
},
transformResponse(response) {
return response.wrappedByBaseQuery
},
}),
withErrorQuery: build.query<string, string>({
query(arg: string) {
return `resultFrom(${arg})`
},
transformErrorResponse(response) {
return response.slice(3)
},
}),
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: `resultFrom(${arg})` }
},
}),
withInvalidErrorQueryFn: build.query<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { error: 5 }
},
}),
withThrowingQueryFn: build.query<string, string>({
queryFn(arg: string) {
throw new Error(`resultFrom(${arg})`)
},
}),
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: `resultFrom(${arg})` }
},
}),
withInvalidAsyncErrorQueryFn: build.query<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { error: 5 }
},
}),
withAsyncThrowingQueryFn: build.query<string, string>({
async queryFn(arg: string) {
throw new Error(`resultFrom(${arg})`)
},
}),
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: `resultFrom(${arg})` }
},
}),
mutationWithInvalidErrorQueryFn: build.mutation<string, string>({
// @ts-expect-error
queryFn(arg: string) {
return { error: 5 }
},
}),
mutationWithThrowingQueryFn: build.mutation<string, string>({
queryFn(arg: string) {
throw new Error(`resultFrom(${arg})`)
},
}),
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: `resultFrom(${arg})` }
},
}),
mutationWithInvalidAsyncErrorQueryFn: build.mutation<string, string>({
// @ts-expect-error
async queryFn(arg: string) {
return { error: 5 }
},
}),
mutationWithAsyncThrowingQueryFn: build.mutation<string, string>({
async queryFn(arg: string) {
throw new Error(`resultFrom(${arg})`)
},
}),
// @ts-expect-error
withNeither: build.query<string, string>({}),
// @ts-expect-error
mutationWithNeither: build.mutation<string, string>({}),
}),
})
const {
withQuery,
withErrorQuery,
withQueryFn,
withErrorQueryFn,
withThrowingQueryFn,
withAsyncQueryFn,
withAsyncErrorQueryFn,
withAsyncThrowingQueryFn,
mutationWithQueryFn,
mutationWithErrorQueryFn,
mutationWithThrowingQueryFn,
mutationWithAsyncQueryFn,
mutationWithAsyncErrorQueryFn,
mutationWithAsyncThrowingQueryFn,
withNeither,
mutationWithNeither,
} = api.endpoints
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (gDM) => gDM({}).concat(api.middleware),
})
test.each([
['withQuery', withQuery, 'data'],
['withErrorQuery', withErrorQuery, 'error'],
['withQueryFn', withQueryFn, 'data'],
['withErrorQueryFn', withErrorQueryFn, 'error'],
['withThrowingQueryFn', withThrowingQueryFn, 'throw'],
['withAsyncQueryFn', withAsyncQueryFn, 'data'],
['withAsyncErrorQueryFn', withAsyncErrorQueryFn, 'error'],
['withAsyncThrowingQueryFn', withAsyncThrowingQueryFn, 'throw'],
])('%s1', async (endpointName, endpoint, expectedResult) => {
const thunk = endpoint.initiate(endpointName)
let result: undefined | QuerySubState<any> = undefined
await expect(async () => {
result = await store.dispatch(thunk)
}).toHaveConsoleOutput(
endpointName.includes('Throw')
? `An unhandled error occurred processing a request for the endpoint "${endpointName}".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: resultFrom(${endpointName})]`
: ''
)
if (expectedResult === 'data') {
expect(result).toEqual(
expect.objectContaining({
data: `resultFrom(${endpointName})`,
})
)
} else if (expectedResult === 'error') {
expect(result).toEqual(
expect.objectContaining({
error: `resultFrom(${endpointName})`,
})
)
} else {
expect(result).toEqual(
expect.objectContaining({
error: expect.objectContaining({
message: `resultFrom(${endpointName})`,
}),
})
)
}
})
test.each([
['mutationWithQueryFn', mutationWithQueryFn, 'data'],
['mutationWithErrorQueryFn', mutationWithErrorQueryFn, 'error'],
['mutationWithThrowingQueryFn', mutationWithThrowingQueryFn, 'throw'],
['mutationWithAsyncQueryFn', mutationWithAsyncQueryFn, 'data'],
['mutationWithAsyncErrorQueryFn', mutationWithAsyncErrorQueryFn, 'error'],
[
'mutationWithAsyncThrowingQueryFn',
mutationWithAsyncThrowingQueryFn,
'throw',
],
])('%s', async (endpointName, endpoint, expectedResult) => {
const thunk = endpoint.initiate(endpointName)
let result:
| undefined
| { data: string }
| { error: string | SerializedError } = undefined
await expect(async () => {
result = await store.dispatch(thunk)
}).toHaveConsoleOutput(
endpointName.includes('Throw')
? `An unhandled error occurred processing a request for the endpoint "${endpointName}".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: resultFrom(${endpointName})]`
: ''
)
if (expectedResult === 'data') {
expect(result).toEqual(
expect.objectContaining({
data: `resultFrom(${endpointName})`,
})
)
} else if (expectedResult === 'error') {
expect(result).toEqual(
expect.objectContaining({
error: `resultFrom(${endpointName})`,
})
)
} else {
expect(result).toEqual(
expect.objectContaining({
error: expect.objectContaining({
message: `resultFrom(${endpointName})`,
}),
})
)
}
})
test('neither provided', async () => {
{
const thunk = withNeither.initiate('withNeither')
let result: QuerySubState<any>
await expect(async () => {
result = await store.dispatch(thunk)
}).toHaveConsoleOutput(
`An unhandled error occurred processing a request for the endpoint "withNeither".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [TypeError: endpointDefinition.queryFn is not a function]`
)
expect(result!.error).toEqual(
expect.objectContaining({
message: 'endpointDefinition.queryFn is not a function',
})
)
}
{
let result:
| undefined
| { data: string }
| { error: string | SerializedError } = undefined
const thunk = mutationWithNeither.initiate('mutationWithNeither')
await expect(async () => {
result = await store.dispatch(thunk)
}).toHaveConsoleOutput(
`An unhandled error occurred processing a request for the endpoint "mutationWithNeither".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [TypeError: endpointDefinition.queryFn is not a function]`
)
expect((result as any).error).toEqual(
expect.objectContaining({
message: 'endpointDefinition.queryFn is not a function',
})
)
}
})
})
describe('usage scenario tests', () => {
const mockData = { id: 1, name: 'Banana' }
const mockDocResult = {
exists: () => true,
data: () => mockData,
}
const get = jest.fn(() => Promise.resolve(mockDocResult))
const doc = jest.fn((name) => ({
get,
}))
const collection = jest.fn((name) => ({ get, doc }))
const firestore = () => {
return { collection, doc }
}
const baseQuery = fetchBaseQuery({ baseUrl: 'https://example.com/' })
const api = createApi({
baseQuery,
endpoints: (build) => ({
getRandomUser: build.query<Post, void>({
async queryFn(_arg: void, _queryApi, _extraOptions, fetchWithBQ) {
// get a random post
const randomResult = await fetchWithBQ('posts/random')
if (randomResult.error) {
throw randomResult.error
}
const post = randomResult.data as Post
const result = await fetchWithBQ(`/post/${post.id}`)
return result.data
? { data: result.data as Post }
: { error: result.error as FetchBaseQueryError }
},
}),
getFirebaseUser: build.query<typeof mockData, number>({
async queryFn(arg: number) {
const getResult = await firestore().collection('users').doc(arg).get()
if (!getResult.exists()) {
throw new Error('Missing user')
}
return { data: getResult.data() }
},
}),
getMissingFirebaseUser: build.query<typeof mockData, number>({
async queryFn(arg: number) {
const getResult = await firestore().collection('users').doc(arg).get()
// intentionally throw if it exists to keep the mocking overhead low
if (getResult.exists()) {
throw new Error('Missing user')
}
return { data: getResult.data() }
},
}),
}),
})
const storeRef = setupApiStore(api, {
...actionsReducer,
})
/**
* Allow for a scenario where you can chain X requests
* https://discord.com/channels/102860784329052160/103538784460615680/825430959247720449
* const resp1 = await api.get(url);
* const resp2 = await api.get(`${url2}/id=${resp1.data.id}`);
*/
it('can chain multiple queries together', async () => {
const result = await storeRef.store.dispatch(
api.endpoints.getRandomUser.initiate()
)
expect(result.data).toEqual(posts[1])
})
it('can wrap a service like Firebase', async () => {
const result = await storeRef.store.dispatch(
api.endpoints.getFirebaseUser.initiate(1)
)
expect(result.data).toEqual(mockData)
})
it('can wrap a service like Firebase and handle errors', async () => {
let result: QuerySubState<any>
await expect(async () => {
result = await storeRef.store.dispatch(
api.endpoints.getMissingFirebaseUser.initiate(1)
)
})
.toHaveConsoleOutput(`An unhandled error occurred processing a request for the endpoint "getMissingFirebaseUser".
In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: Missing user]`)
expect(result!.data).toBeUndefined()
expect(result!.error).toEqual(
expect.objectContaining({
message: 'Missing user',
name: 'Error',
})
)
})
})

View File

@@ -0,0 +1,558 @@
import { createApi } from '@reduxjs/toolkit/query'
import { waitFor } from '@testing-library/react'
import type {
FetchBaseQueryMeta,
FetchBaseQueryError,
} from '@reduxjs/toolkit/query'
import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import { expectType, setupApiStore } from './helpers'
import { server } from './mocks/server'
import { rest } from 'msw'
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
endpoints: () => ({}),
})
const storeRef = setupApiStore(api)
const onStart = jest.fn()
const onSuccess = jest.fn()
const onError = jest.fn()
beforeEach(() => {
onStart.mockClear()
onSuccess.mockClear()
onError.mockClear()
})
describe.each([['query'], ['mutation']] as const)(
'generic cases: %s',
(type) => {
test(`${type}: onStart only`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/success',
onQueryStarted(arg) {
onStart(arg)
},
}),
}),
})
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
expect(onStart).toHaveBeenCalledWith('arg')
})
test(`${type}: onStart and onSuccess`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<number, string>({
query: () => '/success',
async onQueryStarted(arg, { queryFulfilled }) {
onStart(arg)
// awaiting without catching like this would result in an `unhandledRejection` exception if there was an error
// unfortunately we cannot test for that in jest.
const result = await queryFulfilled
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(result)
onSuccess(result)
},
}),
}),
})
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
expect(onStart).toHaveBeenCalledWith('arg')
await waitFor(() => {
expect(onSuccess).toHaveBeenCalledWith({
data: { value: 'success' },
meta: {
request: expect.any(Request),
response: expect.any(Object), // Response is not available in jest env
},
})
})
})
test(`${type}: onStart and onError`, async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build[type as 'mutation']<unknown, string>({
query: () => '/error',
async onQueryStarted(arg, { queryFulfilled }) {
onStart(arg)
try {
const result = await queryFulfilled
onSuccess(result)
} catch (e) {
onError(e)
}
},
}),
}),
})
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
expect(onStart).toHaveBeenCalledWith('arg')
await waitFor(() => {
expect(onError).toHaveBeenCalledWith({
error: {
status: 500,
data: { value: 'error' },
},
isUnhandledError: false,
meta: {
request: expect.any(Request),
response: expect.any(Object), // Response is not available in jest env
},
})
})
expect(onSuccess).not.toHaveBeenCalled()
})
}
)
test('query: getCacheEntry (success)', async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, string>({
query: () => '/success',
async onQueryStarted(
arg,
{ dispatch, getState, getCacheEntry, queryFulfilled }
) {
try {
snapshot(getCacheEntry())
const result = await queryFulfilled
onSuccess(result)
snapshot(getCacheEntry())
} catch (e) {
onError(e)
snapshot(getCacheEntry())
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
await waitFor(() => {
expect(onSuccess).toHaveBeenCalled()
})
expect(snapshot).toHaveBeenCalledTimes(2)
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',
})
})
test('query: getCacheEntry (error)', async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, string>({
query: () => '/error',
async onQueryStarted(
arg,
{ dispatch, getState, getCacheEntry, queryFulfilled }
) {
try {
snapshot(getCacheEntry())
const result = await queryFulfilled
onSuccess(result)
snapshot(getCacheEntry())
} catch (e) {
onError(e)
snapshot(getCacheEntry())
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
await waitFor(() => {
expect(onError).toHaveBeenCalled()
})
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({
error: {
data: { value: 'error' },
status: 500,
},
endpointName: 'injected',
isError: true,
isLoading: false,
isSuccess: false,
isUninitialized: false,
originalArgs: 'arg',
requestId: promise.requestId,
startedTimeStamp: expect.any(Number),
status: 'rejected',
})
})
test('mutation: getCacheEntry (success)', async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.mutation<unknown, string>({
query: () => '/success',
async onQueryStarted(
arg,
{ dispatch, getState, getCacheEntry, queryFulfilled }
) {
try {
snapshot(getCacheEntry())
const result = await queryFulfilled
onSuccess(result)
snapshot(getCacheEntry())
} catch (e) {
onError(e)
snapshot(getCacheEntry())
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
await waitFor(() => {
expect(onSuccess).toHaveBeenCalled()
})
expect(snapshot).toHaveBeenCalledTimes(2)
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',
})
})
test('mutation: getCacheEntry (error)', async () => {
const snapshot = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.mutation<unknown, string>({
query: () => '/error',
async onQueryStarted(
arg,
{ dispatch, getState, getCacheEntry, queryFulfilled }
) {
try {
snapshot(getCacheEntry())
const result = await queryFulfilled
onSuccess(result)
snapshot(getCacheEntry())
} catch (e) {
onError(e)
snapshot(getCacheEntry())
}
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
await waitFor(() => {
expect(onError).toHaveBeenCalled()
})
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({
error: {
data: { value: 'error' },
status: 500,
},
endpointName: 'injected',
isError: true,
isLoading: false,
isSuccess: false,
isUninitialized: false,
startedTimeStamp: expect.any(Number),
status: 'rejected',
})
})
test('query: updateCachedData', async () => {
const trackCalls = jest.fn()
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<{ value: string }, string>({
query: () => '/success',
async onQueryStarted(
arg,
{
dispatch,
getState,
getCacheEntry,
updateCachedData,
queryFulfilled,
}
) {
// calling `updateCachedData` when there is no data yet should not do anything
// but if there is a cache value it will be updated & overwritten by the next succesful result
updateCachedData((draft) => {
draft.value += '.'
})
try {
const val = await queryFulfilled
onSuccess(getCacheEntry().data)
} catch (error) {
updateCachedData((draft) => {
draft.value += 'x'
})
onError(getCacheEntry().data)
}
},
}),
}),
})
// request 1: success
expect(onSuccess).not.toHaveBeenCalled()
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
await waitFor(() => {
expect(onSuccess).toHaveBeenCalled()
})
expect(onSuccess).toHaveBeenCalledWith({ value: 'success' })
onSuccess.mockClear()
// request 2: error
expect(onError).not.toHaveBeenCalled()
server.use(
rest.get('https://example.com/success', (_, req, ctx) =>
req.once(ctx.status(500), ctx.json({ value: 'failed' }))
)
)
storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg', { forceRefetch: true })
)
await waitFor(() => {
expect(onError).toHaveBeenCalled()
})
expect(onError).toHaveBeenCalledWith({ value: 'success.x' })
// request 3: success
expect(onSuccess).not.toHaveBeenCalled()
storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg', { forceRefetch: true })
)
await waitFor(() => {
expect(onSuccess).toHaveBeenCalled()
})
expect(onSuccess).toHaveBeenCalledWith({ value: 'success' })
onSuccess.mockClear()
})
test('query: will only start lifecycle if query is not skipped due to `condition`', async () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build.query<unknown, string>({
query: () => '/success',
onQueryStarted(arg) {
onStart(arg)
},
}),
}),
})
const promise = storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg')
)
expect(onStart).toHaveBeenCalledTimes(1)
storeRef.store.dispatch(extended.endpoints.injected.initiate('arg'))
expect(onStart).toHaveBeenCalledTimes(1)
await promise
storeRef.store.dispatch(
extended.endpoints.injected.initiate('arg', { forceRefetch: true })
)
expect(onStart).toHaveBeenCalledTimes(2)
})
test('query types', () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build['query']<number, string>({
query: () => '/success',
async onQueryStarted(arg, { queryFulfilled }) {
onStart(arg)
queryFulfilled.then(
(result) => {
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(result)
},
(reason) => {
if (reason.isUnhandledError) {
expectType<{
error: unknown
meta?: undefined
isUnhandledError: true
}>(reason)
} else {
expectType<{
error: FetchBaseQueryError
isUnhandledError: false
meta: FetchBaseQueryMeta | undefined
}>(reason)
}
}
)
queryFulfilled.catch((reason) => {
if (reason.isUnhandledError) {
expectType<{
error: unknown
meta?: undefined
isUnhandledError: true
}>(reason)
} else {
expectType<{
error: FetchBaseQueryError
isUnhandledError: false
meta: FetchBaseQueryMeta | undefined
}>(reason)
}
})
const result = await queryFulfilled
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(result)
},
}),
}),
})
})
test('mutation types', () => {
const extended = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
injected: build['query']<number, string>({
query: () => '/success',
async onQueryStarted(arg, { queryFulfilled }) {
onStart(arg)
queryFulfilled.then(
(result) => {
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(result)
},
(reason) => {
if (reason.isUnhandledError) {
expectType<{
error: unknown
meta?: undefined
isUnhandledError: true
}>(reason)
} else {
expectType<{
error: FetchBaseQueryError
isUnhandledError: false
meta: FetchBaseQueryMeta | undefined
}>(reason)
}
}
)
queryFulfilled.catch((reason) => {
if (reason.isUnhandledError) {
expectType<{
error: unknown
meta?: undefined
isUnhandledError: true
}>(reason)
} else {
expectType<{
error: FetchBaseQueryError
isUnhandledError: false
meta: FetchBaseQueryMeta | undefined
}>(reason)
}
})
const result = await queryFulfilled
expectType<{ data: number; meta?: FetchBaseQueryMeta }>(result)
},
}),
}),
})
})

View File

@@ -0,0 +1,458 @@
import * as React from 'react'
import { createApi, setupListeners } from '@reduxjs/toolkit/query/react'
import { act, fireEvent, render, waitFor, screen } from '@testing-library/react'
import { setupApiStore, waitMs } from './helpers'
import { delay } from '../../utils'
// Just setup a temporary in-memory counter for tests that `getIncrementedAmount`.
// This can be used to test how many renders happen due to data changes or
// the refetching behavior of components.
let amount = 0
const defaultApi = createApi({
baseQuery: async (arg: any) => {
await waitMs()
if ('amount' in arg?.body) {
amount += 1
}
return {
data: arg?.body
? { ...arg.body, ...(amount ? { amount } : {}) }
: undefined,
}
},
endpoints: (build) => ({
getIncrementedAmount: build.query<any, void>({
query: () => ({
url: '',
body: {
amount,
},
}),
}),
}),
refetchOnFocus: true,
refetchOnReconnect: true,
})
const storeRef = setupApiStore(defaultApi)
let getIncrementedAmountState = () =>
storeRef.store.getState().api.queries['getIncrementedAmount(undefined)']
afterEach(() => {
amount = 0
})
describe('refetchOnFocus tests', () => {
test('useQuery hook respects refetchOnFocus: true when set in createApi options', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery())
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
await act(async () => {
fireEvent.focus(window)
})
await waitMs()
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('2')
)
})
test('useQuery hook respects refetchOnFocus: false from a hook and overrides createApi defaults', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnFocus: false,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
fireEvent.focus(window)
})
await waitMs()
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
})
test('useQuery hook prefers refetchOnFocus: true when multiple components have different configurations', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnFocus: false,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
function UserWithRefetchTrue() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnFocus: true,
}))
return <div />
}
render(
<div>
<User />
<UserWithRefetchTrue />
</div>,
{ wrapper: storeRef.wrapper }
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
fireEvent.focus(window)
})
expect(screen.getByTestId('isLoading').textContent).toBe('false')
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('2')
)
})
test('useQuery hook cleans data if refetch without active subscribers', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnFocus: true,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
const { unmount } = render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
unmount()
expect(getIncrementedAmountState()).not.toBeUndefined()
await act(async () => {
fireEvent.focus(window)
})
await delay(1)
expect(getIncrementedAmountState()).toBeUndefined()
})
})
describe('refetchOnReconnect tests', () => {
test('useQuery hook respects refetchOnReconnect: true when set in createApi options', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery())
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
window.dispatchEvent(new Event('offline'))
window.dispatchEvent(new Event('online'))
})
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('2')
)
})
test('useQuery hook should not refetch when refetchOnReconnect: false from a hook and overrides createApi defaults', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnReconnect: false,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
window.dispatchEvent(new Event('offline'))
window.dispatchEvent(new Event('online'))
})
expect(screen.getByTestId('isFetching').textContent).toBe('false')
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
})
test('useQuery hook prefers refetchOnReconnect: true when multiple components have different configurations', async () => {
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnReconnect: false,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
function UserWithRefetchTrue() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnReconnect: true,
}))
return <div />
}
render(
<div>
<User />
<UserWithRefetchTrue />
</div>,
{ wrapper: storeRef.wrapper }
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
window.dispatchEvent(new Event('offline'))
window.dispatchEvent(new Event('online'))
})
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('2')
)
})
})
describe('customListenersHandler', () => {
const storeRef = setupApiStore(defaultApi, undefined, {
withoutListeners: true,
})
test('setupListeners accepts a custom callback and executes it', async () => {
const consoleSpy = jest.spyOn(console, 'log')
consoleSpy.mockImplementation((...args) => {
// console.info(...args)
})
const dispatchSpy = jest.spyOn(storeRef.store, 'dispatch')
let unsubscribe = () => {}
unsubscribe = setupListeners(
storeRef.store.dispatch,
(dispatch, actions) => {
const handleOnline = () =>
dispatch(defaultApi.internalActions.onOnline())
window.addEventListener('online', handleOnline, false)
console.log('setup!')
return () => {
window.removeEventListener('online', handleOnline)
console.log('cleanup!')
}
}
)
await waitMs()
let data, isLoading, isFetching
function User() {
;({ data, isFetching, isLoading } =
defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
refetchOnReconnect: true,
}))
return (
<div>
<div data-testid="isLoading">{String(isLoading)}</div>
<div data-testid="isFetching">{String(isFetching)}</div>
<div data-testid="amount">{String(data?.amount)}</div>
</div>
)
}
render(<User />, { wrapper: storeRef.wrapper })
expect(consoleSpy).toHaveBeenCalledWith('setup!')
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isLoading').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('1')
)
act(() => {
window.dispatchEvent(new Event('offline'))
window.dispatchEvent(new Event('online'))
})
expect(dispatchSpy).toHaveBeenCalled()
// Ignore RTKQ middleware `internal_probeSubscription` calls
const mockCallsWithoutInternals = dispatchSpy.mock.calls.filter(
(call) => !(call[0] as any)?.type?.includes('internal')
)
expect(
defaultApi.internalActions.onOnline.match(
mockCallsWithoutInternals[1][0] as any
)
).toBe(true)
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('true')
)
await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('false')
)
await waitFor(() =>
expect(screen.getByTestId('amount').textContent).toBe('2')
)
unsubscribe()
expect(consoleSpy).toHaveBeenCalledWith('cleanup!')
})
})

View File

@@ -0,0 +1,476 @@
import type { BaseQueryFn } from '@reduxjs/toolkit/query'
import { createApi, retry } from '@reduxjs/toolkit/query'
import { setupApiStore, waitMs } from './helpers'
import type { RetryOptions } from '../retry'
beforeEach(() => {
jest.useFakeTimers('legacy')
})
const loopTimers = async (max: number = 12) => {
let count = 0
while (count < max) {
await waitMs(1)
jest.advanceTimersByTime(120000)
count++
}
}
describe('configuration', () => {
test('retrying without any config options', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery)
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(7)
expect(baseBaseQuery).toHaveBeenCalledTimes(6)
})
test('retrying with baseQuery config that overrides default behavior (maxRetries: 5)', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(5)
expect(baseBaseQuery).toHaveBeenCalledTimes(4)
})
test('retrying with endpoint config that overrides baseQuery config', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
q2: build.query({
query: () => {},
extraOptions: { maxRetries: 8 },
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(5)
expect(baseBaseQuery).toHaveBeenCalledTimes(4)
baseBaseQuery.mockClear()
storeRef.store.dispatch(api.endpoints.q2.initiate({}))
await loopTimers(10)
expect(baseBaseQuery).toHaveBeenCalledTimes(9)
})
test('stops retrying a query after a success', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery
.mockResolvedValueOnce({ error: 'rejected' })
.mockResolvedValueOnce({ error: 'rejected' })
.mockResolvedValue({ data: { success: true } })
const baseQuery = retry(baseBaseQuery, { maxRetries: 10 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.mutation({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(6)
expect(baseBaseQuery).toHaveBeenCalledTimes(3)
})
test('retrying also works with mutations', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
m1: build.mutation({
query: () => ({ method: 'PUT' }),
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.m1.initiate({}))
await loopTimers(5)
expect(baseBaseQuery).toHaveBeenCalledTimes(4)
})
test('retrying stops after a success from a mutation', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery
.mockRejectedValueOnce(new Error('rejected'))
.mockRejectedValueOnce(new Error('rejected'))
.mockResolvedValue({ data: { success: true } })
const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
m1: build.mutation({
query: () => ({ method: 'PUT' }),
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.m1.initiate({}))
await loopTimers(5)
expect(baseBaseQuery).toHaveBeenCalledTimes(3)
})
test('non-error-cases should **not** retry', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ data: { success: true } })
const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(2)
expect(baseBaseQuery).toHaveBeenCalledTimes(1)
})
test('calling retry.fail(error) will skip retrying and expose the error directly', async () => {
const error = { message: 'banana' }
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockImplementation((input) => {
retry.fail(error)
return { data: `this won't happen` }
})
const baseQuery = retry(baseBaseQuery)
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
const result = await storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(2)
expect(baseBaseQuery).toHaveBeenCalledTimes(1)
expect(result.error).toEqual(error)
expect(result).toEqual({
endpointName: 'q1',
error,
isError: true,
isLoading: false,
isSuccess: false,
isUninitialized: false,
originalArgs: expect.any(Object),
requestId: expect.any(String),
startedTimeStamp: expect.any(Number),
status: 'rejected',
})
})
test('wrapping retry(retry(..., { maxRetries: 3 }), { maxRetries: 3 }) should retry 16 times', async () => {
/**
* Note:
* This will retry 16 total times because we try the initial + 3 retries (sum: 4), then retry that process 3 times (starting at 0 for a total of 4)... 4x4=16 (allegedly)
*/
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(retry(baseBaseQuery, { maxRetries: 3 }), {
maxRetries: 3,
})
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(18)
expect(baseBaseQuery).toHaveBeenCalledTimes(16)
})
test('accepts a custom backoff fn', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, {
maxRetries: 8,
backoff: async (attempt, maxRetries) => {
const attempts = Math.min(attempt, maxRetries)
const timeout = attempts * 300 // Scale up by 300ms per request, ex: 300ms, 600ms, 900ms, 1200ms...
await new Promise((resolve) =>
setTimeout((res: any) => resolve(res), timeout)
)
},
})
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers()
expect(baseBaseQuery).toHaveBeenCalledTimes(9)
})
test('accepts a custom retryCondition fn', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const overrideMaxRetries = 3
const baseQuery = retry(baseBaseQuery, {
retryCondition: (_, __, { attempt }) => attempt <= overrideMaxRetries,
})
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers()
expect(baseBaseQuery).toHaveBeenCalledTimes(overrideMaxRetries + 1)
})
test('retryCondition with endpoint config that overrides baseQuery config', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, {
maxRetries: 10,
})
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
extraOptions: {
retryCondition: (_, __, { attempt }) => attempt <= 5,
},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers()
expect(baseBaseQuery).toHaveBeenCalledTimes(6)
})
test('retryCondition also works with mutations', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery
.mockRejectedValueOnce(new Error('rejected'))
.mockRejectedValueOnce(new Error('hello retryCondition'))
.mockRejectedValueOnce(new Error('rejected'))
.mockResolvedValue({ error: 'hello retryCondition' })
const baseQuery = retry(baseBaseQuery, {})
const api = createApi({
baseQuery,
endpoints: (build) => ({
m1: build.mutation({
query: () => ({ method: 'PUT' }),
extraOptions: {
retryCondition: (e) => e.data === 'hello retryCondition',
},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.m1.initiate({}))
await loopTimers()
expect(baseBaseQuery).toHaveBeenCalledTimes(4)
})
test('Specifying maxRetries as 0 in RetryOptions prevents retries', async () => {
const baseBaseQuery = jest.fn<
ReturnType<BaseQueryFn>,
Parameters<BaseQueryFn>
>()
baseBaseQuery.mockResolvedValue({ error: 'rejected' })
const baseQuery = retry(baseBaseQuery, { maxRetries: 0 })
const api = createApi({
baseQuery,
endpoints: (build) => ({
q1: build.query({
query: () => {},
}),
}),
})
const storeRef = setupApiStore(api, undefined, {
withoutTestLifecycles: true,
})
storeRef.store.dispatch(api.endpoints.q1.initiate({}))
await loopTimers(2)
expect(baseBaseQuery).toHaveBeenCalledTimes(1)
});
test.skip('RetryOptions only accepts one of maxRetries or retryCondition', () => {
// @ts-expect-error Should complain if both exist at once
const ro: RetryOptions = {
maxRetries: 5,
retryCondition: () => false,
}
})
})

View File

@@ -0,0 +1,3 @@
{
"extends": "../../../tsconfig.test.json"
}

View File

@@ -0,0 +1,6 @@
{
"extends": "../../../tsconfig.test.json",
"compilerOptions": {
"skipLibCheck": true
}
}

View File

@@ -0,0 +1,611 @@
import type { SerializedError } from '@reduxjs/toolkit'
import type {
FetchBaseQueryError,
TypedUseQueryHookResult,
TypedUseQueryStateResult,
TypedUseQuerySubscriptionResult,
TypedUseMutationResult,
} from '@reduxjs/toolkit/query/react'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { expectExactType, expectType } from './helpers'
const baseQuery = fetchBaseQuery()
const api = createApi({
baseQuery,
endpoints: (build) => ({
test: build.query<string, void>({ query: () => '' }),
mutation: build.mutation<string, void>({ query: () => '' }),
}),
})
describe.skip('TS only tests', () => {
test('query selector union', () => {
const result = api.endpoints.test.select()({} as any)
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isLoading) {
expectExactType('' as string | undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('useQuery union', () => {
const result = api.endpoints.test.useQuery()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isLoading) {
expectExactType(undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isFetching) {
expectExactType('' as string | undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as boolean)(result.isLoading)
expectExactType(false as boolean)(result.isSuccess)
expectExactType(false as false)(result.isError)
}
expectExactType('' as string | undefined)(result.currentData)
// @ts-expect-error
expectExactType('' as string)(result.currentData)
if (result.isSuccess) {
if (!result.isFetching) {
expectExactType('' as string)(result.currentData)
} else {
expectExactType('' as string | undefined)(result.currentData)
// @ts-expect-error
expectExactType('' as string)(result.currentData)
}
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('useQuery TS4.1 union', () => {
const result = api.useTestQuery()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isLoading) {
expectExactType(undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isFetching) {
expectExactType('' as string | undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as boolean)(result.isLoading)
expectExactType(false as boolean)(result.isSuccess)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('useLazyQuery union', () => {
const [_trigger, result] = api.endpoints.test.useLazyQuery()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isLoading) {
expectExactType(undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isFetching) {
expectExactType('' as string | undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as boolean)(result.isLoading)
expectExactType(false as boolean)(result.isSuccess)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('useLazyQuery TS4.1 union', () => {
const [_trigger, result] = api.useLazyTestQuery()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isLoading) {
expectExactType(undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
expectExactType(false as false)(result.isFetching)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as boolean)(result.isFetching)
}
if (result.isFetching) {
expectExactType('' as string | undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as boolean)(result.isLoading)
expectExactType(false as boolean)(result.isSuccess)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('queryHookResult (without selector) union', async () => {
const useQueryStateResult = api.endpoints.test.useQueryState()
const useQueryResult = api.endpoints.test.useQuery()
const useQueryStateWithSelectFromResult = api.endpoints.test.useQueryState(
undefined,
{
selectFromResult: () => ({ x: true }),
}
)
const { refetch, ...useQueryResultWithoutMethods } = useQueryResult
expectExactType(useQueryStateResult)(useQueryResultWithoutMethods)
expectExactType(useQueryStateWithSelectFromResult)(
// @ts-expect-error
useQueryResultWithoutMethods
)
expectType<ReturnType<ReturnType<typeof api.endpoints.test.select>>>(
await refetch()
)
})
test('useQueryState (with selectFromResult)', () => {
const result = api.endpoints.test.useQueryState(undefined, {
selectFromResult({
data,
isLoading,
isFetching,
isError,
isSuccess,
isUninitialized,
}) {
return {
data: data ?? 1,
isLoading,
isFetching,
isError,
isSuccess,
isUninitialized,
}
},
})
expectExactType({
data: '' as string | number,
isUninitialized: false,
isLoading: true,
isFetching: true,
isSuccess: false,
isError: false,
})(result)
})
test('useQuery (with selectFromResult)', async () => {
const { refetch, ...result } = api.endpoints.test.useQuery(undefined, {
selectFromResult({
data,
isLoading,
isFetching,
isError,
isSuccess,
isUninitialized,
}) {
return {
data: data ?? 1,
isLoading,
isFetching,
isError,
isSuccess,
isUninitialized,
}
},
})
expectExactType({
data: '' as string | number,
isUninitialized: false,
isLoading: true,
isFetching: true,
isSuccess: false,
isError: false,
})(result)
expectType<ReturnType<ReturnType<typeof api.endpoints.test.select>>>(
await refetch()
)
})
test('useMutation union', () => {
const [_trigger, result] = api.endpoints.mutation.useMutation()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isLoading) {
expectExactType(undefined as undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('useMutation (with selectFromResult)', () => {
const [_trigger, result] = api.endpoints.mutation.useMutation({
selectFromResult({
data,
isLoading,
isError,
isSuccess,
isUninitialized,
}) {
return {
data: data ?? 'hi',
isLoading,
isError,
isSuccess,
isUninitialized,
}
},
})
expectExactType({
data: '' as string,
isUninitialized: false,
isLoading: true,
isSuccess: false,
isError: false,
reset: () => {},
})(result)
})
test('useMutation TS4.1 union', () => {
const [_trigger, result] = api.useMutationMutation()
if (result.isUninitialized) {
expectExactType(undefined)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isLoading) {
expectExactType(undefined as undefined)(result.data)
expectExactType(
undefined as SerializedError | FetchBaseQueryError | undefined
)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isError)
expectExactType(false as false)(result.isSuccess)
}
if (result.isError) {
expectExactType('' as string | undefined)(result.data)
expectExactType({} as SerializedError | FetchBaseQueryError)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isSuccess)
}
if (result.isSuccess) {
expectExactType('' as string)(result.data)
expectExactType(undefined)(result.error)
expectExactType(false as false)(result.isUninitialized)
expectExactType(false as false)(result.isLoading)
expectExactType(false as false)(result.isError)
}
// @ts-expect-error
expectType<never>(result)
// is always one of those four
if (
!result.isUninitialized &&
!result.isLoading &&
!result.isError &&
!result.isSuccess
) {
expectType<never>(result)
}
})
test('"Typed" helper types', () => {
// useQuery
{
const result = api.endpoints.test.useQuery()
expectType<TypedUseQueryHookResult<string, void, typeof baseQuery>>(
result
)
}
// useQuery with selectFromResult
{
const result = api.endpoints.test.useQuery(undefined, {
selectFromResult: () => ({ x: true }),
})
expectType<
TypedUseQueryHookResult<string, void, typeof baseQuery, { x: boolean }>
>(result)
}
// useQueryState
{
const result = api.endpoints.test.useQueryState()
expectType<TypedUseQueryStateResult<string, void, typeof baseQuery>>(
result
)
}
// useQueryState with selectFromResult
{
const result = api.endpoints.test.useQueryState(undefined, {
selectFromResult: () => ({ x: true }),
})
expectType<
TypedUseQueryStateResult<string, void, typeof baseQuery, { x: boolean }>
>(result)
}
// useQuerySubscription
{
const result = api.endpoints.test.useQuerySubscription()
expectType<
TypedUseQuerySubscriptionResult<string, void, typeof baseQuery>
>(result)
}
// useMutation
{
const [trigger, result] = api.endpoints.mutation.useMutation()
expectType<TypedUseMutationResult<string, void, typeof baseQuery>>(result)
}
})
})

View File

@@ -0,0 +1,357 @@
import { createApi } from '@reduxjs/toolkit/query/react'
import { setupApiStore, waitMs } from './helpers'
import React from 'react'
import {
render,
screen,
getByTestId,
waitFor,
act,
} from '@testing-library/react'
describe('fixedCacheKey', () => {
const api = createApi({
async baseQuery(arg: string | Promise<string>) {
return { data: await arg }
},
endpoints: (build) => ({
send: build.mutation<string, string | Promise<string>>({
query: (arg) => arg,
}),
}),
})
const storeRef = setupApiStore(api)
function Component({
name,
fixedCacheKey,
value = name,
}: {
name: string
fixedCacheKey?: string
value?: string | Promise<string>
}) {
const [trigger, result] = api.endpoints.send.useMutation({ fixedCacheKey })
return (
<div data-testid={name}>
<div data-testid="status">{result.status}</div>
<div data-testid="data">{result.data}</div>
<div data-testid="originalArgs">{String(result.originalArgs)}</div>
<button data-testid="trigger" onClick={() => trigger(value)}>
trigger
</button>
<button data-testid="reset" onClick={result.reset}>
reset
</button>
</div>
)
}
test('two mutations without `fixedCacheKey` do not influence each other', async () => {
render(
<>
<Component name="C1" />
<Component name="C2" />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
)
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
})
test('two mutations with the same `fixedCacheKey` do influence each other', async () => {
render(
<>
<Component name="C1" fixedCacheKey="test" />
<Component name="C2" fixedCacheKey="test" />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() => {
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c2, 'data').textContent).toBe('C1')
})
// test reset from the other component
act(() => {
getByTestId(c2, 'reset').click()
})
await waitFor(() => {
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c1, 'data').textContent).toBe('')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'data').textContent).toBe('')
})
})
test('resetting from the component that triggered the mutation resets for each shared result', async () => {
render(
<>
<Component name="C1" fixedCacheKey="test-A" />
<Component name="C2" fixedCacheKey="test-A" />
<Component name="C3" fixedCacheKey="test-B" />
<Component name="C4" fixedCacheKey="test-B" />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
const c3 = screen.getByTestId('C3')
const c4 = screen.getByTestId('C4')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c3, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c4, 'status').textContent).toBe('uninitialized')
// trigger with a component using the first cache key
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
)
// the components with the first cache key should be affected
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c2, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
// the components with the second cache key should be unaffected
expect(getByTestId(c3, 'data').textContent).toBe('')
expect(getByTestId(c3, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c4, 'data').textContent).toBe('')
expect(getByTestId(c4, 'status').textContent).toBe('uninitialized')
// trigger with a component using the second cache key
act(() => {
getByTestId(c3, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c3, 'status').textContent).toBe('fulfilled')
)
// the components with the first cache key should be unaffected
await waitFor(() => {
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c2, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
// the component with the second cache key should be affected
expect(getByTestId(c3, 'data').textContent).toBe('C3')
expect(getByTestId(c3, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c4, 'data').textContent).toBe('C3')
expect(getByTestId(c4, 'status').textContent).toBe('fulfilled')
})
// test reset from the component that triggered the mutation for the first cache key
act(() => {
getByTestId(c1, 'reset').click()
})
await waitFor(() => {
// the components with the first cache key should be affected
expect(getByTestId(c1, 'data').textContent).toBe('')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'data').textContent).toBe('')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
// the components with the second cache key should be unaffected
expect(getByTestId(c3, 'data').textContent).toBe('C3')
expect(getByTestId(c3, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c4, 'data').textContent).toBe('C3')
expect(getByTestId(c4, 'status').textContent).toBe('fulfilled')
})
})
test('two mutations with different `fixedCacheKey` do not influence each other', async () => {
render(
<>
<Component name="C1" fixedCacheKey="test" />
<Component name="C2" fixedCacheKey="toast" />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
)
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
})
test('unmounting and remounting keeps data intact', async () => {
const { rerender } = render(<Component name="C1" fixedCacheKey="test" />, {
wrapper: storeRef.wrapper,
})
let c1 = screen.getByTestId('C1')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
)
expect(getByTestId(c1, 'data').textContent).toBe('C1')
rerender(<div />)
expect(screen.queryByTestId('C1')).toBe(null)
rerender(<Component name="C1" fixedCacheKey="test" />)
c1 = screen.getByTestId('C1')
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c1, 'data').textContent).toBe('C1')
})
test('(limitation) mutations using `fixedCacheKey` do not return `originalArgs`', async () => {
render(
<>
<Component name="C1" fixedCacheKey="test" />
<Component name="C2" fixedCacheKey="test" />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
act(() => {
getByTestId(c1, 'trigger').click()
})
await waitFor(() =>
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
)
expect(getByTestId(c1, 'data').textContent).toBe('C1')
expect(getByTestId(c2, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c2, 'data').textContent).toBe('C1')
})
test('a component without `fixedCacheKey` has `originalArgs`', async () => {
render(<Component name="C1" />, {
wrapper: storeRef.wrapper,
})
let c1 = screen.getByTestId('C1')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c1, 'originalArgs').textContent).toBe('undefined')
await act(async () => {
getByTestId(c1, 'trigger').click()
await Promise.resolve()
})
expect(getByTestId(c1, 'originalArgs').textContent).toBe('C1')
})
test('a component with `fixedCacheKey` does never have `originalArgs`', async () => {
render(<Component name="C1" fixedCacheKey="test" />, {
wrapper: storeRef.wrapper,
})
let c1 = screen.getByTestId('C1')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c1, 'originalArgs').textContent).toBe('undefined')
await act(async () => {
getByTestId(c1, 'trigger').click()
})
expect(getByTestId(c1, 'originalArgs').textContent).toBe('undefined')
})
test('using `fixedCacheKey` will always use the latest dispatched thunk, prevent races', async () => {
let resolve1: (str: string) => void, resolve2: (str: string) => void
const p1 = new Promise<string>((resolve) => {
resolve1 = resolve
})
const p2 = new Promise<string>((resolve) => {
resolve2 = resolve
})
render(
<>
<Component name="C1" fixedCacheKey="test" value={p1} />
<Component name="C2" fixedCacheKey="test" value={p2} />
</>,
{ wrapper: storeRef.wrapper }
)
const c1 = screen.getByTestId('C1')
const c2 = screen.getByTestId('C2')
expect(getByTestId(c1, 'status').textContent).toBe('uninitialized')
expect(getByTestId(c2, 'status').textContent).toBe('uninitialized')
await act(async () => {
getByTestId(c1, 'trigger').click()
await Promise.resolve()
})
expect(getByTestId(c1, 'status').textContent).toBe('pending')
expect(getByTestId(c1, 'data').textContent).toBe('')
act(() => {
getByTestId(c2, 'trigger').click()
})
expect(getByTestId(c1, 'status').textContent).toBe('pending')
expect(getByTestId(c1, 'data').textContent).toBe('')
await act(async () => {
resolve1!('this should not show up any more')
await Promise.resolve()
})
await waitMs()
expect(getByTestId(c1, 'status').textContent).toBe('pending')
expect(getByTestId(c1, 'data').textContent).toBe('')
await act(async () => {
resolve2!('this should be visible')
await Promise.resolve()
})
await waitMs()
expect(getByTestId(c1, 'status').textContent).toBe('fulfilled')
expect(getByTestId(c1, 'data').textContent).toBe('this should be visible')
})
})

View File

@@ -0,0 +1,108 @@
import {
isOnline,
isDocumentVisible,
flatten,
joinUrls,
} from '@internal/query/utils'
afterAll(() => {
jest.restoreAllMocks()
})
describe('isOnline', () => {
test('Assumes online=true in a node env', () => {
jest
.spyOn(window, 'navigator', 'get')
.mockImplementation(() => undefined as any)
expect(navigator).toBeUndefined()
expect(isOnline()).toBe(true)
})
test('Returns false if navigator isOnline=false', () => {
jest
.spyOn(window, 'navigator', 'get')
.mockImplementation(() => ({ onLine: false } as any))
expect(isOnline()).toBe(false)
})
test('Returns true if navigator isOnline=true', () => {
jest
.spyOn(window, 'navigator', 'get')
.mockImplementation(() => ({ onLine: true } as any))
expect(isOnline()).toBe(true)
})
})
describe('isDocumentVisible', () => {
test('Assumes true when in a non-browser env', () => {
jest
.spyOn(window, 'document', 'get')
.mockImplementation(() => undefined as any)
expect(window.document).toBeUndefined()
expect(isDocumentVisible()).toBe(true)
})
test('Returns false when hidden=true', () => {
jest
.spyOn(window, 'document', 'get')
.mockImplementation(() => ({ visibilityState: 'hidden' } as any))
expect(isDocumentVisible()).toBe(false)
})
test('Returns true when visibilityState=prerender', () => {
jest
.spyOn(window, 'document', 'get')
.mockImplementation(() => ({ visibilityState: 'prerender' } as any))
expect(document.visibilityState).toBe('prerender')
expect(isDocumentVisible()).toBe(true)
})
test('Returns true when visibilityState=visible', () => {
jest
.spyOn(window, 'document', 'get')
.mockImplementation(() => ({ visibilityState: 'visible' } as any))
expect(document.visibilityState).toBe('visible')
expect(isDocumentVisible()).toBe(true)
})
test('Returns true when visibilityState=undefined', () => {
jest
.spyOn(window, 'document', 'get')
.mockImplementation(() => ({ visibilityState: undefined } as any))
expect(document.visibilityState).toBeUndefined()
expect(isDocumentVisible()).toBe(true)
})
})
describe('joinUrls', () => {
test.each([
['/api/', '/banana', '/api/banana'],
['/api/', 'banana', '/api/banana'],
['/api', '/banana', '/api/banana'],
['/api', 'banana', '/api/banana'],
['', '/banana', '/banana'],
['', 'banana', 'banana'],
['api', '?a=1', 'api?a=1'],
['api/', '?a=1', 'api/?a=1'],
['api', 'banana?a=1', 'api/banana?a=1'],
['api/', 'banana?a=1', 'api/banana?a=1'],
['https://example.com/api', 'banana', 'https://example.com/api/banana'],
['https://example.com/api', '/banana', 'https://example.com/api/banana'],
['https://example.com/api/', 'banana', 'https://example.com/api/banana'],
['https://example.com/api/', '/banana', 'https://example.com/api/banana'],
['https://example.com/api/', 'https://example.org', 'https://example.org'],
['https://example.com/api/', '//example.org', '//example.org'],
])('%s and %s join to %s', (base, url, expected) => {
expect(joinUrls(base, url)).toBe(expected)
})
})
describe('flatten', () => {
test('flattens an array to a depth of 1', () => {
expect(flatten([1, 2, [3, 4]])).toEqual([1, 2, 3, 4])
})
test('does not flatten to a depth of 2', () => {
const flattenResult = flatten([1, 2, [3, 4, [5, 6]]])
expect(flattenResult).not.toEqual([1, 2, 3, 4, 5, 6])
expect(flattenResult).toEqual([1, 2, 3, 4, [5, 6]])
})
})

View File

@@ -0,0 +1,51 @@
export type Id<T> = { [K in keyof T]: T[K] } & {}
export type WithRequiredProp<T, K extends keyof T> = Omit<T, K> &
Required<Pick<T, K>>
export type Override<T1, T2> = T2 extends any ? Omit<T1, keyof T2> & T2 : never
export function assertCast<T>(v: any): asserts v is T {}
export function safeAssign<T extends object>(
target: T,
...args: Array<Partial<NoInfer<T>>>
) {
Object.assign(target, ...args)
}
/**
* Convert a Union type `(A|B)` to an intersection type `(A&B)`
*/
export type UnionToIntersection<U> = (
U extends any ? (k: U) => void : never
) extends (k: infer I) => void
? I
: never
export type NonOptionalKeys<T> = {
[K in keyof T]-?: undefined extends T[K] ? never : K
}[keyof T]
export type HasRequiredProps<T, True, False> = NonOptionalKeys<T> extends never
? False
: True
export type OptionalIfAllPropsOptional<T> = HasRequiredProps<T, T, T | never>
export type NoInfer<T> = [T][T extends any ? 0 : never]
export type NonUndefined<T> = T extends undefined ? never : T
export type UnwrapPromise<T> = T extends PromiseLike<infer V> ? V : T
export type MaybePromise<T> = T | PromiseLike<T>
export type OmitFromUnion<T, K extends keyof T> = T extends any
? Omit<T, K>
: never
export type IsAny<T, True, False = never> = true | false extends (
T extends never ? true : false
)
? True
: False
export type CastAny<T, CastTo> = IsAny<T, CastTo, T>

View File

@@ -0,0 +1,3 @@
export function capitalize(str: string) {
return str.replace(str[0], str[0].toUpperCase())
}

View File

@@ -0,0 +1,27 @@
import { isPlainObject as _iPO } from '@reduxjs/toolkit'
// remove type guard
const isPlainObject: (_: any) => boolean = _iPO
export function copyWithStructuralSharing<T>(oldObj: any, newObj: T): T
export function copyWithStructuralSharing(oldObj: any, newObj: any): any {
if (
oldObj === newObj ||
!(
(isPlainObject(oldObj) && isPlainObject(newObj)) ||
(Array.isArray(oldObj) && Array.isArray(newObj))
)
) {
return newObj
}
const newKeys = Object.keys(newObj)
const oldKeys = Object.keys(oldObj)
let isSameObject = newKeys.length === oldKeys.length
const mergeObj: any = Array.isArray(newObj) ? [] : {}
for (const key of newKeys) {
mergeObj[key] = copyWithStructuralSharing(oldObj[key], newObj[key])
if (isSameObject) isSameObject = oldObj[key] === mergeObj[key]
}
return isSameObject ? oldObj : mergeObj
}

View File

@@ -0,0 +1,6 @@
/**
* Alternative to `Array.flat(1)`
* @param arr An array like [1,2,3,[1,2]]
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
*/
export const flatten = (arr: readonly any[]) => [].concat(...arr)

View File

@@ -0,0 +1,8 @@
export * from './isAbsoluteUrl'
export * from './isValidUrl'
export * from './joinUrls'
export * from './flatten'
export * from './capitalize'
export * from './isOnline'
export * from './isDocumentVisible'
export * from './copyWithStructuralSharing'

View File

@@ -0,0 +1,9 @@
/**
* If either :// or // is present consider it to be an absolute url
*
* @param url string
*/
export function isAbsoluteUrl(url: string) {
return new RegExp(`(^|:)//`).test(url)
}

View File

@@ -0,0 +1,12 @@
/**
* Assumes true for a non-browser env, otherwise makes a best effort
* @link https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
*/
export function isDocumentVisible(): boolean {
// `document` may not exist in non-browser envs (like RN)
if (typeof document === 'undefined') {
return true
}
// Match true for visible, prerender, undefined
return document.visibilityState !== 'hidden'
}

View File

@@ -0,0 +1,3 @@
export function isNotNullish<T>(v: T | null | undefined): v is T {
return v != null
}

View File

@@ -0,0 +1,12 @@
/**
* Assumes a browser is online if `undefined`, otherwise makes a best effort
* @link https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
*/
export function isOnline() {
// We set the default config value in the store, so we'd need to check for this in a SSR env
return typeof navigator === 'undefined'
? true
: navigator.onLine === undefined
? true
: navigator.onLine
}

View File

@@ -0,0 +1,9 @@
export function isValidUrl(string: string) {
try {
new URL(string)
} catch (_) {
return false
}
return true
}

View File

@@ -0,0 +1,26 @@
import { isAbsoluteUrl } from './isAbsoluteUrl'
const withoutTrailingSlash = (url: string) => url.replace(/\/$/, '')
const withoutLeadingSlash = (url: string) => url.replace(/^\//, '')
export function joinUrls(
base: string | undefined,
url: string | undefined
): string {
if (!base) {
return url!
}
if (!url) {
return base
}
if (isAbsoluteUrl(url)) {
return url
}
const delimiter = base.endsWith('/') || !url.startsWith('?') ? '/' : ''
base = withoutTrailingSlash(base)
url = withoutLeadingSlash(url)
return `${base}${delimiter}${url}`;
}