如何解决将SWR与依赖请求数据一起使用
我正在尝试使用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
}
解决方法
SWR支持Conditional Fetching,而不是使用if
分支,您需要传递null
作为键(这也是React Hooks的思维方式):
const { data,error } = useSWR(
loggedInAdvisor ? 'fetchWorkloadData' : null,() => {...}
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。