Ariel Posts

Ariel

•Created by Ariel on 3/20/2024 in #❓-help

silent failure on client query?

Hey friends, long time listener, first time caller 😉 I have encountered a quite confusing quirk that I'm not sure how to start reasoning about... I have been running a trpc client call (all my trpc packages are currently v10.45.2) in a nextjs 14 (w/ app router) application. So the follow code has been working when the selectedSession updates in the context

export default function SessionExplorer({ id }: { id?: string }) {
  const { selectedSession } = useContext(SessionContext);
  if (!selectedSession) {
    return <EmptyState />;
  }

  const { data: m } = trpc.messages.getMessagesWithEntities.useQuery(
    {
      sessionId: selectedSession.id,
    },
    {
      refetchOnMount: false,
    },
  );
  // doing some stuff with `m`
  ...
}

export default function SessionExplorer({ id }: { id?: string }) {
  const { selectedSession } = useContext(SessionContext);
  if (!selectedSession) {
    return <EmptyState />;
  }

  const { data: m } = trpc.messages.getMessagesWithEntities.useQuery(
    {
      sessionId: selectedSession.id,
    },
    {
      refetchOnMount: false,
    },
  );
  // doing some stuff with `m`
  ...
}

oddly, it seems like it's now just jumping over my useQuery call and returns undefined. I would expect this call to hit my server code, but I don't see any queries in my server logs. It doesn't seem to even be hitting my server code (though my server calls using trpc continue to work 👌 ). I tried to set breakpoints around the client side code, but all I see when I try to step into trpc or useQuery , it doesn't show much and console logging trpc leads to Proxy(Function) {length: 0, name: 'noop'}. Given that server trpc calls appear to be working just fine, my thought was perhaps some misconfiguration with my client trpc code, though it's fairly vanilla:

import { createTRPCReact } from "@trpc/react-query";

import { type AppRouter } from "@/lib/server/routers/_app";

export const trpc = createTRPCReact<AppRouter>({});

import { createTRPCReact } from "@trpc/react-query";

import { type AppRouter } from "@/lib/server/routers/_app";

export const trpc = createTRPCReact<AppRouter>({});

Though I didn't explicitly change much in my trpc configuration, I did blow away my node_modules and reinstall, so I wonder whether that has contributed to these issues arising today. Anyone have any suggestions for things that I could try to get further visibility into the issue?

5 replies