👻

【Better Auth】NextJs & tRPC 【#4 tRPC ＆ TanStack React Query 2】

2025/09/06に公開

【#4 tRPC ＆ TanStack React Query 2】

YouTube: https://youtu.be/rs6PP1IzGvg
https://youtu.be/rs6PP1IzGvg

今回はサンプルのAPIを使用して、
アプリ上に「hello」の文字を表示します。

npm i react-error-boundary

src/app/page.tsx

import { Suspense } from 'react'
import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

import { getQueryClient, trpc } from '@/trpc/server'

import { ClientGreeting } from './client-greeting'

export default async function Home() {
  const queryClient = getQueryClient()
  void queryClient.prefetchQuery(
    trpc.hello.queryOptions({
      text: 'hello',
    })
  )
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <Suspense fallback={<div>Loading...</div>}>
          <ClientGreeting />
        </Suspense>
      </ErrorBoundary>
    </HydrationBoundary>
  )
}

src/app/client-greeting.tsx

'use client'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useTRPC } from '@/trpc/client'

export function ClientGreeting() {
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.hello.queryOptions({ text: 'hello' }))

  return <div>{data.greeting}</div>
}

【#4 tRPC ＆ TanStack React Query 2】

Discussion