【tRPC】NextJs & tRPC 【#１１ tRPC Inferring Types】

【#１１ tRPC Inferring Types】

YouTube: https://youtu.be/U8gDarxmWuc
https://youtu.be/U8gDarxmWuc

今回はtRPCで使用しているデータの型を
クライアント側でも使用できるように
実装を進めていきます。

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

例えば親コンポーネントで取得したデータを
子コンポーネントにpropsで渡すときに
型を設定する必要が出てきます。

src/components/post-list.tsx

'use client'

import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'

import { trpc } from '@/trpc/client'

import { PostListItem } from './post-item'

export const PostList = () => {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <PostListTrpc />
      </Suspense>
    </ErrorBoundary>
  )
}

function PostListTrpc() {
  const [data] = trpc.posts.getMany.useSuspenseQuery()

  return (
    <ul>
      {data.map((post) => (
        <PostListItem key={post.id} post={post} />
      ))}
    </ul>
  )
}

src/components/post-list-item.tsx

import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server'
import type { AppRouter } from '@/trpc/routers/_app'

type RouterInput = inferRouterInputs<AppRouter>
type RouterOutput = inferRouterOutputs<AppRouter>

interface PostListItemProps {
  post: RouterOutput['posts']['getMany'][number]
}

export const PostListItem = ({ post }: PostListItemProps) => {
  return <li>{post.title}</li>
}