Skip to content

Commit be07f87

Browse files
koba04koba04
authored
docs: optimisticData can accept a function in v2 (#333)
1 parent 896b0c5 commit be07f87

File tree

7 files changed

+175
-7
lines changed

7 files changed

+175
-7
lines changed

‎pages/docs/mutation.en-US.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,33 @@ function Profile () {
6868

6969
> The **`updateFn`** should be a promise or asynchronous function to handle the remote mutation, it should return updated data.
7070
71+
You can also pass a function to `optimisticData`.
72+
73+
```jsx
74+
import useSWR, { useSWRConfig } from 'swr'
75+
76+
function Profile () {
77+
const { mutate } = useSWRConfig()
78+
const { data } = useSWR('/api/user', fetcher)
79+
80+
return (
81+
<div>
82+
<h1>My name is {data.name}.</h1>
83+
<button onClick={async () => {
84+
const newName = data.name.toUpperCase()
85+
mutate('/api/user', updateUserName(newName), {
86+
optimisticData: user => ({ ...data, name: newName }),
87+
rollbackOnError: true
88+
});
89+
}}>Uppercase my name!</button>
90+
</div>
91+
)
92+
}
93+
```
94+
7195
**Available Options**
7296

73-
**`optimisticData`**: data to immediately update the client cache, usually used in optimistic UI.
97+
**`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.
7498

7599
**`revalidate`**: should the cache revalidate once the asynchronous update resolves.
76100

‎pages/docs/mutation.es-ES.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,33 @@ function Profile () {
6666

6767
> The **`updateFn`** should be a promise or asynchronous function to handle the remote mutation, it should return updated data.
6868
69+
You can also pass a function to `optimisticData`.
70+
71+
```jsx
72+
import useSWR, { useSWRConfig } from 'swr'
73+
74+
function Profile () {
75+
const { mutate } = useSWRConfig()
76+
const { data } = useSWR('/api/user', fetcher)
77+
78+
return (
79+
<div>
80+
<h1>My name is {data.name}.</h1>
81+
<button onClick={async () => {
82+
const newName = data.name.toUpperCase()
83+
mutate('/api/user', updateUserName(newName), {
84+
optimisticData: user => ({ ...data, name: newName }),
85+
rollbackOnError: true
86+
});
87+
}}>Uppercase my name!</button>
88+
</div>
89+
)
90+
}
91+
```
92+
6993
**Available Options**
7094

71-
**`optimisticData`**: data to immediately update the client cache, usually used in optimistic UI.
95+
**`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.
7296

7397
**`revalidate`**: should the cache revalidate once the asynchronous update resolves.
7498

‎pages/docs/mutation.ja.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,33 @@ function Profile () {
6868

6969
> **`updateFn`** は、リモートミューテーションを処理するための promise 関数か非同期関数でなければならず、更新されたデータを返す必要があります。
7070
71+
`optimisticData` に関数を渡すこともできます。
72+
73+
```jsx
74+
import useSWR, { useSWRConfig } from 'swr'
75+
76+
function Profile () {
77+
const { mutate } = useSWRConfig()
78+
const { data } = useSWR('/api/user', fetcher)
79+
80+
return (
81+
<div>
82+
<h1>My name is {data.name}.</h1>
83+
<button onClick={async () => {
84+
const newName = data.name.toUpperCase()
85+
mutate('/api/user', updateUserName(newName), {
86+
optimisticData: user => ({ ...data, name: newName }),
87+
rollbackOnError: true
88+
});
89+
}}>Uppercase my name!</button>
90+
</div>
91+
)
92+
}
93+
```
94+
7195
**利用可能なオプション**
7296

73-
**`optimisticData`**: クライアントキャッシュを直ちに更新するデータで、通常は 楽観的な UI で使用されます。
97+
**`optimisticData`**: クライアントキャッシュを直ちに更新するデータ、または現在の値を受け取り更新するデータを返す関数で、通常は 楽観的な UI で使用されます。
7498

7599
**`revalidate`**: 非同期更新が解決した後、キャッシュを再検証するかどうか。
76100

‎pages/docs/mutation.ko.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,33 @@ function Profile () {
6868

6969
> **`updateFn`**은 원격 뮤테이션을 다루기 위한 promise 또는 비동기 함수여야 합니다. 업데이트한 데이터를 반환해야 합니다.
7070
71+
You can also pass a function to `optimisticData`.
72+
73+
```jsx
74+
import useSWR, { useSWRConfig } from 'swr'
75+
76+
function Profile () {
77+
const { mutate } = useSWRConfig()
78+
const { data } = useSWR('/api/user', fetcher)
79+
80+
return (
81+
<div>
82+
<h1>My name is {data.name}.</h1>
83+
<button onClick={async () => {
84+
const newName = data.name.toUpperCase()
85+
mutate('/api/user', updateUserName(newName), {
86+
optimisticData: user => ({ ...data, name: newName }),
87+
rollbackOnError: true
88+
});
89+
}}>Uppercase my name!</button>
90+
</div>
91+
)
92+
}
93+
```
94+
7195
**사용 가능한 옵션**
7296

73-
**`optimisticData`**: 클라이언트 캐시를 즉시 업데이트하기 위한 데이터. 일반적으로 낙관적인 UI에서 사용됩니다.
97+
**`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.
7498

7599
**`revalidate`**: 비동기 업데이트가 해소되면 캐시를 갱신합니다.
76100

‎pages/docs/mutation.pt-BR.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,33 @@ function Profile () {
6767

6868
> **`updateFn`** deve ser uma promise ou uma função assíncrona para lidar com a mutação remota, e deve retornar os dados atualizados.
6969
70+
You can also pass a function to `optimisticData`.
71+
72+
```jsx
73+
import useSWR, { useSWRConfig } from 'swr'
74+
75+
function Profile () {
76+
const { mutate } = useSWRConfig()
77+
const { data } = useSWR('/api/user', fetcher)
78+
79+
return (
80+
<div>
81+
<h1>My name is {data.name}.</h1>
82+
<button onClick={async () => {
83+
const newName = data.name.toUpperCase()
84+
mutate('/api/user', updateUserName(newName), {
85+
optimisticData: user => ({ ...data, name: newName }),
86+
rollbackOnError: true
87+
});
88+
}}>Uppercase my name!</button>
89+
</div>
90+
)
91+
}
92+
```
93+
7094
**Opções Disponíveis**
7195

72-
**`optimisticData`**: dados para serem atualizados imediatamente no cache do cliente, comumente usado para UI otimista.
96+
**`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.
7397

7498
**`revalidate`**: se o cache deve revalidar quando a atualização assíncrona resolve.
7599

‎pages/docs/mutation.ru.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,33 @@ function Profile () {
6464

6565
> **`updateFn`** должена быть промисом или асинхронной функцией для обработки удаленной мутации, она должна возвращать обновленные данные.
6666
67+
You can also pass a function to `optimisticData`.
68+
69+
```jsx
70+
import useSWR, { useSWRConfig } from 'swr'
71+
72+
function Profile () {
73+
const { mutate } = useSWRConfig()
74+
const { data } = useSWR('/api/user', fetcher)
75+
76+
return (
77+
<div>
78+
<h1>My name is {data.name}.</h1>
79+
<button onClick={async () => {
80+
const newName = data.name.toUpperCase()
81+
mutate('/api/user', updateUserName(newName), {
82+
optimisticData: user => ({ ...data, name: newName }),
83+
rollbackOnError: true
84+
});
85+
}}>Uppercase my name!</button>
86+
</div>
87+
)
88+
}
89+
```
90+
6791
**Доступные опции**
6892

69-
**`optimisticData`**: данные для немедленного обновления кеша клиента, обычно используемые в оптимистичном UI.
93+
**`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.
7094

7195
**`revalidate`**: должен ли кеш повторно проверяться после разрешения асинхронного обновления.
7296

‎pages/docs/mutation.zh-CN.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,33 @@ function Profile () {
6363
```
6464
> **`updateFn`** 应该是一个 promise 或异步函数来处理远程更新，它应该返回更新后的数据。
6565
66+
You can also pass a function to `optimisticData`.
67+
68+
```jsx
69+
import useSWR, { useSWRConfig } from 'swr'
70+
71+
function Profile () {
72+
const { mutate } = useSWRConfig()
73+
const { data } = useSWR('/api/user', fetcher)
74+
75+
return (
76+
<div>
77+
<h1>My name is {data.name}.</h1>
78+
<button onClick={async () => {
79+
const newName = data.name.toUpperCase()
80+
mutate('/api/user', updateUserName(newName), {
81+
optimisticData: user => ({ ...data, name: newName }),
82+
rollbackOnError: true
83+
});
84+
}}>Uppercase my name!</button>
85+
</div>
86+
)
87+
}
88+
```
89+
6690
**Available Options**
6791

68-
**`optimisticData`**：立即更新客户端缓存的数据，通常用于 optimistic UI。
92+
**`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.
6993

7094
**`revalidate`**：一旦完成异步更新，缓存是否重新请求。
7195

0 commit comments

Comments
 (0)