T
TanStack•5mo ago
conscious-sapphire

has anyone succesfully integrated TRPC with tanstack start WITH SSR?

looking for some guidance on this. how does trpc fit in with tanstack router? of course we store it in the router context... but how do we handle creating a new query client for each request AND where does useTRPC fit in there?
2 Replies
quickest-silver
quickest-silver•5mo ago
This might help https://youtu.be/dLUyPLbvdY0?si=9_Iz17ZNx-Pwu3w5
Jack Herrington
YouTube
tRPC v11 with TanStack Query on TanStack Start! Part 1
tRPC version 11 now integrates tightly with TanStack Query. Let's try it out on TanStack Start and find out how to query both inside and outside the React context. Code: https://github.com/jherr/start-trpc/tree/main/start-trpc-pt-1 Part 1: What you're watching now Part 2: https://youtu.be/uE4devDh2rU This video was sponsored by Infinite Red: ...
fascinating-indigo
fascinating-indigo•5mo ago
but this does not have auth part with ssr? 
export const trpc = createTRPCOptionsProxy<AppRouter>({
    client: createTRPCClient({
        links: [
            httpBatchStreamLink({
                url: `${import.meta.env.VITE_BETTER_AUTH_URL}/api/trpc`,
                fetch: (url, options) => {
                    if (typeof window === "undefined") {
                        const headers = getHeaders();
                        return fetch(url, {
                            ...options,
                            headers: {
                                ...options?.headers,
                                ...headers,
                            },
                        });
                    }
                    return fetch(url, options);
                },
            }),
        ],
    }),
    queryClient: TanstackQuery.getContext().queryClient,
});
export const trpc = createTRPCOptionsProxy<AppRouter>({
    client: createTRPCClient({
        links: [
            httpBatchStreamLink({
                url: `${import.meta.env.VITE_BETTER_AUTH_URL}/api/trpc`,
                fetch: (url, options) => {
                    if (typeof window === "undefined") {
                        const headers = getHeaders();
                        return fetch(url, {
                            ...options,
                            headers: {
                                ...options?.headers,
                                ...headers,
                            },
                        });
                    }
                    return fetch(url, options);
                },
            }),
        ],
    }),
    queryClient: TanstackQuery.getContext().queryClient,
});
this solves the problem.

Did you find this page helpful?