将SWR与依赖的请求数据一起使用

Question

我正试图使用SWR来获取连接到由自定义挂钩提供的已登录用户id的用户列表。

我不能把useSWR放在useCallback、useEffect或if (loggedInAdvisor) { ... }里面。。。不知道怎么做。

export const fetchDetailedAdvisorPrognoses = (
body: DetailedAdvisorPrognosesRequest
): Promise<DetailedAdvisorPrognoses[]> | null => {
const accessToken = getFromPersistance(ACCESS_TOKEN)
if (!accessToken) {
return null
}
return fetch('https://x/api/v2/advisors/prognoses', {
method: 'POST',
headers: {
...generateDefaultHeaders(),
'Content-Type': 'application/json',
Authorization: getAuthorizationHeader(accessToken),
},
body: JSON.stringify(body), // body data type must match "Content-Type" header
}).then(res => res.json())
}
function Workload(): ReactElement | null {
const { loggedInAdvisor } = useAuthentication()
// yesterday
const fromDate = moment()
.subtract(1, 'day')
.format('YYYY-MM-DD')
// 14 days ahead
const toDate = moment()
.add(13, 'days')
.format('YYYY-MM-DD')
const { data, error } = useSWR<DetailedAdvisorPrognoses[] | null>('fetchWorkloadData', () =>
'detailed',
fetchDetailedAdvisorPrognoses({
advisorIds: [loggedInAdvisor.id], // <-- I want to pause the query until loggedInAdvisor is defined 
fromDate,
toDate,
})
)
// todo: display errors better
if (error) {
return <span>Error: {error.message}</span>
}
if (!data) {
return <LoadingV2 isLoading={!data} />
}
if (data && data.length > 0) {
// advisors prognoses is first element in data array
const [first] = data
const days: WorkloadDay[] = Object.keys(first.daysMap).map(date => ({
date,
value: first.daysMap[date],
}))
return <WorkloadLayout before={first.before} days={days} />
}
return null
}

Answer 1

SWR支持条件获取，而不是使用if分支，您需要将null作为密钥传递(这也是React Hooks的心理模式(：

const { data, error } = useSWR(
loggedInAdvisor ? 'fetchWorkloadData' : null,
() => {...}
)

---

更新日期：2021/12/10:

您也可以使用SWR获取一些基于另一个请求结果的数据：

const { data: user } = useSWR('/api/user', fetcher)
const { data: avatar } = useSWR(user ? '/api/avatar?id=' + user.id : null, fetcher)

在这种情况下，如果user还没有准备好，则第二个请求将不会启动，因为密钥将是null。当第一个请求结束时，第二个请求将自然开始。这是因为当user从undefined更改为某些数据时，总是会发生重新渲染。

您可以使用此方法以尽可能好的并行性获取任意数量的依赖资源。