Theo's Typesafe Cult•11mo ago

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>;
}

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";
    }),
  }),
// ...

// ...
 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,
});

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?

Solution:

Actually, I just had to close and restart Arc. It works now. No idea why that happened 🤷‍♂️

Jump to solution

2 Replies

ncoOP•11mo ago

Damn it looks like the issue is with Arc. Works in Chrome and Safari... thinkies

Solution

nco•11mo ago

Actually, I just had to close and restart Arc. It works now. No idea why that happened 🤷‍♂️

Gaming

Programming

tRPC react-query hook not called on load