josephbranch•3y ago

How can you fetch data on a dynamic router with trpc?

I’m creating a table component within my NextJs app. Instead of making an api call in the parent component and passing the data to the table through props I’d like the component to be able to manage its own state. How can I achieve this in trpc v10? In v9 I believe you could do const helloNoArgs = trpc.useQuery(['hello'] What’s the equivalent, if there is one, in v10?

3 Replies

Nick•3y ago

v10 still has the react-query integration. Have you read the migration guide?

Nick•3y ago

https://trpc.io/docs/migrate-from-v9-to-v10#trpcreact-query

Migrate from v9 to v10 | tRPC

Welcome to tRPC v10! We're excited to bring you a new major version to continue the journey towards perfect end-to-end type safety with excellent DX.

josephbranchOP•3y ago

I did not. I entered trpc on v10 so I apologize, but thank you! Is there a particular module that I need or should the below implementation work out of the box

useQuery(['post.byId', '1'], {
  trpc: {
    context: {
      batching: false,
    },
  },
});

useQuery(['post.byId', '1'], {
  trpc: {
    context: {
      batching: false,
    },
  },
});

trpc.post.byId.useQuery('1', {
  trpc: {
    batching: false,
  },
});

trpc.post.byId.useQuery('1', {
  trpc: {
    batching: false,
  },
});

This works just fine, but I'm creating a component that is responsible for it's own data and this is specific to 1 case The console tells me missing queryFn

How can you fetch data on a dynamic router with trpc?

Did you find this page helpful?