feat: make query ID accessible via context

Author: mfal

packages/react-async-proxy/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@sindresorhus/is": "^7.1.0",
+    "context": "^3.0.33",
     "nanoid": "^5.1.6",
     "object-code": "^1.3.4",
     "type-fest": "^5.1.0"

packages/react-async-proxy/src/context.ts

@@ -0,0 +1,7 @@
+import { createCascade } from "context";
+import type { QueryFnContext } from "./types";
+
+export const queryFnContext = createCascade<QueryFnContext>();
+
+export const useQueryFnContext = () =>
+  queryFnContext.use() as QueryFnContext | undefined;

packages/react-async-proxy/src/index.ts

@@ -1,3 +1,9 @@
 export { reactAsyncProxy } from "./reactAsyncProxy";
-export { type ReactAsyncProxy } from "./types";
+export {
+  type ReactAsyncProxy,
+  QueryFnContext,
+  UseAsyncProxyReturn,
+} from "./types";
 export * from "./maybeProxy";
+export { useQueryFnContext } from "./context";
+export { invalidateQueriesById } from "./invalidate";

packages/react-async-proxy/src/invalidate.ts

@@ -0,0 +1,10 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+export const invalidateQueriesById = (
+  queryClient: QueryClient,
+  queryId: string,
+) => {
+  queryClient.invalidateQueries({
+    predicate: (query) => query.meta?.id === queryId,
+  });
+};

packages/react-async-proxy/src/types.ts

@@ -73,3 +73,8 @@ export function isReactAsyncProxy<T>(
     something[useProxyMarker as keyof typeof something] === true
   );
 }
+
+export interface QueryFnContext {
+  id?: string;
+  [key: string]: unknown;
+}

packages/react-async-proxy/src/useCallStack.ts

@@ -17,6 +17,8 @@ import {
   useSuspenseQuery,
 } from "@tanstack/react-query";
 import { getModelQueryKey } from "./getModelQueryKey";
+import { queryFnContext } from "./context";
+import { invalidateQueriesById } from "./invalidate";
 
 const useVoidQuery = () =>
   useQuery({
@@ -62,12 +64,16 @@ const useCallStackItem = <T>(
 
   assert.function(modelProperty);
 
-  const modelFunction = modelProperty.bind(model);
   const queryId = nanoid();
+  const modelFunction = queryFnContext.bind(
+    {
+      id: queryId,
+    },
+    modelProperty.bind(model),
+  );
   const modelQueryKey = getModelQueryKey(model, propName, ...args);
 
   const query = useSuspenseQuery<UseQueryReturnType<T>>({
-    staleTime: Infinity,
     ...options,
     queryKey: modelQueryKey,
     queryFn: async () => {
@@ -79,15 +85,11 @@ const useCallStackItem = <T>(
     },
     meta: {
       ...options?.meta,
-      queryId,
+      id: queryId,
     },
   });
 
-  const refresh = () => {
-    queryClient.invalidateQueries({
-      predicate: (query) => query.meta?.queryId === queryId,
-    });
-  };
+  const refresh = () => invalidateQueriesById(queryClient, queryId);
 
   if (query.error) {
     throw query.error;