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

docs: add an example for preload in effect #345

Merged
merged 5 commits into from
Aug 30, 2022
Merged

docs: add an example for preload in effect #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92c4835
docs: add an example for preload in effects
koba04 Aug 30, 2022
fc4d4b8
Update pages/docs/prefetching.en-US.md
koba04 Aug 30, 2022
36b32f3
merge examples for inside React
koba04 Aug 30, 2022
62cc556
Update pages/docs/prefetching.en-US.md
koba04 Aug 30, 2022
f361ed8
apply a suggestion
koba04 Aug 30, 2022
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
13 changes: 11 additions & 2 deletions pages/docs/prefetching.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ It will prefetch the data when the HTML loads, even before JavaScript starts to

## Programmatically Prefetch

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.es-ES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ Se precargarán los datos cuando se cargue el HTML, incluso antes de que el Java

## Programmatically Prefetch

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.ja.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ JavaScriptのダウンロードが開始される前であっても、HTMLの読

## プログラムによるプリフェッチ

SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。`preload` は React の外からも呼ぶことが可能です。
SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。

`preload` は React の外からも呼ぶことが可能です。

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

またボタンをホバーしたタイミングでプリロードすることもできます
React のレンダリングツリー内においては, `preload` はイベントコールバックやエフェクトの中で利用可能です。

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// エフェクトの中でプリロードする
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* イベントコールバックの中でプリロードする */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.ko.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ HTML `<head>` 안에 넣기만 하면 됩니다. 쉽고 빠르며 네이티브

## 프로그래밍 방식으로 프리패치

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.pt-BR.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ Irá pré-obter os dados quando o HTML carregar, antes mesmo de iniciar a baixar

## Prefetching Programático

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@

## Программная предварительная выборка

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down
13 changes: 11 additions & 2 deletions pages/docs/prefetching.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@

## 手动预请求

SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.

You can call `preload` even outside of React.

```jsx
import { useState } from 'react'
Expand Down Expand Up @@ -43,15 +45,22 @@ export default function App() {
}
```

You can also preload it when hovering the button:
Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.

```jsx
function App({ userId }) {
const [show, setShow] = useState(false)

// preload in effects
useEffect(() => {
preload('/api/user?id=' + userId, fetcher)
}, [useId])

return (
<div>
<button
onClick={() => setShow(true)}
{/* preload in event callbacks */}
onHover={() => preload('/api/user?id=' + userId, fetcher)}
>
Show User
Expand Down