correct-apricot

Router with TRPC

Can someone provide an example of how I might integrate TanStack router with TRPC? I'm looking at the Kitchen Sink React Query File Based https://tanstack.com/router/v1/docs/framework/react/examples/kitchen-sink-react-query-file-based, but its not clear how I could use trpc. I think it would be really nice if I could make use of all the TRPC niceties.

An example showing how to implement Kitchen Sink React Query File Based, in React Router

6 Replies

absent-sapphire•2y ago

Any specific questions or?

correct-apricotOP•2y ago

This is some sudo-code: How can I connect trpc to the Router paradigms

export const Route = createFileRoute("/_authenticated/incidents")({
  component: Incidents,
  loader: trpc.dummy.dum.useQuery()
});

export const Route = createFileRoute("/_authenticated/incidents")({
  component: Incidents,
  loader: trpc.dummy.dum.useQuery()
});

correct-apricotOP•2y ago

absent-sapphire•2y ago

You can create query utils, pass it your route context and use that to ensure query data Are you ssring?

foreign-sapphire•2y ago

Check the pull requests for the router There's an example there I'm waiting to be merged

correct-apricotOP•2y ago

@Zion this is great thank you. Exactly what I was looking for