Аргументы

По умолчанию key будет передан в fetcher в качестве аргумента. Итак, следующие 3 выражения эквивалентны:

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

Множественные аргументы

В некоторых сценариях полезно передать несколько аргументов (может быть любое значение или объект) в fetcher. Например, запрос на выборку с авторизацией:

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

Это неверно. Поскольку идентификатор (также ключ кеша) данных - это '/api/user', даже если token изменится, SWR все равно будет использовать тот же ключ и возвращать неверные данные.

Вместо этого вы можете использовать массив в качестве параметра key, который содержит несколько аргументов fetcher:

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

Функция fetcher принимает параметр key как есть, и ключ кеша также будет связан со всем аргументом key. В приведенном выше примере url и token тесно связаны с ключом кеша.

Передача объектов

Допустим, у вас есть другая функция, которая делает выборку данных с областью действия пользователя: fetchWithUser(api, user). Вы можете сделать следующее:

const { data: user } = useSWR(['/api/user', token], fetchWithToken)
 
// ...затем передать его в качестве аргумента другому хуку useSWR
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)

Вы можете напрямую передать объект в качестве ключа, и fetcher тоже получит этот объект:

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