useMutation (apollo)
docs
#wip
GPT-4.icon
2. 基本の使い方
code:tsx
import { gql, useMutation } from '@apollo/client';
// Mutationを定義
const INCREMENT_COUNTER = gql`
mutation IncrementCounter {
currentValue
}
`;
// コンポーネント内で使う
function MyComponent() {
const mutateFunction, { data, loading, error } = useMutation(INCREMENT_COUNTER);
// mutateFunction() を呼ぶとサーバーにMutationが送られる！
}
mutateFunction を手動で呼んで実行する（useQueryみたいに自動では実行されない）
実行結果やエラーは { data, loading, error } で管理できる
オプションでカスタマイズできる
例えば、
code:tsx
useMutation(ADD_TODO, {
variables: { type: "placeholder" }, // デフォルト変数
onCompleted: (data) => { console.log('Success', data); },
onError: (error) => { console.error('Error', error); },
});
みたいに成功時/エラー時のコールバックとか、
最初から変数を設定とかもできる。
5Mutation後にどうキャッシュを更新するか
Mutationでサーバーは更新されるけど、クライアント側（Apollo ClientのCache）も手動で更新しないと、画面に反映されないことがある。
方法は2つある！
(A) refetchQueries (apollo) を使う（簡単）
特定のクエリをもう一度実行してキャッシュを再取得する
code:tsx
useMutation(ADD_TODO, {
refetchQueries: 'GetTodos',
});
ADD_TODOというmutationの実行後に、GetTodosというqueryを実行している
https://www.apollographql.com/docs/react/data/mutations#the-update-function
(B) update関数を使う（本格的）
code:tsx
useMutation(ADD_TODO, {
update(cache, { data: { addTodo } }) {
cache.modify({
fields: {
todos(existingTodos = []) {
const newTodoRef = cache.writeFragment({
data: addTodo,
fragment: gql`
fragment NewTodo on Todo {
id
type
}
`,
});
return ...existingTodos, newTodoRef;
}
}
});
}
});
直接キャッシュ操作して、リスト（配列）に新しいTodoを手動で追加する。
cache.modify とか cache.writeFragment を駆使する。
QueryClient (tanstack)を更新するみたいなノリねmrsekut.icon
6. その他小技
reset()：useMutationから得たreset関数を使えば、mutation状態（errorとかdataとか）をリセットできる
optimisticResponse：Mutationの結果を待たずに「こうなるだろう」って仮想結果を先にキャッシュに入れてサクサク感を出す（楽観的UI）
onQueryUpdated：updateで直せなかった部分を最後にもう一回refetchするための追加手段