Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
nco

tRPC react-query hook not called on load

Hi there, my tRPC hook is not being called on page load and I can't figure out why.

Here's what my /src/pages/poc.tsx page that uses the tRPC react-query hook look like:
export default function POC() {
  const { data } = api.poc.get.useQuery();

  return <pre>POC: {data}</pre>;
}

and the router definition:
// ...
 poc: createTRPCRouter({
    get: publicProcedure.query(() => {
      return "value from server";
    }),
  }),
// ...


On page load, when I access localhost:3000/poc, I'd expect to see (1) a network requests for this request and (2) a logged message since I'm using a loggerLink (https://trpc.io/docs/client/links/loggerLink), but I'm getting none of these. There are no Typescript errors as well. Plus, if I console.log inside get, nothing (of course) gets printed out.

Here's how api is defined as well:
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});


What's going on? Why is the hook not called?
image.png
Solution
Actually, I just had to close and restart Arc. It works now. No idea why that happened 🤷‍♂️
Jump to solution
Was this page helpful?