Fix "Invalid hook call" issue when using @rspc/react-query

.gitignore

@@ -26,3 +26,4 @@ node_modules
 
 .svelte-kit
 .turbo
+.astro

examples/axum/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@rspc/examples-axum",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "cargo run"
+  },
+  "devDependencies": {}
+}

examples/nextjs/pages/using-use-mutation.tsx

@@ -4,9 +4,7 @@ import { useMutation } from "../src/rspc";
 import styles from "../styles/Home.module.css";
 
 const UsingUseMutation: NextPage = () => {
-	const { mutate, data, isPending, error } = useMutation({
-		mutationKey: "sendMsg",
-	});
+    const { mutate, data, isPending, error } = useMutation("sendMsg");
 
 	const handleSubmit = async (
 		event: React.FormEvent<HTMLFormElement>,

examples/nextjs/pages/using-use-query.tsx

@@ -4,7 +4,7 @@ import { useQuery } from "../src/rspc";
 import styles from "../styles/Home.module.css";
 
 const UsingUseQuery: NextPage = () => {
-	const { data, isLoading, error } = useQuery({ queryKey: ["echo", "Hello!"] });
+    const { data, isLoading, error } = useQuery(["echo", "Hello!"]);
 
 	return (
 		<div className={styles.container}>

packages/react-query/src/index.tsx

@@ -132,13 +132,18 @@ export function createReactQueryHooks<
 		const optsRef = react.useRef<typeof opts>(opts);
 		optsRef.current = opts;
 
+		const ctx = react.useContext(Context);
+		const helpersInner = queryCore.createQueryHookHelpers({
+			useContext: () => ctx,
+		});
+
 		// biome-ignore lint/correctness/useExhaustiveDependencies:
 		return react.useEffect(
 			() =>
-				helpers.handleSubscription(
+				helpersInner.handleSubscription(
 					keyAndInput,
 					() => optsRef.current,
-					helpers.useClient(),
+					helpersInner.useClient(),
 				),
 			[queryKey, enabled],
 		);

packages/tauri2/src/index.ts

@@ -1,72 +1,77 @@
-import { randomId, OperationType, Transport, RSPCError } from "@rspc/client";
-import { listen, UnlistenFn } from "@tauri-apps/api/event";
-import { getCurrent } from "@tauri-apps/api/window";
+import {
+	randomId,
+	type OperationType,
+	type Transport,
+	RSPCError,
+} from "@rspc/client";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 
 export class TauriTransport implements Transport {
-  private requestMap = new Map<string, (data: any) => void>();
-  private listener?: Promise<UnlistenFn>;
-  clientSubscriptionCallback?: (id: string, value: any) => void;
+	private requestMap = new Map<string, (data: any) => void>();
+	private listener?: Promise<UnlistenFn>;
+	clientSubscriptionCallback?: (id: string, value: any) => void;
 
-  constructor() {
-    this.listener = listen("plugin:rspc:transport:resp", (event) => {
-      const { id, result } = event.payload as any;
-      if (result.type === "event") {
-        if (this.clientSubscriptionCallback)
-          this.clientSubscriptionCallback(id, result.data);
-      } else if (result.type === "response") {
-        if (this.requestMap.has(id)) {
-          this.requestMap.get(id)?.({ type: "response", result: result.data });
-          this.requestMap.delete(id);
-        }
-      } else if (result.type === "error") {
-        const { message, code } = result.data;
-        if (this.requestMap.has(id)) {
-          this.requestMap.get(id)?.({ type: "error", message, code });
-          this.requestMap.delete(id);
-        }
-      } else {
-        console.error(`Received event of unknown method '${result.type}'`);
-      }
-    });
-  }
+	constructor() {
+		this.listener = listen("plugin:rspc:transport:resp", (event) => {
+			const { id, result } = event.payload as any;
+			if (result.type === "event") {
+				if (this.clientSubscriptionCallback)
+					this.clientSubscriptionCallback(id, result.data);
+			} else if (result.type === "response") {
+				if (this.requestMap.has(id)) {
+					this.requestMap.get(id)?.({ type: "response", result: result.data });
+					this.requestMap.delete(id);
+				}
+			} else if (result.type === "error") {
+				const { message, code } = result.data;
+				if (this.requestMap.has(id)) {
+					this.requestMap.get(id)?.({ type: "error", message, code });
+					this.requestMap.delete(id);
+				}
+			} else {
+				console.error(`Received event of unknown method '${result.type}'`);
+			}
+		});
+	}
 
-  async doRequest(
-    operation: OperationType,
-    key: string,
-    input: any
-  ): Promise<any> {
-    if (!this.listener) {
-      await this.listener;
-    }
+	async doRequest(
+		operation: OperationType,
+		key: string,
+		input: any,
+	): Promise<any> {
+		if (!this.listener) {
+			await this.listener;
+		}
 
-    const id = randomId();
-    let resolve: (data: any) => void;
-    const promise = new Promise((res) => {
-      resolve = res;
-    });
+		const id = randomId();
+		let resolve: (data: any) => void;
+		const promise = new Promise((res) => {
+			resolve = res;
+		});
 
-    // @ts-ignore
-    this.requestMap.set(id, resolve);
+		// @ts-ignore
+		this.requestMap.set(id, resolve);
 
-    await getCurrent().emit("plugin:rspc:transport", {
-      id,
-      method: operation,
-      params: {
-        path: key,
-        input,
-      },
-    });
+		await getCurrentWindow().emit("plugin:rspc:transport", {
+			id,
+			method: operation,
+			params: {
+				path: key,
+				input,
+			},
+		});
 
-    const body = (await promise) as any;
-    if (body.type === "error") {
-      const { code, message } = body;
-      throw new RSPCError(code, message);
-    } else if (body.type === "response") {
-      return body.result;
-    } else {
-      throw new Error(
-        `RSPC Tauri doRequest received invalid body type '${body?.type}'`
-      );
-    }
-  }
+		const body = (await promise) as any;
+		if (body.type === "error") {
+			const { code, message } = body;
+			throw new RSPCError(code, message);
+		} else if (body.type === "response") {
+			return body.result;
+		} else {
+			throw new Error(
+				`RSPC Tauri doRequest received invalid body type '${body?.type}'`,
+			);
+		}
+	}
 }

pnpm-workspace.yaml

@@ -1,5 +1,6 @@
 packages:
- - docs/
- - packages/*
- - examples/astro
- - examples/nextjs
+  - docs/
+  - packages/*
+  - examples/astro
+  - examples/nextjs
+  - examples/axum