Luke
Luke2mo 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
Luke2mo ago
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!