I18n: Spanish

components/features.js

@@ -11,6 +11,7 @@ const Feature = ({ text, icon }) => (
 
 const TITLE_WITH_TRANSLATIONS = {
   'en-US': 'React Hooks library for data fetching',
+  'es-ES': 'Biblioteca React Hooks para la obtención de datos',
   'zh-CN': '用于数据请求的 React Hooks 库'
 }
 

next.config.js

@@ -6,7 +6,7 @@ const withNextra = require('nextra')({
 
 module.exports = withNextra({
   i18n: {
-    locales: ['en-US', 'zh-CN'],
+    locales: ['en-US', 'zh-CN', 'es-ES'],
     defaultLocale: 'en-US'
   }
 })

pages/advanced/meta.es-ES.json

@@ -0,0 +1,3 @@
+{
+  "performance": "Rendimiento"
+}

pages/advanced/performance.es-ES.mdx

@@ -0,0 +1,122 @@
+# Rendimiento
+
+SWR proporciona una funcionalidad crítica en todo tipo de aplicaciónes web, por lo que el **rendimiento**
+es una prioridad absoluta.
+
+SWR’s tiene **caché** incorporado y la **[deduplicación](/advanced/performance#deduplication)** evitan las solicitudes de red innecesarias,
+pero el rendimiento del propio hook `useSWR` sigue siendo importante. En una aplicación compleja, puede haber cientos de llamadas `useSWR`
+en una solo página.
+
+SWR asegura que su aplicación tiene:
+
+- _no hay peticiones de red innecesarias_
+- _no hay renderizado innecesarios_
+- _no se importa código innecesario_
+
+sin ningún cambio de código por su parte.
+
+## Deduplicación
+
+Es muy común reutilizar los hooks SWR en tu aplicación. Por ejemplo, una aplicación que muestra el avatar del usuario
+actual 5 veces:
+
+```jsx
+
+function useUser() {
+   return useSWR('/api/user', fetcher)
+}
+
+function Avatar () {
+   const { data, error } = useUser()
+   if (error) return <Error />
+   if (!data) return <Spinner />
+
+   return <img src={data.avatar_url} />
+}
+
+function App() {
+  return <>
+    <Avatar />
+    <Avatar />
+    <Avatar />
+    <Avatar />
+    <Avatar />
+  </>
+}
+
+```
+
+Cada componente `<Avatar/>` tiene un hook `useSWR` en su interior. Dado que tienen el mismo key SWR y 
+que se renderizan casi al mismo tiempo, **sólo se hará 1 solicitud de red**.
+
+Puedes reutilizar tus hooks de datos (como `useUser` en el ejemplo anterior) en todas partes, sin preocuparte por el rendimiento
+o las peticiones duplicadas.
+
+También existe la [opción `dedupingInterval`](/docs/options) para anular el intervalo de deduplicación por defecto.
+
+## Comparación profunda
+
+SWR por defecto tiene  **deep compares** al cambio de datos. Si el valor de `data` no ha cambiado, no se
+activará una nueva renderización.
+
+También puede personalizar la función de comparación mediante la [opción `compare`](/docs/options) si quieres cambiar el comportamiento.
+Por ejemplo, algunas respuestas de la API devuelven una marca de tiempo del servidor que tal vez quiera excluir de la difusión de datos.
+
+## Coleción de dependencias
+
+`useSWR` devuelve 3 valores de **estado**: `data`, `error` y `isValidating` cada uno de ellos puede actualizarse de forma independientemente.
+Por ejemplo, si imprimimos esos valores dentro de un ciclo de vida completo de obtención de datos, será algo como esto:
+
+```jsx
+
+function App () {
+  const { data, error, isValidating } = useSWR('/api', fetcher)
+  console.log(data, error, isValidating)
+  return null
+}
+
+```
+
+En el peor de los casos (la primera solicitud falló, entonces el reitento fue exitoso), verá 4 líneas de registros:
+
+```js
+// console.log(data, error, isValidating)
+
+undefined undefined true  // => start fetching
+undefined Error false     // => end fetching, got an error
+undefined Error true      // => start retrying
+Data undefined false      // => end retrying, get the data
+```
+
+Los cambios de estado tienen sentido. Pero eso también significa que nuestro componente se **renderizo 4 veces.**
+
+Si cambiamos nuestro componente para usar solo `data`:
+
+```jsx
+
+function App () {
+   const { data } = useSWR('/api', fetcher)
+   console.log(data)
+   return null
+}
+```
+
+La magia ocurre - ahora solo hay **2 rederizaciones**:
+
+```js
+// console.log(data)
+undefined // => hydration / initial render
+Data      // => end retrying, get the data
+```
+
+El mismo proceso ha ocurrido internamente, hubo un error de la primera solicitud, entonces tenemos los datos del reintento.
+Sin embargo, **SWR sólo actualiza los estados que utiliza el componente**, que ahora sólo es `data`.
+
+Si no utiliza siempre estos 3 estados, ya se está beneficiando de esta función. En [Vercel](https://vercel.com), esta optimización se 
+traduce en un 60% menos de repeticiones.
+
+## Tree Shaking
+
+El paquete SWR es [tree-shakeable](https://webpack.js.org/guides/tree-shaking) y no tiene efectos secundarios.
+Esto significa que si sólo importa `useSWR` core API, las APIs no utilizadas, como `useSWRInfinite`, no se incluirán en tu aplicación.
+

pages/change-log.es-ES.mdx

@@ -0,0 +1,27 @@
+import Markdown from 'markdown-to-jsx'
+import { useSSG } from 'nextra/ssg'
+
+export const getStaticProps = ({ params }) => {
+  return fetch('https://api.github.com/repos/vercel/swr/releases')
+    .then(res => res.json())
+    // we keep the most recent 5 releases here
+    .then(releases => ({ props: { ssg: releases.slice(0, 5) }, revalidate: 10 }))
+}
+
+export const ReleasesRenderer = () => {
+  const releases = useSSG()
+  return <Markdown>{
+    releases.map(release => {
+      const body = release.body
+        .replace(/&#39;/g, "'")
+        .replace(/@([a-zA-Z0-9_-]+)(?=(,| ))/g, '<a href="https://github.com/$1" target="_blank" rel="noopener">@$1</a>')
+      return `## <a href="${release.html_url}" target="_blank" rel="noopener">${release.tag_name}</a> 
+Publicado en ${new Date(release.published_at) .toDateString()}.\n\n${body}`}).join('\n\n')
+  }</Markdown>
+}
+
+# Registro de cambios
+
+Visite [SWR release page](https://github.com/vercel/swr/releases) para ver todo el historial de lanzamientos.
+
+<ReleasesRenderer/>

pages/docs/arguments.es-ES.md

@@ -0,0 +1,54 @@
+# Argumentos
+
+Por defecto, `key` se pasará a `fetcher` como argumento. Así que las siguientes 3 expresiones son equivalentes:
+
+```js
+useSWR('/api/user', () => fetcher('/api/user'))
+useSWR('/api/user', url => fetcher(url))
+useSWR('/api/user', fetcher)
+```
+
+## Argumentos múltiples
+
+En algunos escenarios, es útil pasar múltiples argumentos (puede pasar cualquier valor u objeto) a
+la función `fetcher`. Por ejemplo una solicitud de obtención autorizada:
+
+```js
+useSWR('/api/user', url => fetchWithToken(url, token))
+```
+
+Esto es **incorrecto**. Dado que el identificador (también la key del caché) de los datos es `'/api/user'`, incluso si el token cambia, SWR seguirá utilizando la misma key y devolverá los datos incorrectos.
+
+En su lugar, puedes utilizar un **array** como parámetro `key`, que contiene múltiples argumentos de `fetcher`:
+
+```js
+const { data: user } = useSWR(['/api/user', token], fetchWithToken)
+```
+
+La función `fetchWithToken` sigue aceptando los mismo 2 argumentos, pero ahora la key del caché también estará asociada al `token`.
+
+## Pasar objectos
+
+Digamos que tienes otra función que obtiene datos con un scope 
+del usuario: `fetchWithUser(api, user)`. Puedes hacer lo siguiente:
+
+```js
+const { data: user } = useSWR(['/api/user', token], fetchWithToken)
+// ...y pasarlo como un argumento a otra query
+const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)
+```
+La `key` de la solicitud es ahora la combinación de ambos valores. SWR **shallowly** compara los argumentos en cada renderización, 
+y activa la revalidación si alguno de ellos ha cambiado.
+
+Ten en cuenta que no debes recrear los objetos al renderizar, ya que serán tratados como objetos diferentes en cada render:
+
+```js
+// No lo hagas. Los deps se cambiarán en cada render.
+useSWR(['/api/user', { id }], query)
+
+// En su lugar, sólo debe pasar valores "estables".
+useSWR(['/api/user', id], (url, id) => query(url, { id }))
+```
+
+Dan Abramov explica muy bien las dependencias en [está entrada del blog](https://overreacted.io/a-complete-guide-to-useeffect/#but-i-cant-put-this-function-inside-an-effect).
+

pages/docs/conditional-fetching.es-ES.md

@@ -0,0 +1,37 @@
+# Búsqueda Condicional
+
+## Condicional
+
+Utilice `null` o pase una función como `key` para obtener datos de forma condicional. 
+Si la función lanza o devuelve un falsy value, SWR no iniciará la petición.
+
+
+```js
+// conditionally fetch
+const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)
+
+// ...o devuelve un falsy value
+const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher)
+
+// ...o lanza un error cuando user.id no está definifo
+const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher)
+```
+
+## Dependiente
+
+SWR también permite obtener datos que dependen de otros datos. Garantiza el máximo paralelismo posible (evitando las cascadas), así como la obtención en serie cuando se necesita un dato dinámico para que se produzca la siguiente obtención de datos.
+
+```js
+function MyProjects () {
+  const { data: user } = useSWR('/api/user')
+  const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id)
+  // Al pasar una función, SWR utilizará el valor devuelto
+  // como `key`. Si la función lanza o devuelve
+  // falsy, SWR sabrá que algunas dependencias no estan
+  // ready. En este caso `user.id` lanza cuando `user`
+  // no este cargado.
+
+  if (!projects) return 'loading...'
+  return 'You have ' + projects.length + ' projects'
+}
+```

pages/docs/data-fetching.es-ES.mdx

@@ -0,0 +1,79 @@
+import Callout from 'nextra-theme-docs/callout'
+import Link from 'next/link'
+
+# Obtención De Datos
+
+```js
+const { data, error } = useSWR(key, fetcher) 
+```
+
+Esta es la API fundamental de SWR. El `fetcher` aquí es una función asíncrona que **acepta el `key`** de SWR,
+y devuelve los datos.
+
+El valor devuelto será pasado como `data`, y si lanza, será capturado como `error`.
+
+<Callout emoji="💡">
+  Tenga en cuenta que el <code>fetcher</code> puede ser omitido de los parámetros si se 
+  <Link href="/docs/global-configuration"><a href="/docs/global-configuration">proporciona globalmente</a></Link>.
+</Callout>
+
+## Fetch
+
+Puedes utilizar cualquier librería para manejar data fetching, por ejemplo un `fetch` polyfill [developit/unfetch](https://github.com/developit/unfetch):
+
+```js
+import fetch from 'unfetch'
+
+const fetcher = url => fetch(url).then(r => r.json())
+
+function App () {
+  const { data, error } = useSWR('/api/data', fetcher)
+  // ...
+}
+```
+
+<Callout emoji="💡">
+  Si estás usando <strong>Next.js</strong>, no necesita importar este polyfill:
+  <br />
+  <a target="_blank" rel="noopener" href="https://nextjs.org/blog/next-9-1-7#new-built-in-polyfills-fetch-url-and-objectassign">Nuevos Polyfills Incorporados: fetch(), URL, y Object.assign</a>
+</Callout>
+
+## Axios
+
+```js
+import axios from 'axios'
+
+const fetcher = url => axios.get(url).then(res => res.data)
+
+function App () {
+  const { data, error } = useSWR('/api/data', fetcher)
+  // ...
+}
+```
+
+## GraphQL
+
+O utilizando GraphQL con librerías como [graphql-request](https://github.com/prisma-labs/graphql-request):
+
+```js
+import { request } from 'graphql-request'
+
+const fetcher = query => request('/api/graphql', query)
+
+function App () {
+  const { data, error } = useSWR(
+    `{
+      Movie(title: "Inception") {
+        releaseDate
+        actors {
+          name
+        }
+      }
+    }`,
+    fetcher
+  )
+  // ...
+}
+```
+
+_Si quiere pasar variables a una query GraphQL, consulte [Argumentos múltiples](/docs/arguments)._