Theo's Typesafe Cult•2y ago

How do I pass down the inferred type returned from tRPC data via react props?

I have a react app with tRPC. I am doing a query to fetch data of objects. But the child component <UserCard> does not have the type of the object in .map and the parent does . Can I pass down the type of the prop somehow so I can put it in the interface of IProps?

import { FC } from "react"
import UserCard from './components/UserCard'
import { trpc } from './TrpcProvider'

export const App: FC = () => {

    const fetchUsers = trpc.getUsersAsync.useQuery()

    if (fetchUsers.isLoading) return <h1>LOADING ...</h1>
    if (fetchUsers.isError) return <h1>ERROR</h1>

    return (
            <div className="users-container">

                {
                    fetchUsers.data.map(user => <UserCard key={user.id} user={user} getUsers={fetchUsers.refetch} />)
                }

            </div>
    )
}

import { FC } from "react"
import UserCard from './components/UserCard'
import { trpc } from './TrpcProvider'

export const App: FC = () => {

    const fetchUsers = trpc.getUsersAsync.useQuery()

    if (fetchUsers.isLoading) return <h1>LOADING ...</h1>
    if (fetchUsers.isError) return <h1>ERROR</h1>

    return (
            <div className="users-container">

                {
                    fetchUsers.data.map(user => <UserCard key={user.id} user={user} getUsers={fetchUsers.refetch} />)
                }

            </div>
    )
}

3 Replies

Neto•2y ago

https://github.com/t3-oss/create-t3-app/blob/next/cli/template/extras/src/utils/api.ts#L55-L67

GitHub

create-t3-app/api.ts at next · t3-oss/create-t3-app

The best way to start a full-stack, typesafe Next.js app - create-t3-app/api.ts at next · t3-oss/create-t3-app

Neto•2y ago

but basically RouterOutputs[router][op1][op2][op3]

test_1OP•2y ago

thanks it worked

Gaming

Programming

How do I pass down the inferred type returned from tRPC data via react props?