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
Neto2y ago
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
Neto2y ago
but basically RouterOutputs[router][op1][op2][op3]
test_1
test_12y ago
thanks it worked
Want results from more Discord servers?
Add your server