Luiz F. A. Morais•4mo ago

TRPCClientError: Unable to transform response from server

I'm having a problem with tRPC Client, I'm using TurboRepo, I created the API with Fastify, TypeScript and tRPC for the backend. For the frontend, I'm using Next.JS, TypeScript and tRPC. It works, the cookies are being set, but it is always returning this error: "TRPCClientError: Unable to transform response from server".

2 Replies

Luiz F. A. Morais•4mo ago

utils/trpc.ts

export const trpc = createTRPCReact<AppRouter>();

export const trpc = createTRPCReact<AppRouter>();

providers.tsx

const transformer = superjson;
let token: string;

export const setToken = (newToken: string) => {
    token = newToken;
};

export default function Providers({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient({}));

    const url = process.env.URL ? process.env.URL : "http://localhost:5000/trpc";

    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url,
                    fetch(url, options) {
                        return fetch(url, {
                            ...options,
                            credentials: "include",
                        });
                    },
                    headers() {
                        return {
                            Authorization: token ? `Bearer ${token}` : "",
                        };
                    },
                }),
            ],
            transformer: transformer,
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
}

const transformer = superjson;
let token: string;

export const setToken = (newToken: string) => {
    token = newToken;
};

export default function Providers({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient({}));

    const url = process.env.URL ? process.env.URL : "http://localhost:5000/trpc";

    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url,
                    fetch(url, options) {
                        return fetch(url, {
                            ...options,
                            credentials: "include",
                        });
                    },
                    headers() {
                        return {
                            Authorization: token ? `Bearer ${token}` : "",
                        };
                    },
                }),
            ],
            transformer: transformer,
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
}

sh03•4mo ago

What about the server? How's that instantiated?