🌟

【tRPC】NextJs & tRPC 【#９ tRPC Post create mutation】

2025/05/07に公開

Next.js

tRPC

tech

【#９ tRPC Post create mutation】

YouTube: https://youtu.be/YQL9NN_cJOM
https://youtu.be/YQL9NN_cJOM

今回は前回作成した、「posts」ルートの「create」を
クライアント側で使用できるように実装を進めていきます。

動画では「superjson」のコメントアウト部分を通常のコードに戻して、
さらに「_app.ts」の「hello」の部分を
「protectedProcedure」から「baseProcedure」に変更してあります。

src/app/layout.tsx

import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { ClerkProvider } from '@clerk/nextjs'
import { Toaster } from '@/components/ui/sonner'

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

import './globals.css'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <TRPCProvider>
          <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            <Toaster />
            {children}
          </body>
        </TRPCProvider>
      </html>
    </ClerkProvider>
  )
}

src/app/page.tsx

import {
  SignInButton,
  SignUpButton,
  SignedIn,
  SignedOut,
  UserButton,
} from '@clerk/nextjs'

import { ClientGreeting } from '@/components/client-greeting'
import { CreatePostButton } from '@/components/create-post-button'
import { HydrateClient, trpc } from '@/trpc/server'

export default async function Home() {
  void trpc.hello.prefetch({ text: 'tRPC' })

  return (
    <HydrateClient>
      <ClientGreeting />
      <SignedOut>
        <SignInButton mode="modal" />
        <SignUpButton mode="modal" />
      </SignedOut>
      <SignedIn>
        <UserButton />
        <CreatePostButton />
      </SignedIn>
    </HydrateClient>
  )
}

src/components/create-post-button.tsx

'use client'

import { Button } from '@/components/ui/button'
import { trpc } from '@/trpc/client'
import { toast } from 'sonner'

export const CreatePostButton = () => {
  const createPost = trpc.posts.create.useMutation({
    onSuccess: () => {
      toast.success('Post created')
    },
    onError: () => {
      toast.error('Something went wrong')
    },
  })

  return (
    <Button onClick={() => createPost.mutate({ title: 'Sample Title' })}>
      Post Create
    </Button>
  )
}

作成したポストのデータを確認する際には以下のコマンドで表示します。

npx drizzle-kit studio

【#９ tRPC Post create mutation】

Discussion