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

selectedSession

selectedSession

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`
  ...
}

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

useQuery

call and returns

undefined

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

useQuery

, it doesn't show much and console logging

trpc

trpc

trpc

trpc leads to

Proxy(Function) {length: 0, name: 'noop'}

Proxy(Function) {length: 0, name: 'noop'}

Proxy(Function) {length: 0, name: 'noop'}

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>({});

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?

silent failure on client query?

Similar Threads

Similar Threads

Similar Threads