Lazy react hook module concept

packages/toolkit/src/query/apiTypes.ts

@@ -28,6 +28,16 @@ export interface ApiModules<
 
 export type ModuleName = keyof ApiModules<any, any, any, any>
 
+export type DefaultedOptions =
+  | 'reducerPath'
+  | 'serializeQueryArgs'
+  | 'keepUnusedDataFor'
+  | 'refetchOnMountOrArgChange'
+  | 'refetchOnFocus'
+  | 'refetchOnReconnect'
+  | 'invalidationBehavior'
+  | 'tagTypes'
+
 export type Module<Name extends ModuleName> = {
   name: Name
   init<
@@ -39,14 +49,7 @@ export type Module<Name extends ModuleName> = {
     api: Api<BaseQuery, EndpointDefinitions, ReducerPath, TagTypes, ModuleName>,
     options: WithRequiredProp<
       CreateApiOptions<BaseQuery, Definitions, ReducerPath, TagTypes>,
-      | 'reducerPath'
-      | 'serializeQueryArgs'
-      | 'keepUnusedDataFor'
-      | 'refetchOnMountOrArgChange'
-      | 'refetchOnFocus'
-      | 'refetchOnReconnect'
-      | 'invalidationBehavior'
-      | 'tagTypes'
+      DefaultedOptions
     >,
     context: ApiContext<Definitions>,
   ): {
@@ -117,4 +120,11 @@ export type Api<
     TagTypes | NewTagTypes,
     Enhancers
   >
+  internal: {
+    options: WithRequiredProp<
+      CreateApiOptions<any, any, any, any>,
+      DefaultedOptions
+    >
+    endpoints: Definitions
+  }
 }

packages/toolkit/src/query/createApi.ts

@@ -1,4 +1,10 @@
-import type { Api, ApiContext, Module, ModuleName } from './apiTypes'
+import type {
+  Api,
+  ApiContext,
+  DefaultedOptions,
+  Module,
+  ModuleName,
+} from './apiTypes'
 import type { CombinedState } from './core/apiState'
 import type { BaseQueryArg, BaseQueryFn } from './baseQueryTypes'
 import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
@@ -10,7 +16,7 @@ import type {
 import { DefinitionType, isQueryDefinition } from './endpointDefinitions'
 import { nanoid } from './core/rtkImports'
 import type { UnknownAction } from '@reduxjs/toolkit'
-import type { NoInfer } from './tsHelpers'
+import type { NoInfer, WithRequiredProp } from './tsHelpers'
 import { weakMapMemoize } from 'reselect'
 
 export interface CreateApiOptions<
@@ -259,7 +265,10 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
       }),
     )
 
-    const optionsWithDefaults: CreateApiOptions<any, any, any, any> = {
+    const optionsWithDefaults: WithRequiredProp<
+      CreateApiOptions<any, any, any, any>,
+      DefaultedOptions
+    > = {
       reducerPath: 'api',
       keepUnusedDataFor: 60,
       refetchOnMountOrArgChange: false,
@@ -335,10 +344,14 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
         }
         return api
       },
+      internal: {
+        options: optionsWithDefaults,
+        endpoints: context.endpointDefinitions,
+      },
     } as Api<BaseQueryFn, {}, string, string, Modules[number]['name']>
 
     const initializedModules = modules.map((m) =>
-      m.init(api as any, optionsWithDefaults as any, context),
+      m.init(api as any, optionsWithDefaults, context),
     )
 
     function injectEndpoints(

packages/toolkit/src/query/react/buildHooks.ts

@@ -579,12 +579,12 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     createSelector,
   },
   serializeQueryArgs,
