Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

encourage to use inline fetcher for better typescript support #524

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

encourage to use inline fetcher for better typescript support #524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 14 additions & 22 deletions pages/docs/mutation.en-US.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,21 +130,17 @@ Also, this hook doesn’t share states with other `useSWRMutation` hooks.
```tsx
import useSWRMutation from 'swr/mutation'

// Fetcher implementation.
// The extra argument will be passed via the `arg` property of the 2nd parameter.
// In the example below, `arg` will be `'my_token'`
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// A useSWR + mutate like API, but it will not start the request automatically.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// Fetcher implementation.
// The extra argument will be passed via the `arg` property of the 2nd parameter.
// In the example below, `arg` will be `'my_token'`
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// Trigger `updateUser` with a specific argument.
Expand Down Expand Up @@ -181,22 +177,18 @@ function Profile() {
```tsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string }}) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* options */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
disabled={isMutating}
onClick={async () => {
try {
const result = await trigger({ username: 'johndoe' }, /* options */)
await trigger({ username: 'johndoe' }, /* options */)
} catch (e) {
// error handling
}
Expand Down
36 changes: 14 additions & 22 deletions pages/docs/mutation.es-ES.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,21 +131,17 @@ Also, this hook doesn’t share states with other `useSWRMutation` hooks.
```tsx
import useSWRMutation from 'swr/mutation'

// Fetcher implementation.
// The extra argument will be passed via the `arg` property of the 2nd parameter.
// In the example below, `arg` will be `'my_token'`
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// A useSWR + mutate like API, but it will not start the request automatically.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// Fetcher implementation.
// The extra argument will be passed via the `arg` property of the 2nd parameter.
// In the example below, `arg` will be `'my_token'`
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// Trigger `updateUser` with a specific argument.
Expand Down Expand Up @@ -182,22 +178,18 @@ function Profile() {
```tsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string } }) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* options */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
disabled={isMutating}
onClick={async () => {
try {
const result = await trigger({ username: 'johndoe' }, /* options */)
await trigger({ username: 'johndoe' }, /* options */)
} catch (e) {
// error handling
}
Expand Down
36 changes: 14 additions & 22 deletions pages/docs/mutation.fr-FR.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,21 +128,17 @@ Aussi, ce hook ne partage pas les états avec d'autres hooks `useSWRMutation`.
```tsx
import useSWRMutation from 'swr/mutation'

// Implementation de Fetcher.
// L'argument supplémentaire sera passé via la propriété `arg` du 2ème paramètre.
// Dans l'exemple ci-dessous, `arg` sera `'my_token'`
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// Une API comme `useSWR` + mutate, mais elle ne déclenchera pas la requête automatiquement.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// Implementation de Fetcher.
// L'argument supplémentaire sera passé via la propriété `arg` du 2ème paramètre.
// Dans l'exemple ci-dessous, `arg` sera `'my_token'`
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// Déclange `updateUser` avec un argument spécifique.
Expand Down Expand Up @@ -179,15 +175,11 @@ function Profile() {
```tsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string }}) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* options */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
Expand All @@ -200,7 +192,7 @@ function App() {
}
}}
>
Creation d'utilisateur
Create User
</button>
)
}
Expand Down
36 changes: 14 additions & 22 deletions pages/docs/mutation.ja.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,21 +132,17 @@ try {
```tsx
import useSWRMutation from 'swr/mutation'

// フェッチャーの実装
// 追加の引数は第二引数の `arg` プロパティとして渡されます
// 下記の例では、`arg` は `'my_token'` となります
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// useSWR と mutate を組み合わせたような API ですが、リクエストを自動的に開始しません
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// フェッチャーの実装
// 追加の引数は第二引数の `arg` プロパティとして渡されます
// 下記の例では、`arg` は `'my_token'` となります
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// `updateUser` を指定した引数と一緒に実行します
Expand Down Expand Up @@ -183,22 +179,18 @@ function Profile() {
```tsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string } }) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* options */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
disabled={isMutating}
onClick={async () => {
try {
const result = await trigger({ username: 'johndoe' }, /* options */)
await trigger({ username: 'johndoe' }, /* options */)
} catch (e) {
// エラーハンドリング
}
Expand Down
36 changes: 14 additions & 22 deletions pages/docs/mutation.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,21 +130,17 @@ SWR은 remote mutation을 위한 hook으로 `useSWRMutation`을 제공합니다.
```tsx
import useSWRMutation from 'swr/mutation'

// Fetcher 구현.
// 추가 인수는 두 번째 매개변수의 `arg` 속성을 통해 전달됩니다.
// 아래 예제에서 `arg`는 `'my_token'`이 됩니다.
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// useSWR + mutate 같은 API를 사용하지만, 자동으로 요청을 시작하지는 않습니다.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// Fetcher 구현.
// 추가 인수는 두 번째 매개변수의 `arg` 속성을 통해 전달됩니다.
// 아래 예제에서 `arg`는 `'my_token'`이 됩니다.
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// 특정 인수를 사용하여 `updateUser`를 트리거 합니다.
Expand Down Expand Up @@ -181,22 +177,18 @@ function Profile() {
```tsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string } }) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* options */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
disabled={isMutating}
onClick={async () => {
try {
const result = await trigger({ username: 'johndoe' }, /* options */)
await trigger({ username: 'johndoe' }, /* options */)
} catch (e) {
// 에러 핸들링
}
Expand Down
40 changes: 16 additions & 24 deletions pages/docs/mutation.pt-BR.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,26 +128,22 @@ Também, esse hook não compartilha estado com outros hooks `useSWRMutation`.
```tsx
import useSWRMutation from 'swr/mutation'

// Implementação do fetcher.
// O argumento extra será passado via propriedade `arg` do segundo parâmetro.
// No exemplo abaixo, `arg` será `my_token`
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}

function Profile() {
// Uma API como useSWR + mutate, mas não irá começar o request automaticamente.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
const { trigger } = useSWRMutation(
'/api/user',
(url, { arg }: { arg: string }) =>
// Implementação do fetcher.
// O argumento extra será passado via propriedade `arg` do segundo parâmetro.
// No exemplo abaixo, `arg` será `my_token`
fetch(url, { headers: { Authorization: `Bearer ${arg}` }}),
options
)

return <button onClick={() => {
// Dispara `updateUser` com um argumento específico
trigger('my_token')
}}>Atualizar usuário</button>
}}>Update User</button>
}
```

Expand Down Expand Up @@ -179,28 +175,24 @@ function Profile() {
```jsx
import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }: { arg: { username: string } }) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(arg)
}).then(res => res.json())
}

function App() {
const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest, /* opções */)
const { trigger, isMutating } = useSWRMutation(
'/api/user',
() => fetch(url, { method: 'POST', body: JSON.stringify(arg) }).then(res => res.json())
)

return (
<button
disabled={isMutating}
onClick={async () => {
try {
const result = await trigger({ username: 'johndoe' }, /* opções */)
await trigger({ username: 'johndoe' }, /* options */)
} catch (e) {
// lidando com erros
}
}}
>
Criar Usuário
Create User
</button>
)
}
Expand Down
Loading