T

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

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

Jjosephbranch

4/26/2023

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?

Nnlucas

4/26/2023

v10 still has the react-query integration. Have you read the migration guide? https://trpc.io/docs/migrate-from-v9-to-v10#trpcreact-query

Jjosephbranch

4/27/2023

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

Looking for more? Join the community!

T

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

T

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

Recommended 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 doc zod 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 need Expression 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 hand 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