@ic-reactor/react 3.8.0 → 3.10.0

package/src/hooks/useActorMutation.ts

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from "react"
+import { useCallback } from "react"
 import {
   useMutation,
   UseMutationOptions,
@@ -35,7 +35,14 @@ export interface UseActorMutationParameters<
   reactor: Reactor<Service, Transform>
   functionName: Method
   callConfig?: CallConfig
-  invalidateQueries?: QueryKey[]
+  /**
+   * Queries to invalidate upon successful mutation.
+   *
+   * `undefined` entries are skipped, so the common
+   * `[maybeQuery?.getQueryKey()]` idiom is safe when the optional query object
+   * is absent.
+   */
+  invalidateQueries?: (QueryKey | undefined)[]
   /**
    * Callback for canister-level business logic errors.
    * Called when the canister returns a Result { Err: E } variant.
@@ -126,10 +133,18 @@ export const useActorMutation = <
       >
     ) => {
       if (invalidateQueries) {
+        // Skip undefined entries. React Query reads `{ queryKey: undefined }`
+        // as "match everything", so a single undefined — which the natural
+        // `invalidateQueries: [maybeQuery?.getQueryKey()]` idiom produces
+        // whenever the optional query object is absent — would invalidate every
+        // query in the client, including an app's unrelated non-canister ones.
+        // `createMutation.invalidateAll` already filters the same way.
         await Promise.all(
-          invalidateQueries.map((queryKey) =>
-            reactor.queryClient.invalidateQueries({ queryKey })
-          )
+          invalidateQueries
+            .filter((queryKey) => queryKey !== undefined)
+            .map((queryKey) =>
+              reactor.queryClient.invalidateQueries({ queryKey })
+            )
         )
       }
       await onSuccess?.(...params)
@@ -152,16 +167,24 @@ export const useActorMutation = <
     [onCanisterError, onError]
   )
 
-  const mutationOptions = useMemo(
-    () => ({
+  // Not memoized. The deps could only ever list the values destructured above,
+  // never the `options` rest bucket, so everything passed straight through —
+  // `onMutate`, `onSettled`, `retry`, `meta`, `gcTime` — was frozen at the first
+  // render: `useMutation` calls `observer.setOptions` from an effect keyed on
+  // the options identity, so a later render's closures never reached it. A
+  // component passing only `onSettled` would report the recipient selected at
+  // mount rather than at submit.
+  //
+  // `createMutation`'s own hook builds its options inline for the same reason.
+  // A fresh object per render costs nothing here: `setOptions` diffs the values
+  // rather than the reference.
+  return useMutation(
+    {
       ...options,
       mutationFn,
       onSuccess: handleSuccess,
       onError: handleError,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mutationFn, handleSuccess, handleError]
+    },
+    reactor.queryClient
   )
-
-  return useMutation(mutationOptions, reactor.queryClient)
 }

package/src/hooks/useActorQuery.ts

@@ -100,7 +100,17 @@ export const useActorQuery = <
         args,
         queryKey: defaultQueryKey,
       }),
-    [reactor, callConfig, functionName, args, defaultQueryKey]
+    // `canisterId` is mutable reactor state that `setCanisterId` can change,
+    // while `reactor` itself stays the same object — so it has to be a
+    // dependency in its own right or the key stays pinned to the old canister.
+    [
+      reactor,
+      reactor.canisterId?.toString(),
+      callConfig,
+      functionName,
+      args,
+      defaultQueryKey,
+    ]
   )
 
   return useQuery(

package/src/hooks/useActorSuspenseInfiniteQuery.ts

@@ -16,7 +16,7 @@ import {
   ReactorReturnErr,
 } from "@ic-reactor/core"
 import { CallConfig } from "@icp-sdk/core/agent"
-import { normalizeQueryData } from "../utils.js"
+import { mergeFactoryQueryKey, normalizeQueryData } from "../utils.js"
 
 /**
  * Parameters for useActorSuspenseInfiniteQuery hook.
@@ -129,8 +129,35 @@ export const useActorSuspenseInfiniteQuery = <
   // reactor/function identity. Using the custom key verbatim would cause cache
   // collisions if two different actors or methods share the same key string.
   const baseQueryKey = useMemo(
-    () => reactor.generateQueryKey({ functionName, queryKey }, callConfig),
-    [queryKey, reactor, functionName, callConfig]
+    () =>
+      reactor.generateQueryKey(
+        {
+          functionName,
+          // Fold the call arguments into the key. They live in the `getArgs`
+          // closure rather than in the config, so without this two hooks on the
+          // same method with different arguments share one cache entry and
+          // serve each other's pages.
+          queryKey: mergeFactoryQueryKey(
+            queryKey,
+            undefined,
+            getArgs(options.initialPageParam)
+          ),
+        },
+        callConfig
+      ),
+    [
+      queryKey,
+      reactor,
+      // `canisterId` is mutable reactor state that `setCanisterId` can change,
+      // while `reactor` itself stays the same object — so it has to be a
+      // dependency in its own right or the key stays pinned to the old canister
+      // while the queryFn already calls the new one.
+      reactor.canisterId?.toString(),
+      functionName,
+      callConfig,
+      getArgs,
+      options.initialPageParam,
+    ]
   )
 
   // Memoize queryFn to prevent recreation on every render

package/src/hooks/useActorSuspenseQuery.ts

@@ -104,7 +104,17 @@ export const useActorSuspenseQuery = <
         args,
         queryKey: defaultQueryKey,
       }),
-    [reactor, callConfig, functionName, args, defaultQueryKey]
+    // `canisterId` is mutable reactor state that `setCanisterId` can change,
+    // while `reactor` itself stays the same object — so it has to be a
+    // dependency in its own right or the key stays pinned to the old canister.
+    [
+      reactor,
+      reactor.canisterId?.toString(),
+      callConfig,
+      functionName,
+      args,
+      defaultQueryKey,
+    ]
   )
 
   return useSuspenseQuery(

package/src/types.ts

@@ -356,8 +356,14 @@ export interface MutationConfig<
   functionName: Method
   /** Call configuration for the actor method */
   callConfig?: CallConfig
-  /** Queries to invalidate upon successful mutation */
-  invalidateQueries?: QueryKey[]
+  /**
+   * Queries to invalidate upon successful mutation.
+   *
+   * `undefined` entries are skipped, so the common
+   * `[maybeQuery?.getQueryKey()]` idiom is safe when the optional query object
+   * is absent.
+   */
+  invalidateQueries?: (QueryKey | undefined)[]
   /**
    * Callback for canister-level business logic errors.
    * Called when the canister returns a Result { Err: E } variant.

package/src/utils.ts

@@ -46,20 +46,76 @@ export function mergeFactoryQueryKey(
 }
 
 /**
- * Build a chained select function that first applies the config-level select
- * (if any) and then the hook-level select (if any).
+ * Build a chained select that applies the config-level select (if any) and then
+ * the hook-level select (if any).
  *
- * This enables `createQuery` / `createSuspenseQuery` to support two-level
- * select chaining without duplicating the logic.
+ * Returns the caller's own function untouched when only one of the two is
+ * present, and `undefined` when neither is — allocating a wrapper only for the
+ * genuinely chained case. Identity matters here: `QueryObserver` memoizes a
+ * select result on `options.select === previousSelectFn`, so a wrapper rebuilt
+ * on every render defeats that check. The select then re-runs each render, and
+ * for a select returning a non-plain value (a `Map`, a `Date`, a `Principal`)
+ * `replaceEqualDeep` cannot structurally share the result either, so `data`
+ * gets a fresh reference every render and a `useEffect([data])` that sets state
+ * becomes an unbounded loop.
+ *
+ * Callers should still memoize the result, since the chained case allocates.
  */
 export function buildChainedSelect<TData, TSelected, TFinal = TSelected>(
   configSelect: ((data: TData) => TSelected) | undefined,
   hookSelect: ((data: TSelected) => TFinal) | undefined
-): (rawData: TData) => TSelected | TFinal {
-  return (rawData: TData) => {
-    const firstPass = configSelect
-      ? configSelect(rawData)
-      : (rawData as unknown as TSelected)
-    return hookSelect ? hookSelect(firstPass) : firstPass
+): ((rawData: TData) => TSelected | TFinal) | undefined {
+  if (!configSelect) {
+    // `hookSelect` receives the raw data when there is no config-level select,
+    // matching the previous behaviour.
+    return hookSelect as unknown as
+      ((rawData: TData) => TSelected | TFinal) | undefined
+  }
+  if (!hookSelect) return configSelect
+  return (rawData: TData) => hookSelect(configSelect(rawData))
+}
+
+/**
+ * How many memoized query objects an args-late factory keeps.
+ *
+ * The memo exists so `getBalance(sameArgs)` returns the same object twice; it
+ * was unbounded, so an open-ended argument space — a per-principal balance in a
+ * long-lived SPA, a search-as-you-type filter, a cursor-keyed list — grew it
+ * forever (measured at ~2.9 kB per entry, 55.8 MB for 20k). A few hundred
+ * covers any realistic working set while capping the worst case.
+ */
+const FACTORY_CACHE_LIMIT = 256
+
+/**
+ * Smallest useful LRU: a `Map` already iterates in insertion order, so
+ * re-inserting on read is enough to track recency.
+ *
+ * Eviction is safe — it costs memoization, never correctness. A query object is
+ * a closure over the reactor and config, so one rebuilt after eviction behaves
+ * identically; only its reference identity differs.
+ */
+export function createBoundedCache<V>(limit: number = FACTORY_CACHE_LIMIT) {
+  const entries = new Map<string, V>()
+
+  return {
+    get(key: string): V | undefined {
+      const value = entries.get(key)
+      if (value === undefined) return undefined
+      // Touch: move to the most-recent end.
+      entries.delete(key)
+      entries.set(key, value)
+      return value
+    },
+    set(key: string, value: V): void {
+      if (entries.has(key)) entries.delete(key)
+      else if (entries.size >= limit) {
+        const oldest = entries.keys().next().value
+        if (oldest !== undefined) entries.delete(oldest)
+      }
+      entries.set(key, value)
+    },
+    get size(): number {
+      return entries.size
+    },
   }
 }