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.