@depup/reduxjs__toolkit 2.12.0-depup.28

package/src/query/core/buildMiddleware/batchActions.ts

@@ -0,0 +1,207 @@
+import type { InternalHandlerBuilder, SubscriptionSelectors } from './types'
+import type { SubscriptionInternalState, SubscriptionState } from '../apiState'
+import { produceWithPatches } from '../../utils/immerImports'
+import type { Action } from '@reduxjs/toolkit'
+import { getOrInsertComputed, createNewMap } from '../../utils/getOrInsert'
+
+export const buildBatchedActionsHandler: InternalHandlerBuilder<
+  [actionShouldContinue: boolean, returnValue: SubscriptionSelectors | boolean]
+> = ({ api, queryThunk, internalState, mwApi }) => {
+  const subscriptionsPrefix = `${api.reducerPath}/subscriptions`
+
+  let previousSubscriptions: SubscriptionState =
+    null as unknown as SubscriptionState
+
+  let updateSyncTimer: ReturnType<typeof window.setTimeout> | null = null
+
+  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 = (
+    currentSubscriptions: SubscriptionInternalState,
+    action: Action,
+  ) => {
+    if (updateSubscriptionOptions.match(action)) {
+      const { queryCacheKey, requestId, options } = action.payload
+
+      const sub = currentSubscriptions.get(queryCacheKey)
+      if (sub?.has(requestId)) {
+        sub.set(requestId, options)
+      }
+      return true
+    }
+    if (unsubscribeQueryResult.match(action)) {
+      const { queryCacheKey, requestId } = action.payload
+      const sub = currentSubscriptions.get(queryCacheKey)
+      if (sub) {
+        sub.delete(requestId)
+      }
+      return true
+    }
+    if (api.internalActions.removeQueryResult.match(action)) {
+      currentSubscriptions.delete(action.payload.queryCacheKey)
+      return true
+    }
+    if (queryThunk.pending.match(action)) {
+      const {
+        meta: { arg, requestId },
+      } = action
+      const substate = getOrInsertComputed(
+        currentSubscriptions,
+        arg.queryCacheKey,
+        createNewMap,
+      )
+      if (arg.subscribe) {
+        substate.set(
+          requestId,
+          arg.subscriptionOptions ?? substate.get(requestId) ?? {},
+        )
+      }
+      return true
+    }
+    let mutated = false
+
+    if (queryThunk.rejected.match(action)) {
+      const {
+        meta: { condition, arg, requestId },
+      } = action
+      if (condition && arg.subscribe) {
+        const substate = getOrInsertComputed(
+          currentSubscriptions,
+          arg.queryCacheKey,
+          createNewMap,
+        )
+        substate.set(
+          requestId,
+          arg.subscriptionOptions ?? substate.get(requestId) ?? {},
+        )
+
+        mutated = true
+      }
+    }
+
+    return mutated
+  }
+
+  const getSubscriptions = () => internalState.currentSubscriptions
+  const getSubscriptionCount = (queryCacheKey: string) => {
+    const subscriptions = getSubscriptions()
+    const subscriptionsForQueryArg = subscriptions.get(queryCacheKey)
+    return subscriptionsForQueryArg?.size ?? 0
+  }
+  const isRequestSubscribed = (queryCacheKey: string, requestId: string) => {
+    const subscriptions = getSubscriptions()
+    return !!subscriptions?.get(queryCacheKey)?.get(requestId)
+  }
+
+  const subscriptionSelectors: SubscriptionSelectors = {
+    getSubscriptions,
+    getSubscriptionCount,
+    isRequestSubscribed,
+  }
+
+  function serializeSubscriptions(
+    currentSubscriptions: SubscriptionInternalState,
+  ): SubscriptionState {
+    // We now use nested Maps for subscriptions, instead of
+    // plain Records. Stringify this accordingly so we can
+    // convert it to the shape we need for the store.
+    return JSON.parse(
+      JSON.stringify(
+        Object.fromEntries(
+          [...currentSubscriptions].map(([k, v]) => [k, Object.fromEntries(v)]),
+        ),
+      ),
+    )
+  }
+
+  return (
+    action,
+    mwApi,
+  ): [
+    actionShouldContinue: boolean,
+    result: SubscriptionSelectors | boolean,
+  ] => {
+    if (!previousSubscriptions) {
+      // Initialize it the first time this handler runs
+      previousSubscriptions = serializeSubscriptions(
+        internalState.currentSubscriptions,
+      )
+    }
+
+    if (api.util.resetApiState.match(action)) {
+      previousSubscriptions = {}
+      internalState.currentSubscriptions.clear()
+      updateSyncTimer = null
+      return [true, false]
+    }
+
+    // Intercept requests by hooks to see if they're subscribed
+    // We return the internal state reference so that hooks
+    // can do their own checks to see if they're still active.
+    // It's stupid and hacky, but it does cut down on some dispatch calls.
+    if (api.internalActions.internal_getRTKQSubscriptions.match(action)) {
+      return [false, subscriptionSelectors]
+    }
+
+    // Update subscription data based on this action
+    const didMutate = actuallyMutateSubscriptions(
+      internalState.currentSubscriptions,
+      action,
+    )
+
+    let actionShouldContinue = true
+
+    // HACK Sneak the test-only polling state back out
+    if (
+      process.env.NODE_ENV === 'test' &&
+      typeof action.type === 'string' &&
+      action.type === `${api.reducerPath}/getPolling`
+    ) {
+      return [false, internalState.currentPolls] as any
+    }
+
+    if (didMutate) {
+      if (!updateSyncTimer) {
+        // We only use the subscription state for the Redux DevTools at this point,
+        // as the real data is kept here in the middleware.
+        // Given that, we can throttle synchronizing this state significantly to
+        // save on overall perf.
+        // In 1.9, it was updated in a microtask, but now we do it at most every 500ms.
+        updateSyncTimer = setTimeout(() => {
+          // Deep clone the current subscription data
+          const newSubscriptions: SubscriptionState = serializeSubscriptions(
+            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
+          updateSyncTimer = null
+        }, 500)
+      }
+
+      const isSubscriptionSliceAction =
+        typeof action.type == 'string' &&
+        !!action.type.startsWith(subscriptionsPrefix)
+
+      const isAdditionalSubscriptionAction =
+        queryThunk.rejected.match(action) &&
+        action.meta.condition &&
+        !!action.meta.arg.subscribe
+
+      actionShouldContinue =
+        !isSubscriptionSliceAction && !isAdditionalSubscriptionAction
+    }
+
+    return [actionShouldContinue, false]
+  }
+}

package/src/query/core/buildMiddleware/cacheCollection.ts

@@ -0,0 +1,204 @@
+import { getEndpointDefinition } from '@internal/query/apiTypes'
+import type { QueryDefinition } from '../../endpointDefinitions'
+import type { ConfigState, QueryCacheKey, QuerySubState } from '../apiState'
+import { isAnyOf } from '../rtkImports'
+import type {
+  ApiMiddlewareInternalHandler,
+  InternalHandlerBuilder,
+  QueryStateMeta,
+  SubMiddlewareApi,
+  TimeoutId,
+} from './types'
+
+export type ReferenceCacheCollection = never
+
+/**
+ * @example
+ * ```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
+ *     })
+ *   })
+ * })
+ * ```
+ */
+export type CacheCollectionQueryExtraOptions = {
+  /**
+   * 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,
+  queryThunk,
+  context,
+  internalState,
+  selectors: { selectQueryEntry, selectConfig },
+  getRunningQueryThunk,
+  mwApi,
+}) => {
+  const { removeQueryResult, unsubscribeQueryResult, cacheEntriesUpserted } =
+    api.internalActions
+
+  const canTriggerUnsubscribe = isAnyOf(
+    unsubscribeQueryResult.match,
+    queryThunk.fulfilled,
+    queryThunk.rejected,
+    cacheEntriesUpserted.match,
+  )
+
+  function anySubscriptionsRemainingForKey(queryCacheKey: string) {
+    const subscriptions = internalState.currentSubscriptions.get(queryCacheKey)
+    if (!subscriptions) {
+      return false
+    }
+
+    const hasSubscriptions = subscriptions.size > 0
+    return hasSubscriptions
+  }
+
+  const currentRemovalTimeouts: QueryStateMeta<TimeoutId> = {}
+
+  function abortAllPromises<T extends { abort?: () => void }>(
+    promiseMap: Map<string, T | undefined>,
+  ): void {
+    for (const promise of promiseMap.values()) {
+      promise?.abort?.()
+    }
+  }
+
+  const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
+    const state = mwApi.getState()
+    const config = selectConfig(state)
+
+    if (canTriggerUnsubscribe(action)) {
+      let queryCacheKeys: QueryCacheKey[]
+
+      if (cacheEntriesUpserted.match(action)) {
+        queryCacheKeys = action.payload.map(
+          (entry) => entry.queryDescription.queryCacheKey,
+        )
+      } else {
+        const { queryCacheKey } = unsubscribeQueryResult.match(action)
+          ? action.payload
+          : action.meta.arg
+        queryCacheKeys = [queryCacheKey]
+      }
+
+      handleUnsubscribeMany(queryCacheKeys, mwApi, config)
+    }
+
+    if (api.util.resetApiState.match(action)) {
+      for (const [key, timeout] of Object.entries(currentRemovalTimeouts)) {
+        if (timeout) clearTimeout(timeout)
+        delete currentRemovalTimeouts[key]
+      }
+
+      abortAllPromises(internalState.runningQueries)
+      abortAllPromises(internalState.runningMutations)
+    }
+
+    if (context.hasRehydrationInfo(action)) {
+      const { queries } = context.extractRehydrationInfo(action)!
+      // Gotcha:
+      // If rehydrating before the endpoint has been injected,the global `keepUnusedDataFor`
+      // will be used instead of the endpoint-specific one.
+      handleUnsubscribeMany(
+        Object.keys(queries) as QueryCacheKey[],
+        mwApi,
+        config,
+      )
+    }
+  }
+
+  function handleUnsubscribeMany(
+    cacheKeys: QueryCacheKey[],
+    api: SubMiddlewareApi,
+    config: ConfigState<string>,
+  ) {
+    const state = api.getState()
+    for (const queryCacheKey of cacheKeys) {
+      const entry = selectQueryEntry(state, queryCacheKey)
+      if (entry?.endpointName) {
+        handleUnsubscribe(queryCacheKey, entry.endpointName, api, config)
+      }
+    }
+  }
+
+  function handleUnsubscribe(
+    queryCacheKey: QueryCacheKey,
+    endpointName: string,
+    api: SubMiddlewareApi,
+    config: ConfigState<string>,
+  ) {
+    const endpointDefinition = getEndpointDefinition(
+      context,
+      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)) {
+          // Try to abort any running query for this cache key
+          const entry = selectQueryEntry(api.getState(), queryCacheKey)
+
+          if (entry?.endpointName) {
+            const runningQuery = api.dispatch(
+              getRunningQueryThunk(entry.endpointName, entry.originalArgs),
+            )
+            runningQuery?.abort()
+          }
+          api.dispatch(removeQueryResult({ queryCacheKey }))
+        }
+        delete currentRemovalTimeouts![queryCacheKey]
+      }, finalKeepUnusedDataFor * 1000)
+    }
+  }
+
+  return handler
+}