Laurens LavaertL
tRPC•2y ago•
2 replies
Laurens Lavaert

TRPCClientError prior to the request being sent (v11, App Router)

Anyone else had this occur where you just get a TRPCClientError without the request even being visible in the network tab?

I'm moving my app from pages router to app router, and testing client-side fetching with prefetching from the server.

Consider the code below as an example

"use client";
import { createContext } from "react";
import { clientApi } from "../trpc/react";
import { RouterOutputs } from "@acme/api";
import { getQueryClient } from "@trpc/react-query/shared";

type CurrentUser = RouterOutputs["authentication"]["me"];

export const UserContext = createContext<CurrentUser>(null);

export const UserContextProvider = ({
  children,
  initialData,
}: {
  children: React.ReactNode;
  initialData: CurrentUser;
}) => {
  const utils = clientApi.useUtils();
  const userQuery = clientApi.authentication.me.useQuery(undefined, {});
  return <pre>{JSON.stringify(userQuery, null, 2)}</pre>;
};
image.png
Was this page helpful?