ansishihi•10mo 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

ansishihi•10mo 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.