docs: improve Gettting Started examples (#566)

vercel · Feb 12, 2025 · f4ba47f · f4ba47f
1 parent dc0229b
commit f4ba47f
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 123 deletions.
diff --git a/pages/docs/getting-started.en-US.mdx b/pages/docs/getting-started.en-US.mdx
@@ -43,8 +43,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>
@@ -77,8 +77,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 />
@@ -104,15 +104,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/>
@@ -152,30 +152,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} />
 }

diff --git a/pages/docs/getting-started.es-ES.mdx b/pages/docs/getting-started.es-ES.mdx
@@ -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>
@@ -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 />
@@ -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} />
 }
 

diff --git a/pages/docs/getting-started.fr-FR.mdx b/pages/docs/getting-started.fr-FR.mdx
@@ -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>
@@ -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/>
@@ -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} />
 }

diff --git a/pages/docs/getting-started.ja.mdx b/pages/docs/getting-started.ja.mdx
@@ -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>
@@ -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/>
@@ -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} />
 }

diff --git a/pages/docs/getting-started.ko.mdx b/pages/docs/getting-started.ko.mdx
@@ -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>
@@ -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/>
@@ -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} />
 }