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

编程问答 2022-08-16

问题描述

我正在尝试使用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,() => {...}
)
fetchreactjsreactjsvercel