T
TanStack•3d ago
equal-aqua

Svelte Query SSR doesn't work with ORPC

I try tanstack query svelte with ORPC. The SSR Example in the repo works but the SSR does not work when I use with ORPC. When I console log the query.isLoading, it log true on the server but it render the UI without waiting the prefetch query, I guess. I also await the prefetch query and also use the fetch from svelte as well. Did anyone got that issue? 
export const load: PageLoad = async ({ fetch, parent }) => {
    const orpc = getApiClient(fetch);
    const { queryClient } = await parent();
    await queryClient.prefetchQuery(orpc.foo.queryOptions({ context: { cache: true } }));
};
export const load: PageLoad = async ({ fetch, parent }) => {
    const orpc = getApiClient(fetch);
    const { queryClient } = await parent();
    await queryClient.prefetchQuery(orpc.foo.queryOptions({ context: { cache: true } }));
};
function setup() {
    let internal: typeof orpc | undefined;

    return (fetch: {
        (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
        (input: string | URL | Request, init?: RequestInit): Promise<Response>;
    }) => {
        if (internal) return internal;

        const link = new RPCLink({
            url: `http://localhost:4173/rpc`,
            fetch,
            plugins: [new BatchLinkPlugin({ groups: [{ condition: () => true, context: {} }] })]
        });

        const client: RouterClient<Router> = createORPCClient(link);
        internal = createTanstackQueryUtils(client);
        return internal;
    };
}

export const getApiClient = setup();
function setup() {
    let internal: typeof orpc | undefined;

    return (fetch: {
        (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
        (input: string | URL | Request, init?: RequestInit): Promise<Response>;
    }) => {
        if (internal) return internal;

        const link = new RPCLink({
            url: `http://localhost:4173/rpc`,
            fetch,
            plugins: [new BatchLinkPlugin({ groups: [{ condition: () => true, context: {} }] })]
        });

        const client: RouterClient<Router> = createORPCClient(link);
        internal = createTanstackQueryUtils(client);
        return internal;
    };
}

export const getApiClient = setup();
export const router = os.router({
    foo: os.handler(async () => {
        const foo = await new Promise<string>((resolve) => setTimeout(() => resolve("foo"), 1000));
        return foo;
    })
});
export const router = os.router({
    foo: os.handler(async () => {
        const foo = await new Promise<string>((resolve) => setTimeout(() => resolve("foo"), 1000));
        return foo;
    })
});
1 Reply
equal-aqua
equal-aquaOP•2d ago
For someone who have the same problem as me, there is the same problem discuss about this in ORPC channel. https://discord.com/channels/1308966753044398161/1402461990399770695 And with the example repo https://github.com/CoopTRUE/orpc-svelte-query-ssr
GitHub
GitHub - CoopTRUE/orpc-svelte-query-ssr: Template project for a Sve...
Template project for a SvelteKit project built with oRPC and SvelteQuery (Tanstack Query) with NO double requests. - CoopTRUE/orpc-svelte-query-ssr

Did you find this page helpful?