-  context,
+  endpointDefinitions,
 }: {
   api: Api<any, Definitions, any, any, CoreModule>
   moduleOptions: Required<ReactHooksModuleOptions>
   serializeQueryArgs: SerializeQueryArgs<any>
-  context: ApiContext<Definitions>
+  endpointDefinitions: Definitions
 }) {
   const usePossiblyImmediateEffect: (
     effect: () => void | undefined,
@@ -603,7 +603,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     // in this case, reset the hook
     if (lastResult?.endpointName && currentState.isUninitialized) {
       const { endpointName } = lastResult
-      const endpointDefinition = context.endpointDefinitions[endpointName]
+      const endpointDefinition = endpointDefinitions[endpointName]
       if (
         serializeQueryArgs({
           queryArgs: lastResult.originalArgs,
@@ -707,7 +707,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         // with a case where the query args did change but the serialization doesn't,
         // and then we never try to initiate a refetch.
         defaultSerializeQueryArgs,
-        context.endpointDefinitions[name],
+        endpointDefinitions[name],
         name,
       )
       const stableSubscriptionOptions = useShallowStableValue({
@@ -898,7 +898,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       const stableArg = useStableQueryArgs(
         skip ? skipToken : arg,
         serializeQueryArgs,
-        context.endpointDefinitions[name],
+        endpointDefinitions[name],
         name,
       )
 

packages/toolkit/src/query/react/index.ts

@@ -3,7 +3,11 @@
 import { formatProdErrorMessage } from '@reduxjs/toolkit'
 
 import { buildCreateApi, coreModule } from '@reduxjs/toolkit/query'
-import { reactHooksModule, reactHooksModuleName } from './module'
+import {
+  reactHooksModule,
+  reactHooksModuleName,
+  buildHooksForApi,
+} from './module'
 
 export * from '@reduxjs/toolkit/query'
 export { ApiProvider } from './ApiProvider'
@@ -19,4 +23,4 @@ export type {
   TypedUseQueryStateResult,
   TypedUseQuerySubscriptionResult,
 } from './buildHooks'
-export { createApi, reactHooksModule, reactHooksModuleName }
+export { createApi, reactHooksModule, reactHooksModuleName, buildHooksForApi }

packages/toolkit/src/query/react/module.ts

@@ -1,5 +1,6 @@
 import type {
   Api,
+  ApiModules,
   BaseQueryFn,
   EndpointDefinitions,
   Module,
@@ -119,6 +120,58 @@ export interface ReactHooksModuleOptions {
   createSelector?: typeof _createSelector
 }
 
+function buildInjectEndpoint(
+  target: Omit<
+    ApiModules<any, Record<string, any>, any, any>[ReactHooksModule],
+    'usePrefetch'
+  >,
+  {
+    buildMutationHook,
+    buildQueryHooks,
+  }: Pick<
+    ReturnType<typeof buildHooks>,
+    'buildQueryHooks' | 'buildMutationHook'
+  >,
+): ReturnType<Module<ReactHooksModule>['init']>['injectEndpoint'] {
+  return function injectEndpoint(endpointName, definition) {
+    if (isQueryDefinition(definition)) {
+      const {
+        useQuery,
+        useLazyQuery,
+        useLazyQuerySubscription,
+        useQueryState,
+        useQuerySubscription,
+      } = buildQueryHooks(endpointName)
+      safeAssign(target.endpoints[endpointName], {
+        useQuery,
+        useLazyQuery,
+        useLazyQuerySubscription,
+        useQueryState,
+        useQuerySubscription,
+      })
+      ;(target as any)[`use${capitalize(endpointName)}Query`] = useQuery
+      ;(target as any)[`useLazy${capitalize(endpointName)}Query`] = useLazyQuery
+    } else if (isMutationDefinition(definition)) {
+      const useMutation = buildMutationHook(endpointName)
+      safeAssign(target.endpoints[endpointName], {
+        useMutation,
+      })
+      ;(target as any)[`use${capitalize(endpointName)}Mutation`] = useMutation
+    }
+  }
+}
+
+const defaultOptions: Required<ReactHooksModuleOptions> = {
+  batch: rrBatch,
+  hooks: {
+    useDispatch: rrUseDispatch,
+    useSelector: rrUseSelector,
+    useStore: rrUseStore,
+  },
+  createSelector: _createSelector,
+  unstable__sideEffectsInRender: false,
+}
+
 /**
  * Creates a module that generates react hooks from endpoints, for use with `buildCreateApi`.
  *
@@ -139,17 +192,16 @@ export interface ReactHooksModuleOptions {
  *
  * @returns A module for use with `buildCreateApi`
  */
-export const reactHooksModule = ({
-  batch = rrBatch,
-  hooks = {
-    useDispatch: rrUseDispatch,
-    useSelector: rrUseSelector,
-    useStore: rrUseStore,
-  },
-  createSelector = _createSelector,
-  unstable__sideEffectsInRender = false,
-  ...rest
-}: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => {
+export const reactHooksModule = (
+  moduleOptions?: ReactHooksModuleOptions,
+): Module<ReactHooksModule> => {
+  const {
+    batch,
+    hooks,
+    createSelector,
+    unstable__sideEffectsInRender,
+    ...rest
+  } = { ...defaultOptions, ...moduleOptions }
   if (process.env.NODE_ENV !== 'production') {
     const hookNames = ['useDispatch', 'useSelector', 'useStore'] as const
     let warned = false
@@ -201,41 +253,71 @@ export const reactHooksModule = ({
           createSelector,
         },
         serializeQueryArgs,
-        context,
+        endpointDefinitions: context.endpointDefinitions,
       })
+
       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
-          }
-        },
+        injectEndpoint: buildInjectEndpoint(anyApi, {
+          buildMutationHook,
+          buildQueryHooks,
+        }),
       }
     },
   }
 }
+
+export const buildHooksForApi = <
+  BaseQuery extends BaseQueryFn,
+  Definitions extends EndpointDefinitions,
+  ReducerPath extends string,
+  TagTypes extends string,
+>(
+  api: Api<BaseQuery, Definitions, ReducerPath, TagTypes>,
+  options?: ReactHooksModuleOptions,
+): ApiModules<
+  BaseQuery,
+  Definitions,
+  ReducerPath,
+  TagTypes
+>[ReactHooksModule] => {
+  const { batch, hooks, unstable__sideEffectsInRender, createSelector } = {
+    ...defaultOptions,
+    ...options,
+  }
+
+  const { buildQueryHooks, buildMutationHook, usePrefetch } = buildHooks({
+    api,
+    moduleOptions: {
+      batch,
+      hooks,
+      unstable__sideEffectsInRender,
+      createSelector,
+    },
+    serializeQueryArgs: api.internal.options.serializeQueryArgs,
+    endpointDefinitions: api.internal.endpoints,
+  })
+
+  const result: {
+    endpoints: Record<string, QueryHooks<any> | MutationHooks<any>>
+    usePrefetch: typeof usePrefetch
+  } = {
+    endpoints: {},
+    usePrefetch,
+  }
+
+  const injectEndpoint = buildInjectEndpoint(result, {
+    buildMutationHook,
+    buildQueryHooks,
+  })
+
+  for (const [endpointName, definition] of Object.entries(
+    api.internal.endpoints,
+  )) {
+    result.endpoints[endpointName] = {} as any
+    injectEndpoint(endpointName, definition)
+  }
+  return result as any
+}