TanStackT
TanStack•4mo ago•
1 reply
dead-brown

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

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;
    })
});
Was this page helpful?