ansishihi•2y ago

tRPC queries running on the server

Environment: - bun 1.0.2 - next 13.4.16 - trpc 10.37.1 I am creating an app with next-intl and next-themes. I initially setup trpc, and everything was working, but after a little refactoring (including i18n and dark mode), my tRPC queries suddenly run on the server. I tried back-tracking until I got to the basic tRPC next.js setup. The only clue I had is that I changed ssr to true in my tRPC client, but after setting it back to false and clearing cache, the problem still persists. Since all I have is the basic setup, I don't think looking at my code will do any good. Maybe anyone has had this problem before? EDIT: While trying to force the component to run on the browser, I created this dummy component:

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

"use client";

import { trpc } from "@/utils/trpc";
import { useState } from "react";

export const TestApp: React.FC = () => {
  const { data } = trpc.twitch.clips.list.useQuery({ game: "Minecraft" });

  const [dummy, setDummy] = useState("");
  console.log({ dummy });
  console.log("TestApp: should run on the client");
  console.log({ clips: data });

  return <div>Test app</div>;
};

But the console output shows up on my backend. How is it even possible that a component with useState runs on the server?

1 Reply

ansishihiOP•2y ago

Solved. For some reason logs weren't showing up in my browser, but the data was always there. No clue why anything was printing in the server logs.

tRPC queries running on the server

Did you find this page helpful?