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

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

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

enabled: !!foo

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)

Solution

Jump to solution

tRPC useQuery with skipToken

Similar Threads

tRPC useQuery with skipToken

Similar Threads

Similar Threads

Similar Threads