Hook useSWR: obtención, carga y errores

useSWR(key, fetcher, options) es el hook principal. key es la key de caché (normalmente, una cadena de URL), fetcher es la función async que devuelve los datos y options es un objeto de configuración opcional.

El hook devuelve un objeto con data, error, isLoading, isValidating y la función mutate.

key puede ser una URL en forma de cadena, un array de [url, params] o null. Las keys de tipo cadena corresponden a solicitudes GET sencillas. Las keys de tipo array permiten incluir variables como userId o filtros en la identidad de la caché.

Pasar null desactiva por completo la solicitud, lo que resulta útil para la obtención condicional cuando los datos necesarios todavía no están disponibles.

El fetcher recibe la key (o la key de tipo array expandida como argumentos) y debe devolver una Promise. El valor resuelto se convierte en data. Si el fetcher lanza una excepción, se establece la propiedad error.

Ejemplo: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data es undefined durante la primera carga y equivale al valor resuelto del fetcher después de una operación correcta. error es undefined a menos que el fetcher lance una excepción; en ese caso, contiene el objeto de error lanzado.

Compruebe if (error) para mostrar un mensaje de error y if (!data) para mostrar un skeleton de carga, proporcionando UIs de respaldo claras.

isLoading es true solo cuando no hay datos en caché y hay una solicitud en curso: durante la primera carga de esa key. isValidating es true siempre que haya una solicitud en curso, incluidas las revalidaciones en segundo plano cuando ya existen datos en caché.

Use isLoading para las pantallas de carga; use isValidating para mostrar un indicador sutil que señale una actualización en segundo plano.

SWRConfig permite definir un fetcher predeterminado, dedupingInterval, refreshInterval, un controlador onError y otras opciones para todas las llamadas a useSWR dentro de su subárbol. Esto centraliza la configuración en lugar de repetir las opciones en cada hook.

Anide varios proveedores SWRConfig para tener valores predeterminados distintos en diferentes secciones de la aplicación.

Pase null como key para omitir la solicitud: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR no realizará la obtención hasta que key se convierta en un valor distinto de null.

Esto es más sencillo que la opción skip de React Query. La transición de key de null a una cadena activa automáticamente la primera obtención.

Encadene hooks de SWR para realizar solicitudes dependientes: const { data: user } = useSWR('/api/me', fetcher) then const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). El segundo hook espera hasta que se resuelva el primero.

Este patrón evita las cadenas de useEffect y mantiene las dependencias de datos de forma declarativa y legible.

Si un componente Header y un componente Sidebar llaman ambos a useSWR('/api/user', fetcher), SWR solo realiza una solicitud y comparte el resultado. Ambos componentes vuelven a renderizarse juntos cuando se actualizan data o error.

Esta deduplicación ocurre automáticamente dentro de la ventana de deduplicación (2000 ms de forma predeterminada), sin ninguna configuración adicional.

refreshInterval: 5000 realiza consultas cada 5 segundos. refreshWhenHidden: false detiene el polling cuando la pestaña no está visible. shouldRetryOnError: false desactiva los reintentos automáticos. revalidateOnFocus: false desactiva la revalidación activada por el foco.

Combine las opciones para adaptarlas a sus requisitos de actualización de datos: los dashboards suelen usar refreshInterval, mientras que el contenido estático establece revalidateOnFocus: false.

Para datos paginados, incluya el número de página en la key: useSWR(['/api/items', page], fetcher). Cambiar de página activa una nueva obtención para esa página y mantiene las páginas anteriores en caché.

SWR también proporciona useSWRInfinite para patrones basados en cursores o de desplazamiento infinito, con una función getKey que crea keys según el índice de página y los datos de la página anterior.

¿Qué ocurre cuando se pasa null como key a useSWR?

useSWR(key, fetcher) devuelve data, error, isLoading e isValidating. Las keys null desactivan la obtención para solicitudes condicionales y dependientes. isLoading indica la primera carga; isValidating indica cualquier solicitud en curso. SWRConfig centraliza los valores predeterminados y la deduplicación de solicitudes entre componentes es automática.

Opciones como refreshInterval, revalidateOnFocus y shouldRetryOnError permiten ajustar con precisión el comportamiento de actualización de datos por hook o de forma global.