fix: potential fix for #301

wip

apps/start/src/integrations/tanstack-query/root-provider.tsx

@@ -1,17 +1,26 @@
-import { QueryClient } from '@tanstack/react-query';
-import { createTRPCClient, httpLink } from '@trpc/client';
-import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
-import superjson from 'superjson';
-
-import { TRPCProvider } from '@/integrations/trpc/react';
 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';
 
 export const getIsomorphicHeaders = createIsomorphicFn()
   .server(() => {
-    return getRequestHeaders();
+    const headers = getRequestHeaders();
+    const result: Record<string, string> = {};
+    // 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,
+    client,
-    queryClient: queryClient,
+    queryClient,
   });
   return {
     queryClient,
@@ -102,10 +110,10 @@ export function Provider({
 }) {
   const trpcClient = useMemo(
     () => createTRPCClientWithHeaders(apiUrl),
-    [apiUrl],
+    [apiUrl]
   );
   return (
-    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+    <TRPCProvider queryClient={queryClient} trpcClient={trpcClient}>
       {children}
     </TRPCProvider>
   );