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: improve Gettting Started examples #566

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

docs: improve Gettting Started examples #566

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
32 changes: 16 additions & 16 deletions pages/docs/getting-started.en-US.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ Then you can import `useSWR` and start using it inside any function components:
```jsx
import useSWR from 'swr'

function Profile () {
const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
function Profile ({ userId }) {
const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)

if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
Expand Down Expand Up @@ -78,8 +78,8 @@ function useUser (id) {
And use it in your components:

```jsx
function Avatar ({ id }) {
const { user, isLoading, isError } = useUser(id)
function Avatar ({ userId }) {
const { user, isLoading, isError } = useUser(userId)

if (isLoading) return <Spinner />
if (isError) return <Error />
Expand All @@ -105,15 +105,15 @@ Traditionally, we fetch data once using `useEffect` in the top level component,
```jsx {7-11,17,18,27}
// page component

function Page () {
function Page ({ userId }) {
const [user, setUser] = useState(null)

// fetch data
useEffect(() => {
fetch('/api/user')
fetch(`/api/user/${userId}`)
.then(res => res.json())
.then(data => setUser(data))
}, [])
}, [userId])

// global loading state
if (!user) return <Spinner/>
Expand Down Expand Up @@ -153,30 +153,30 @@ SWR solves the problem perfectly. With the `useUser` hook we just created, the c
```jsx {20,26}
// page component

function Page () {
function Page ({ userId }) {
return <div>
<Navbar />
<Content />
<Navbar userId={userId} />
<Content userId={userId} />
</div>
}

// child components

function Navbar () {
function Navbar ({ userId }) {
return <div>
...
<Avatar />
<Avatar userId={userId} />
</div>
}

function Content () {
const { user, isLoading } = useUser()
function Content ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <h1>Welcome back, {user.name}</h1>
}

function Avatar () {
const { user, isLoading } = useUser()
function Avatar ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}
Expand Down
36 changes: 18 additions & 18 deletions pages/docs/getting-started.es-ES.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ Luego puede importar `useSWR` y empezar a usarlo dentro de cualquier componente
```jsx
import useSWR from "swr"

function Profile () {
const { data, error, isLoading } = useSWR("/api/user/123", fetcher)
function Profile ({ userId }) {
const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)

if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
Expand Down Expand Up @@ -112,15 +112,15 @@ a través de props (fíjate que por ahora no manejamos el estado de error):
```jsx {7-11,17,18,27}
// componente de la página

function Page() {
function Page ({ userId }) {
const [user, setUser] = useState(null)

// obtener datos
useEffect(() => {
fetch("/api/user")
.then((res) => res.json())
.then((data) => setUser(data))
}, [])
fetch(`/api/user/${userId}`)
.then(res => res.json())
.then(data => setUser(data))
}, [userId])

// estado de carga global
if (!user) return <Spinner />
Expand Down Expand Up @@ -166,31 +166,31 @@ SWR resuelve el problema perfectamente, Con el hook `useUser` que acabamos de cr

// componente de la página

function Page () {
function Page ({ userId }) {
return <div>
<Navbar />
<Content />
<Navbar userId={userId} />
<Content userId={userId} />
</div>
}

// componentes hijos

function Navbar() {
return <div>
function Navbar ({ userId }) {
return <div>
...
<Avatar />
<Avatar userId={userId} />
</div>
}

function Content() {
const { user, isLoading } = useUser()
function Content ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <h1>Welcome back, {user.name}</h1>
}

function Avatar() {
const { user, isLoading } = useUser()
if(isLoading) return <Spinner />
function Avatar ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}

Expand Down
30 changes: 15 additions & 15 deletions pages/docs/getting-started.fr-FR.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ Ensuite, vous pouvez importer `useSWR` et commencer à l'utiliser dans n'importe
```jsx
import useSWR from 'swr'

function Profile () {
const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
function Profile ({ userId }) {
const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)

if (error) return <div>échec du chargement</div>
if (isLoading) return <div>chargement...</div>
Expand Down Expand Up @@ -102,15 +102,15 @@ D'habitude, on récupére les données une fois en utilisant `useEffect` dans le
```jsx {7-11,17,18,27}
// Composant Page

function Page () {
function Page ({ userId }) {
const [user, setUser] = useState(null)

// Récupération des données
useEffect(() => {
fetch('/api/user')
fetch(`/api/user/${userId}`)
.then(res => res.json())
.then(data => setUser(data))
}, [])
}, [userId])

// Etat de chargement global
if (!user) return <Spinner/>
Expand Down Expand Up @@ -150,30 +150,30 @@ SWR résout parfaitement le problème. Avec le hook `useUser` que nous venons de
```jsx {20,26}
// Composant Page

function Page () {
function Page ({ userId }) {
return <div>
<Navbar />
<Content />
<Navbar userId={userId} />
<Content userId={userId} />
</div>
}

// Composants enfants

function Navbar () {
function Navbar ({ userId }) {
return <div>
...
<Avatar />
<Avatar userId={userId} />
</div>
}

function Content () {
const { user, isLoading } = useUser()
function Content ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <h1>Bon retour, {user.name}</h1>
return <h1>Welcome back, {user.name}</h1>
}

function Avatar () {
const { user, isLoading } = useUser()
function Avatar ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}
Expand Down
28 changes: 14 additions & 14 deletions pages/docs/getting-started.ja.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
```jsx
import useSWR from 'swr'

function Profile () {
const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
function Profile ({ userId }) {
const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)

if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
Expand Down Expand Up @@ -103,15 +103,15 @@ import { Welcome } from 'components/diagrams/welcome'
```jsx {7-11,17,18,27}
// ページコンポーネント

function Page () {
function Page ({ userId }) {
const [user, setUser] = useState(null)

// データの取得
useEffect(() => {
fetch('/api/user')
fetch(`/api/user/${userId}`)
.then(res => res.json())
.then(data => setUser(data))
}, [])
}, [userId])

// グローバルなローディング状態
if (!user) return <Spinner/>
Expand Down Expand Up @@ -151,30 +151,30 @@ SWR はその問題を完璧に解決してくれます。 先ほど作成した
```jsx {20,26}
// ページコンポーネント

function Page () {
function Page ({ userId }) {
return <div>
<Navbar />
<Content />
<Navbar userId={userId} />
<Content userId={userId} />
</div>
}

// 子コンポーネント

function Navbar () {
function Navbar ({ userId }) {
return <div>
...
<Avatar />
<Avatar userId={userId} />
</div>
}

function Content () {
const { user, isLoading } = useUser()
function Content ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <h1>Welcome back, {user.name}</h1>
}

function Avatar () {
const { user, isLoading } = useUser()
function Avatar ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}
Expand Down
28 changes: 14 additions & 14 deletions pages/docs/getting-started.ko.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
```jsx
import useSWR from 'swr'

function Profile () {
const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
function Profile ({ userId }) {
const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)

if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
Expand Down Expand Up @@ -104,15 +104,15 @@ import { Welcome } from 'components/diagrams/welcome'
```jsx {7-11,17,18,27}
// 페이지 컴포넌트

function Page () {
function Page ({ userId }) {
const [user, setUser] = useState(null)

// 데이터 가져오기
useEffect(() => {
fetch('/api/user')
fetch(`/api/user/${userId}`)
.then(res => res.json())
.then(data => setUser(data))
}, [])
}, [userId])

// 전역 로딩 상태
if (!user) return <Spinner/>
Expand Down Expand Up @@ -152,30 +152,30 @@ SWR은 이 문제를 완벽하게 해결합니다. 우리가 막 생성한 `useU
```jsx {20,26}
// 페이지 컴포넌트

function Page () {
function Page ({ userId }) {
return <div>
<Navbar />
<Content />
<Navbar userId={userId} />
<Content userId={userId} />
</div>
}

// 자식 컴포넌트

function Navbar () {
function Navbar ({ userId }) {
return <div>
...
<Avatar />
<Avatar userId={userId} />
</div>
}

function Content () {
const { user, isLoading } = useUser()
function Content ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <h1>Welcome back, {user.name}</h1>
}

function Avatar () {
const { user, isLoading } = useUser()
function Avatar ({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}
Expand Down
Loading