[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をデプロイする

まとめ

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