@@ -33,7 +33,7 @@ function App () {
3333
3434* : 同じ [ キャッシュプロバイダー] ( /docs/cache ) のスコープ下では、 SWR フックに渡されます。もしキャッシュプロバイダーが無ければ、すべての SWR フックに渡されます。
3535
36- ## ミューテーションと POST リクエスト
36+ ## 楽観的な更新
3737
3838多くの場合、データにローカルミューテーションを適用することは、変更をより速く
3939感じさせるための良い方法です。データのリモートソースを待つ必要はありません。
@@ -53,32 +53,30 @@ function Profile () {
5353 < h1> My name is {data .name }.< / h1>
5454 < button onClick= {async () => {
5555 const newName = data .name .toUpperCase ()
56+ const user = { ... data, name: newName }
57+ const options = { optimisticData: user, rollbackOnError: true }
5658
5759 // 再検証をせずに直ちにローカルデータを更新します
58- mutate (' /api/user' ... data, name: newName }, false )
59-
60- // ソースを更新するために API にリクエストを送信します
61- await requestUpdateUsername (newName)
62-
60+ // ソースを更新するためにリクエストを送信します
6361 // ローカルデータが最新であることを確かめるために再検証（再取得）を起動します
64- mutate (' /api/user' )
62+ mutate (' /api/user' , updateFn (user), options);
6563 }}> Uppercase my name! < / button>
6664 < / div>
6765 )
6866}
6967```
7068
71- 上記の例でボタンをクリックすると、ローカルでクライアントデータを更新し、
72- リモートデータを修正するための POST リクエストを送信して、最新のデータを取得します（再検証）。
69+ > ** ` updateFn ` ** は、リモートミューテーションを処理するための promise 関数か非同期関数でなければならず、更新されたデータを返す必要があります。
7370
74- ただし、多くの POST API は更新されたデータを直接返すだけなので、再度再検証する必要はありません。
75- 「ローカルミューテート - リクエスト - 更新」の使用法を示す例を次に示します。
71+ ** 利用可能なオプション**
7672
77- ``` jsx
78- mutate (' /api/user' false ) // 再検証せずに変更するには、`false` を使用します
79- mutate (' /api/user' updateUser (newUser), false ) // `updateUser` は、このリクエストの Promise であり、
80- // 更新されたドキュメントを返します
81- ```
73+ ** ` optimisticData ` ** : クライアントキャッシュを直ちに更新するデータで、通常は 楽観的な UI で使用されます。
74+
75+ ** ` revalidate ` ** : 非同期更新が解決した後、キャッシュを再検証するかどうか。
76+
77+ ** ` populateCache ` ** : リモートミューテーションの結果をキャッシュに書き込むかどうか。
78+
79+ ** ` rollbackOnError ` ** : リモートミューテーションでエラーが発生した場合、キャッシュをロールバックするかどうか。
8280
8381## 現在のデータにもとづいたミューテート
8482
0 commit comments