Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions apps/start/src/integrations/tanstack-query/root-provider.tsx
Original file line number Diff line number Diff line change
@@ -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<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 {};
Expand All @@ -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',
Expand Down Expand Up @@ -82,8 +90,8 @@ export function getContext(apiUrl: string) {
const client = createTRPCClientWithHeaders(apiUrl);

const serverHelpers = createTRPCOptionsProxy({
client: client,
queryClient: queryClient,
client,
queryClient,
});
return {
queryClient,
Expand All @@ -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>
);
Expand Down