Ariel•5mo ago

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?

1 Reply

Ariel•5mo ago

lol, crazy update; so I've: - blown away and reinstalled my client cache; - blown away and reinstalled my node modules - downgraded to a previous version that was definitely working for me (10.45.1) - asked my coworker to checkout the same code and he wasn't able to replicate So it appears to not be a code thing, but rather either a) PEBKAC (not ruling that out) or b) my machine (but how or why my machine, still unclear) I'm going to settle up with a cup of tea and start reading the stack trace of useQuery 😅 ...and now it just fixed itself on the next day? so weird. anyway, it was resolved, though unknown to me how