Laurens Lavaert•6mo ago

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>;
};

"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>;
};

1 Reply

Laurens LavaertOP•6mo ago

Setup was mainly inspired upon how Julius has configured create-t3-turbo enabled: (op) => env.NODE_ENV === "development" || (op.direction === "down" && op.result instanceof Error), ☝️ env. contained server-only stuff but that didnt propagate the error properly when using it in loggerLink FUUUUUCK ME