T
TanStack•3y ago
genetic-orange

Using tRPC inferred types with Tanstack Table?

Hey all!!! I am currently trying to use tRPC to grab a sample of data from my backend to use in tanstack table I had a previous verison of this working where I used an explicitly types API route, however I want to be able to infer the type of the route and use it as the type for the column defs I was wondering if anyone has tried to do this or something similar. The main problem I am having is with the columns field when using the useReactTable hook. It seems that the main complaint from typescript is a missing dependency of Accessorfn https://trpc.io/docs/client/react/infer-types I am using the link above to infer the types returned by my API route. https://tanstack.com/table/v8/docs/guide/column-defs and the link above to setup my column helper
Inferring Types | tRPC
In addition to the type inference made available by @trpc/server (see here) this integration also provides some inference helpers for usage purely in React.
Columns | TanStack Table Docs
API Table API
2 Replies
genetic-orange
genetic-orangeOP•3y ago
Update on this: Seems like doing 
import type { inferRouterOutputs } from '@trpc/server'
import type { AppRouter } from '@/server/trpc/router/customRoute'

type RouterOutput = inferRouterOutputs<AppRouter>

type GetTypedOutput = RouterOutput['customRouter']['queryEndpoint'][0]
import type { inferRouterOutputs } from '@trpc/server'
import type { AppRouter } from '@/server/trpc/router/customRoute'

type RouterOutput = inferRouterOutputs<AppRouter>

type GetTypedOutput = RouterOutput['customRouter']['queryEndpoint'][0]
works sorta. Some endpoints it works but others it doesnt. I am assuming that its due to one of my endpoints returning an array of objects while the other is returning a single object somehow? The reason I say this sorta works is because I am using this exact same structure in a different file with a different endpoint being envoked, however both should return multiple values
deep-jade
deep-jade•3y ago
I can't see any examples here but it sounds like you're declaring columnDefs without the helper. Something like this might help you: 
const columnHelper = createColumnHelper<ColumnDataType>();
const columnHelper = createColumnHelper<ColumnDataType>();
Here's the docs on this: https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers
Columns | TanStack Table Docs
API Table API

Did you find this page helpful?