Skipping useQuery with typescript

Mmako

4/25/2023

I'm wondering if there is a way to skip a query in a typescript friendly way? rtk-query has a handy skipToken that can be used to opt out of the query (https://redux-toolkit.js.org/rtk-query/usage-with-typescript#skipping-queries-with-typescript-using-skiptoken). I see that tanstack has an enabled option, however, it seems with the trpc react hook API you must still pass a typesafe query input. Is there anything I'm missing? How is this intended to work?

Nnlucas

4/25/2023

Yes you want enabled. I don't follow why type-safety would be a problem though? Type are only checked at compile-time, so if you're assigning an invalid variable to the query enabling/disabling isn't going to help with that

Mmako

4/25/2023

If you have an optional parameter to a component and need to run a query conditionally like

const result = trpc.endpoint.useQuery({ param }, { enabled: !!param })

const result = trpc.endpoint.useQuery({ param }, { enabled: !!param })

It will fail the typecheck because { param: undefined } is not a valid query With rtk-query style skip token this would look like

const result = trpc.endpoint.useQuery(param ? { param } : skipToken)

const result = trpc.endpoint.useQuery(param ? { param } : skipToken)

Which can pass type-checking because skipToken is a valid arg to useQuery

Nnlucas

4/25/2023

Got it A skip token can just be a variable of type “any”

Mmako

4/25/2023

Yes, I can make the types pass with assertions, but keeping 2 arguments in sync is both inconvenient and error prone. I was hoping there was another why which I was missing.

Looking for more? Join the community!

tRPC

Skipping useQuery with typescript

Join Server

tRPC

Skipping useQuery with typescript

Join Server

Recommended Posts

Clerk Webhook Input UndefinedHi! I wrote a public procedure that takes in an input and updates user info based on Clerk Webhook. Getting this error: Cannot read properties of undefined (reading 'upsert')I'm using the T3 Stack. And I'm fairly new to tRPC so I am not sure what this error is caused. I'm Stuck trying to utilize useQuery to fetch some data on form submissionI'm trying to call a procedure in trpc through the use of useQuery in react upon form submission. So createTRPCNext type errorHi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouter Full cache invalidation and timing problemI'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invali Using Next.JS + FastifyMy node environment is Node 18, powered by PNPM. What's wrong: I have a few requirements for my app Error Handling vs Error FormattingI'm a bit confused from the docs about how I should be handling errors on the server. The Error Hand Next.js body-parsing issueA thead to discuss this issue: https://github.com/trpc/trpc/issues/4243 Cannot find module '@trpc/react-query/server' or its corresponding type declarations```ts import { createServerSideHelpers } from '@trpc/react-query/server' ``` This should work, righ Procedure with generic input?Is there a way to define a procedure so that it takes input with type parameters, and returns output Delete item {0: {json:{id: 12324}}}When i try to mutate/delete item with id i am geting this payload `{0: {json:{id: 12324}}}`, withou Query function depends on a variableIn tRPC v10 accessing a specific path is really easy, but because of that I don't control the query 'useInfiniteQuery' hook disappeared after moving to TurborepoI am using Turborepo with Next.js with the following layout, originally a T3 app - `/apps/app` - `/p convert the result to date objectsI am not sure if this is even trpcs responsibility but I would like to get my date objects as date o ECONNREFUSED with TRPC call on VercelAnyone run into this before? I just deployed my app to Vercel and I run into this error when I trigg Invalid ValDoes TRPC string input have a limit? https://prnt.sc/KlXlyoGrzP8P Edit: It was actually from strip