docs: optimisticData can accept a function in v2 (#333)

pages/docs/mutation.en-US.md

@@ -68,9 +68,33 @@ function Profile () {
 
 > The **`updateFn`** should be a promise or asynchronous function to handle the remote mutation, it should return updated data.
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **Available Options**
 
-**`optimisticData`**: data to immediately update the client cache, usually used in optimistic UI.
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**: should the cache revalidate once the asynchronous update resolves.
 

pages/docs/mutation.es-ES.md

@@ -66,9 +66,33 @@ function Profile () {
 
 > The **`updateFn`** should be a promise or asynchronous function to handle the remote mutation, it should return updated data.
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **Available Options**
 
-**`optimisticData`**: data to immediately update the client cache, usually used in optimistic UI.
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**: should the cache revalidate once the asynchronous update resolves.
 

pages/docs/mutation.ja.md

@@ -68,9 +68,33 @@ function Profile () {
 
 > **`updateFn`** は、リモートミューテーションを処理するための promise 関数か非同期関数でなければならず、更新されたデータを返す必要があります。
 
+`optimisticData` に関数を渡すこともできます。
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **利用可能なオプション**
 
-**`optimisticData`**: クライアントキャッシュを直ちに更新するデータで、通常は 楽観的な UI で使用されます。
+**`optimisticData`**: クライアントキャッシュを直ちに更新するデータ、または現在の値を受け取り更新するデータを返す関数で、通常は 楽観的な UI で使用されます。
 
 **`revalidate`**: 非同期更新が解決した後、キャッシュを再検証するかどうか。
 

pages/docs/mutation.ko.md

@@ -68,9 +68,33 @@ function Profile () {
 
 > **`updateFn`**은 원격 뮤테이션을 다루기 위한 promise 또는 비동기 함수여야 합니다. 업데이트한 데이터를 반환해야 합니다.
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **사용 가능한 옵션**
 
-**`optimisticData`**: 클라이언트 캐시를 즉시 업데이트하기 위한 데이터. 일반적으로 낙관적인 UI에서 사용됩니다.
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**: 비동기 업데이트가 해소되면 캐시를 갱신합니다.
 

pages/docs/mutation.pt-BR.md

@@ -67,9 +67,33 @@ function Profile () {
 
 > **`updateFn`** deve ser uma promise ou uma função assíncrona para lidar com a mutação remota, e deve retornar os dados atualizados.
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **Opções Disponíveis**
 
-**`optimisticData`**: dados para serem atualizados imediatamente no cache do cliente, comumente usado para UI otimista.
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**: se o cache deve revalidar quando a atualização assíncrona resolve.
 

pages/docs/mutation.ru.md

@@ -64,9 +64,33 @@ function Profile () {
 
 > **`updateFn`** должена быть промисом или асинхронной функцией для обработки удаленной мутации, она должна возвращать обновленные данные.
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **Доступные опции**
 
-**`optimisticData`**: данные для немедленного обновления кеша клиента, обычно используемые в оптимистичном UI.
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**: должен ли кеш повторно проверяться после разрешения асинхронного обновления.
 

pages/docs/mutation.zh-CN.md

@@ -63,9 +63,33 @@ function Profile () {
 ```
 > **`updateFn`** 应该是一个 promise 或异步函数来处理远程更新，它应该返回更新后的数据。
 
+You can also pass a function to `optimisticData`.
+
+```jsx
+import useSWR, { useSWRConfig } from 'swr'
+
+function Profile () {
+  const { mutate } = useSWRConfig()
+  const { data } = useSWR('/api/user', fetcher)
+
+  return (
+    <div>
+      <h1>My name is {data.name}.</h1>
+      <button onClick={async () => {
+        const newName = data.name.toUpperCase()
+        mutate('/api/user', updateUserName(newName), {
+            optimisticData: user => ({ ...data, name: newName }),
+            rollbackOnError: true
+        });
+      }}>Uppercase my name!</button>
+    </div>
+  )
+}
+```
+
 **Available Options**
 
-**`optimisticData`**：立即更新客户端缓存的数据，通常用于 optimistic UI。
+**`optimisticData`**: data to immediately update the client cache, or a function that receives current data and returns the new client cache data, usually used in optimistic UI.
 
 **`revalidate`**：一旦完成异步更新，缓存是否重新请求。