データ変更のためのuseMutation
useMutation(MUTATION)、mutate()、キャッシュ更新戦略、楽観的レスポンス
「データ変更のためのuseMutation」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ミューテーションによるデータの変更
クエリはデータを読み取り、ミューテーションはデータを変更します（作成、更新、削除）。useMutationコンポーザブルはGraphQLミューテーションを実行し、準備ができたときに呼び出せるmutate関数を提供します。
useMutationの基本
ミューテーションドキュメントを渡します。useQueryとは異なり、すぐには実行されません。イベント発生時に呼び出すmutate関数を返します。
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))ミューテーションを実行する
フォームの送信などのイベントハンドラーからmutate()を呼び出します。結果で解決される Promise が返されます。
async function submit() {
await mutate()
}変数を渡す
mutateに変数のオブジェクトを渡します。ミューテーションドキュメントでは、$構文を使って変数を宣言します。
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}ローディングとエラー
useMutationはloadingとerrorの ref も返すため、送信ボタンを無効にしたり、失敗を表示したりできます。
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>成功時の処理
ミューテーションが成功するとonDoneフックが実行されます。フォームをクリアしたり、トーストを表示したり、別のページへ移動したりできます。
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})キャッシュを更新する
ミューテーションの後は、Apollo のキャッシュが古くなっている可能性があります。update関数を使うとキャッシュを直接変更できるため、再取得なしで UI に変更を反映できます。
useMutation(ADD_POST, {
update(cache, { data }) {
const existing = cache.readQuery({ query: GET_POSTS })
cache.writeQuery({
query: GET_POSTS,
data: { posts: [...existing.posts, data.addPost] }
})
}
})update が refetch より優れている理由
キャッシュのupdateを使うと、余分なネットワーク通信を避けられます。すべてのuseQueryが読み取るキャッシュに新しい項目を書き込むため、その項目がすぐに表示されます。
代わりにクエリを再取得する
手動でのキャッシュ編集が煩雑すぎる場合は、refetchQueriesを使って、ミューテーションの完了後に特定のクエリを再実行します。
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})楽観的レスポンス
optimisticResponseを使うと、成功を前提として、サーバーが応答する前に UI を更新できます。リクエストが失敗した場合は、Apollo が自動的に変更を元に戻します。
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)楽観的 UI が重要な理由
楽観的な更新により、アプリが瞬時に反応するように感じられます。ユーザーは自分の操作がすぐに反映されたことを確認できます。updateと組み合わせると、サーバーから実際のデータが届いたときに、一時的な項目が置き換えられます。
理解度チェック
ミューテーションについての知識を確認しましょう。
まとめ
ミューテーションについて学びました。
- useMutation は、イベント発生時に呼び出す mutate 関数を返します。
- mutate() に変数を渡し、loading/error と onDone を使用します。
- update 関数はミューテーション後にキャッシュを編集し、再取得を避けます。
- optimisticResponse は UI をすぐに更新し、失敗時には自動的に元に戻します。
よくある質問
「データ変更のためのuseMutation」レッスンは無料ですか？
はい。「データ変更のためのuseMutation」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「データ変更のためのuseMutation」で何を学びますか？
useMutation(MUTATION)、mutate()、キャッシュ更新戦略、楽観的レスポンス ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「データ変更のためのuseMutation」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue 3でのApollo Client設定
- データ取得のためのuseQuery
- データ変更のためのuseMutation
- useSubscriptionによるリアルタイム購読