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
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
sh032w ago
What about the server? How's that instantiated?