Skip to content
Docs
Argumentos

Argumentos

Por defecto, key se pasará a fetcher como argumento. Así que las siguientes 3 expresiones son equivalentes:

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:

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:

const { data: user } = useSWR(['/api/user', token], ([url, token]) => fetchWithToken(url, token))

The fetcher function accepts the key parameter as is, and the cache key will also be associated with the entire key argument. In the above example, url and token are both tight to the cache key.

⚠️

In older versions (< 2), The fetcher function accepts the key parameter as arguments separately

Pasar objetos

💡

Since SWR 1.1.0, object-like keys will be serialized under the hood automatically.

Say you have another function that fetches data with a user scope: fetchWithUser(api, user). You can do the following:

const { data: user } = useSWR(['/api/user', token], fetchWithToken)

// ...and then pass it as an argument to another useSWR hook
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)

You can directly pass an object as the key, and fetcher will receive that object too:

const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
⚠️

In older versions (< 1.1.0), SWR shallowly compares the arguments on every render, and triggers revalidation if any of them has changed.

Last updated on 9 de diciembre de 2022