rspc + tauri2 + react and useSubscription gives "Invalid hook call"

[bivald]

Hi,

I'm using rspc, tauri2 and rspc-react. It works beautifully for both useQuery and useMutation, but if I try to use addSubscription I get:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I use it just like the useMutation in App.tsx:

import {rspc, client} from "./main.tsx"

function App() {
    const { mutate, isPending: isPending } = rspc.useMutation("project.open", {onSuccess: (data) => { console.log("dddata", data)}});
    rspc.useSubscription(["data.pings"], {
        onData(data): void {
            console.log(data);
        },
        onStarted(): void {
        },
    });

Weirdly enough neither eslint or editor complains, it only fails on runtime. useSubscriptions with data.pings exists because if I write something none-existing like data.not.pings it complains. I can see it in my bindings:

    subscriptions: 
        { key: "data.pings", input: never, result: string }
};

I'm initializing rspc like this in my main.tsx:

import {
    createClient
} from "@rspc/client";
import { TauriTransport } from "./tauri.js";
import type { Procedures } from "./bindings";

import { createReactQueryHooks } from "@rspc/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const client = createClient<Procedures>({
    transport: new TauriTransport(),
});

export const queryClient = new QueryClient();
export const rspc = createReactQueryHooks<Procedures>();

Package.json

  "dependencies": {
    "@rspc/client": "^0.2.4",
    "@rspc/react-query": "^0.2.4",
    "@tanstack/react-query": "^5.56.2",
    "@tauri-apps/api": "2.0.0-rc.5",
    "@tauri-apps/plugin-shell": "2.0.0-rc.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
  },

I'm using a patched tauri.ts which I'm attaching here for reference. Any help would be greatly appreciated!

Regards,
Niklas

[bivald]

import { randomId, OperationType, Transport, RSPCError } from "@rspc/client";
import { listen, 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;

    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;
        }

        const id = randomId();
        let resolve: (data: any) => void;
        const promise = new Promise((res) => {
            resolve = res;
        });

        // @ts-ignore
        this.requestMap.set(id, resolve);

        await getCurrentWindow().emit("plugin:rspc:transport", {
            id,
            method: operation,
            params: {
                path: key,
                input,
            },
        });

        const body = (await promise) as any;
        console.log(body);
        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}'`
            );
        }
    }
}

[oscartbeaumont]

Related to #301

[bivald]

I can confirm it works if I use the react-query from https://github.com/specta-rs/rspc/pull/301/files (https://github.com/specta-rs/rspc/blob/fb2b14c41759e755336b815d284164f25f07f796/packages/react-query/src/index.tsx) - marking this as closed. Thank you!

Sorry I didn't find #301 when I searched around