[Advent Calendar 2021][Day24]カレンダーの更新削除を実装する(4)

undefined

はじめに

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

まとめ

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


クラウドアンドビルド株式会社

Cloud and Build, Inc.

クラウドアンドビルド株式会社は、Google Cloud パートナー企業です。

GCP 導入から開発・コンサルティングまでワンストップでお任せください。

お問い合わせ

デジタル変革を開始しますか?

お気軽にお問い合わせください。

contact_at_cloudandbuild.jp
所在地

〒104-0061

東京都中央区銀座2-14-8

ML20191021

Designed by Freepik
© 2020 Cloud and Build, Inc.