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.

Pasar objetos#

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)