diff --git a/apps/start/src/integrations/tanstack-query/root-provider.tsx b/apps/start/src/integrations/tanstack-query/root-provider.tsx index a015111b5..41fdf7c86 100644 --- a/apps/start/src/integrations/tanstack-query/root-provider.tsx +++ b/apps/start/src/integrations/tanstack-query/root-provider.tsx @@ -1,17 +1,26 @@ +import type { AppRouter } from '@openpanel/trpc'; import { QueryClient } from '@tanstack/react-query'; +import { createIsomorphicFn } from '@tanstack/react-start'; +import { getRequestHeaders } from '@tanstack/react-start/server'; import { createTRPCClient, httpLink } from '@trpc/client'; import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query'; +import { useMemo } from 'react'; import superjson from 'superjson'; - import { TRPCProvider } from '@/integrations/trpc/react'; -import type { AppRouter } from '@openpanel/trpc'; -import { createIsomorphicFn } from '@tanstack/react-start'; -import { getRequestHeaders } from '@tanstack/react-start/server'; -import { useMemo } from 'react'; export const getIsomorphicHeaders = createIsomorphicFn() .server(() => { - return getRequestHeaders(); + const headers = getRequestHeaders(); + const result: Record = {}; + // Only forward the cookie header so the API can validate the session. + // Forwarding all headers causes problems with hop-by-hop headers like + // `Connection: upgrade` (common in NGINX WebSocket configs) which makes + // Node.js undici throw UND_ERR_INVALID_ARG ("fetch failed"). + const cookie = headers.get('Cookie'); + if (cookie) { + result.cookie = cookie; + } + return result; }) .client(() => { return {}; @@ -27,7 +36,6 @@ export function createTRPCClientWithHeaders(apiUrl: string) { headers: () => getIsomorphicHeaders(), fetch: async (url, options) => { try { - console.log('fetching', url, options); const response = await fetch(url, { ...options, mode: 'cors', @@ -82,8 +90,8 @@ export function getContext(apiUrl: string) { const client = createTRPCClientWithHeaders(apiUrl); const serverHelpers = createTRPCOptionsProxy({ - client: client, - queryClient: queryClient, + client, + queryClient, }); return { queryClient, @@ -102,10 +110,10 @@ export function Provider({ }) { const trpcClient = useMemo( () => createTRPCClientWithHeaders(apiUrl), - [apiUrl], + [apiUrl] ); return ( - + {children} );