[Advent Calendar 2021][Day24]カレンダーの更新削除を実装する（４）

はじめに

Advent Calendar 2021のDay24。 カレンダー削除を実装していきます。

削除について

削除は特にバリデーションやビジネスロジックを実装しないのでActionはつかわずHasuraが用意してくれているものをそのまま使おうと思います。

graphql

mutation DeleteCalendarByPkMutation($id: Int!) {
  delete_calendars_by_pk(id: $id) {
    id
  }
}

コード生成します

yarn graphql-codegen

page

更新と同様にモーダルでOkが押されたら、削除を実行します。

const deleteCalendarResult = urql.useMutation(DeleteCalendarByPkMutationDocument);
const deleteState = reactive({
    openModal: ref(false),
    errorMessage: ref('')
})
const onDeleteCalendarOkClick = async () => {
    const { error } = await deleteCalendarResult.executeMutation({
        id: calendarId
    })
    if (error) {
        console.error(error)
        deleteState.errorMessage = error.message
        return
    }
    deleteState.openModal = false
    router.push('/')
    deleteState.errorMessage = ''
}

その他

  • CDでGoAppをデプロイする

まとめ

今回は、カレンダー削除機能を実装しました。 本当は、参加者の更新削除も実装したかったのですが、時間が足りませんでした。 明日で最後となります。 これまでの振り返りをしていきます。