Luke•8mo ago

tRPC useQuery with skipToken

I am trying to implement a useQuery which only happens once. I haven't been happy with setting enabled so something like enabled: !!foo as it'll still refetch, etc (and yes I know you can disable certain refetches, but that's not the goal here). I found a supported, type-safe solution on the tRPC docs (https://trpc.io/docs/client/react/disabling-queries).
But... following their example nearly identically doesn't work for me. Broken Example

import { skipToken } from '@tanstack/react-query';
import { api } from '~/utils/trpc';

const ViewExample = () => {
  const [exampleId, setExampleId] = useState<number | undefined>();
  const exampleQuery = api.examples.getOne.useQuery(exampleId ? { exampleId: exampleId } : skipToken);

  ...
}

import { skipToken } from '@tanstack/react-query';
import { api } from '~/utils/trpc';

const ViewExample = () => {
  const [exampleId, setExampleId] = useState<number | undefined>();
  const exampleQuery = api.examples.getOne.useQuery(exampleId ? { exampleId: exampleId } : skipToken);

  ...
}

Router

  getOne: protectedProcedure
    .input(
      z.object({
        exampleId: z.number(),
      }),
    )
    .query(async ({ ctx, input }) => {
      return await ctx.apis.redacted.get<Example>(`/v1/example/${input.exampleId}`);
    }),

  getOne: protectedProcedure
    .input(
      z.object({
        exampleId: z.number(),
      }),
    )
    .query(async ({ ctx, input }) => {
      return await ctx.apis.redacted.get<Example>(`/v1/example/${input.exampleId}`);
    }),

And my error:

Argument of type 'unique symbol | { exampleId: number; }' is not assignable to parameter of type '{ exampleId: number; }'.
  Type 'typeof skipToken' is not assignable to type '{ exampleId: number; }'.ts(2345)

Argument of type 'unique symbol | { exampleId: number; }' is not assignable to parameter of type '{ exampleId: number; }'.
  Type 'typeof skipToken' is not assignable to type '{ exampleId: number; }'.ts(2345)

Am I meant to define the skipToken in the zod input? It seems counter-intuitive to have to define skipToken in the zod input every single time this needs to be used on a route. P.S. I have a feeling this is a bug on tRPC itself given how little documentation and conversation surrounds the usage of skipToken on Discord and GitHub.

Solution:

Nevermind, this idiot wasn't on tRPC v11. Just did the upgrade, was pretty painless. Shoutout to the tRPC team. I'll leave this up incase anyone else experiences a similar issue and goes down the rabbithole. UPGRADE TO V11 TO GET SKIPTOKEN TO WORK!...

Jump to solution

1 Reply

Solution

Luke•8mo ago

tRPC useQuery with skipToken

Did you find this page helpful?