【Better Auth】NextJs & tRPC 【#1６ Create Post Mutation】

【#1６ Create Post Mutation】

YouTube: https://youtu.be/LifEqwuNM48
https://youtu.be/LifEqwuNM48

今回はポスト作成用のミューテーションを実装します。

まずは、「postInsertSchema」が「content」以外の内容も含みますので、
「pick」を使用して「content」のみになるように修正します。

src/db/schema.ts

import { nanoid } from 'nanoid'
import { pgTable, text, timestamp, boolean } from 'drizzle-orm/pg-core'
import { createInsertSchema } from 'drizzle-zod'

export const user = pgTable('user', {
  id: text('id').primaryKey(),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  emailVerified: boolean('email_verified')
    .$defaultFn(() => false)
    .notNull(),
  image: text('image'),
  createdAt: timestamp('created_at')
    .$defaultFn(() => /* @__PURE__ */ new Date())
    .notNull(),
  updatedAt: timestamp('updated_at')
    .$defaultFn(() => /* @__PURE__ */ new Date())
    .notNull(),
})

export const session = pgTable('session', {
  id: text('id').primaryKey(),
  expiresAt: timestamp('expires_at').notNull(),
  token: text('token').notNull().unique(),
  createdAt: timestamp('created_at').notNull(),
  updatedAt: timestamp('updated_at').notNull(),
  ipAddress: text('ip_address'),
  userAgent: text('user_agent'),
  userId: text('user_id')
    .notNull()
    .references(() => user.id, { onDelete: 'cascade' }),
})

export const account = pgTable('account', {
  id: text('id').primaryKey(),
  accountId: text('account_id').notNull(),
  providerId: text('provider_id').notNull(),
  userId: text('user_id')
    .notNull()
    .references(() => user.id, { onDelete: 'cascade' }),
  accessToken: text('access_token'),
  refreshToken: text('refresh_token'),
  idToken: text('id_token'),
  accessTokenExpiresAt: timestamp('access_token_expires_at'),
  refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
  scope: text('scope'),
  password: text('password'),
  createdAt: timestamp('created_at').notNull(),
  updatedAt: timestamp('updated_at').notNull(),
})

export const verification = pgTable('verification', {
  id: text('id').primaryKey(),
  identifier: text('identifier').notNull(),
  value: text('value').notNull(),
  expiresAt: timestamp('expires_at').notNull(),
  createdAt: timestamp('created_at').$defaultFn(
    () => /* @__PURE__ */ new Date()
  ),
  updatedAt: timestamp('updated_at').$defaultFn(
    () => /* @__PURE__ */ new Date()
  ),
})

export const posts = pgTable('posts', {
  id: text('id')
    .primaryKey()
    .$defaultFn(() => nanoid()),
  userId: text('user_id')
    .notNull()
    .references(() => user.id, { onDelete: 'cascade' }),
  content: text('content').notNull(),
  createdAt: timestamp('created_at').notNull().defaultNow(),
  updatedAt: timestamp('updated_at').notNull().defaultNow(),
})

export const postInsertSchema = createInsertSchema(posts).pick({
  content: true,
})

もし、ポストの作成でエラーが出る場合は、
ブラウザを何度かリロードしてみてください。

src/app/client-greeting.tsx

'use client'
import { useRouter } from 'next/navigation'
import {
  useMutation,
  useQueryClient,
  useSuspenseQuery,
} from '@tanstack/react-query'

import { useTRPC } from '@/trpc/client'
import { authClient } from '@/lib/auth-client'

import { Button } from '@/components/ui/button'

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

  const {
    data: session,
    isPending, //loading state
    error, //error object
    refetch, //refetch the session
  } = authClient.useSession()

  const onLogout = async () => {
    await authClient.signOut({
      fetchOptions: {
        onSuccess: () => {
          router.replace('/sign-in')
          router.refresh()
        },
      },
    })
  }

  const createPost = useMutation(
    trpc.createPost.mutationOptions({
      onSuccess: async () => {
        //リストの更新処理例
        // await queryClient.invalidateQueries(
        //   trpc.getPost.queryOptions()
        // )
        alert('Post created')
      },
      onError: (error) => {
        console.log(error.message)
      },
    })
  )

  const onSubmit = () => {
    createPost.mutate({ content: 'test content' })
  }

  return (
    <>
      <div>{data.greeting}</div>
      {isPending ? (
        <p>Loading...</p>
      ) : session ? (
        <p>Username: {JSON.stringify(session.user.name, null, 2)}</p>
      ) : (
        <p>null</p>
      )}
      <Button onClick={onLogout}>Logout</Button>
      <Button onClick={onSubmit}>Create Post</Button>
    </>
  )
}