【tRPC】NextJs & tRPC 【#４ tRPC Leveraging Suspense】

【#４ tRPC Leveraging Suspense】

YouTube: https://youtu.be/jPXSoodxsig
https://youtu.be/jPXSoodxsig

https://trpc.io/docs/client/react/server-components#leveraging-suspense

今回はReactの「Suspense」を使用した
実装方法について解説していきます。

src/components/client-greeting.tsx

"use client";

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { trpc } from "@/trpc/client";

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

function ClientGreetingTrpc() {
  // const greeting = trpc.hello.useQuery({ text: "tRPC" });
  const [data] = trpc.hello.useSuspenseQuery({ text: "tRPC" });

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