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?
N
Nick358d ago
v10 still has the react-query integration. Have you read the migration guide?
N
Nick358d ago
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.
J
josephbranch357d 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
More Posts
Mocking tRPC call w/ Playwright (Transform Error)I have a tRPC call that I would like to mock out for a Playwright E2E test. I've followed their doczod input validation from ts typeI imported a type using `import type { WebhookEvent } from "@clerk/nextjs/api";`. Is there a way to Looking to fix my tRPC implementationHi guys I am looking for some help implementing tRPC in my current project, I have 3 files that needExpression produces a union type that is too complex to representHi! I have started to encounter the above on error on pretty simple react components using trpc v10 Skipping useQuery with typescriptI'm wondering if there is a way to skip a query in a typescript friendly way? `rtk-query` has a handClerk 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. SocreateTRPCNext type errorHi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouterFull cache invalidation and timing problemI'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invaliUsing Next.JS + FastifyMy node environment is Node 18, powered by PNPM. What's wrong: I have a few requirements for my appError Handling vs Error FormattingI'm a bit confused from the docs about how I should be handling errors on the server. The Error HandNext.js body-parsing issueA thead to discuss this issue: https://github.com/trpc/trpc/issues/4243Cannot find module '@trpc/react-query/server' or its corresponding type declarations```ts import { createServerSideHelpers } from '@trpc/react-query/server' ``` This should work, righProcedure with generic input?Is there a way to define a procedure so that it takes input with type parameters, and returns outputDelete item {0: {json:{id: 12324}}}When i try to mutate/delete item with id i am geting this payload `{0: {json:{id: 12324}}}`, withou