how to pass trpc typescript between parent and children ?

I have data types when using useQuery but I want to also include these types inside the component that I am using here is an example

const { data , isLoading, refetch } = api.users.submission.useQuery(undefined, { refetchOnWindowFocus: false });

const { data , isLoading, refetch } = api.users.submission.useQuery(undefined, { refetchOnWindowFocus: false });

const { data , isLoading, refetch } = api.users.submission.useQuery(undefined, { refetchOnWindowFocus: false });

const { data , isLoading, refetch } = api.users.submission.useQuery(undefined, { refetchOnWindowFocus: false });

<Submissions refetch={refetch} data={data} />

<Submissions refetch={refetch} data={data} />

<Submissions refetch={refetch} data={data} />

<Submissions refetch={refetch} data={data} />

export default function Submission({refetch,data}) {}

export default function Submission({refetch,data}) {}

export default function Submission({refetch,data}) {}

export default function Submission({refetch,data}) {}

I want when I use data into Submission component I can see the data types that comes from useQuery, how can I achieve that ?

Liltripple_reid•4/17/24, 1:25 PM

you can use the RouterOutputs of the path you're querying

LLiltripple_reid you can use the RouterOutputs of the path you're querying

om3rOP•4/17/24, 1:26 PM

is there a tutorial for this or an example how can I do that ?

om3rOP•4/17/24, 1:31 PM

oh I see so I have to use it like this inside a variable and then use it ?

  const fils = data as RouterOutputs
  fils.users.submisison

  const fils = data as RouterOutputs
  fils.users.submisison

can I use it inside the props instead or its only inside a variable ?

Oom3r oh I see so I have to use it like this inside a variable and then use it ? ` c...

Circus•4/17/24, 3:32 PM

I don't really know what you're saying here, but what Liltripple was referring to was RouterOutputs, which would something like this

export type RouterOutputs = inferRouterOutputs<AppRouter>;export type RouterOutputs = inferRouterOutputs<AppRouter>;

and then define your type, which for you would be something like
export type Submission = RouterOutputs["users"]["submission"]export type Submission = RouterOutputs["users"]["submission"]

https://trpc.io/docs/client/vanilla/infer-types

Inferring Types | tRPC

It is often useful to access the types of your API within your clients. For this purpose, you are able to infer the types contained in your AppRouter.

CCircus I don't really know what you're saying here, but what Liltripple was referring t...

om3rOP•4/17/24, 3:36 PM

yes i got it working , its my first time knowning about output I think i have to check trpc course because there is still alot of information missing , thanks man

how to pass trpc typescript between parent and children ?

Similar Threads

Similar Threads

Similar Threads