Argumentos

Por padrão, key será passado para fetcher como argumento. Então as 3 expressões a seguir são equivalentes:

useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)

Múltiplos Argumentos

Em alguns cenários, é útil passar vários argumentos (pode ser qualquer valor ou objeto) para a função fetcher. Por exemplo, uma requisição de fetch autorizada:

useSWR('/api/user', url => fetchWithToken(url, token))

Isso é incorreto. Porque o identificador (também a cache key) do dado é '/api/user', mesmo se token mudar, SWR ainda usará a mesma chave e retornará o dado errado.

Ao invés disso, você pode usar um array como o parâmetro key, que contém vários argumentos para a função fetcher.

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

A função fetcher aceita o parâmetro key como é, e a chave de cache também será associada com o argumento key inteiro. No exemplo acima, url e token estão associados à chave de cache.

Passando Objetos

Digamos que você tenha outra função que busca dados com um escopo de usuário: fetchWithUser(api, user). Você pode fazer o seguinte:

const { data: user } = useSWR(['/api/user', token], fetchWithToken)
 
// ...e então passá-lo como argumento para outro hook useSWR
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)

Você pode passar diretamente um objeto como chave, e fetcher receberá esse objeto também:

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