将 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 支持Conditional Fetching，而不是使用if分支，您需要null作为键传递（这也是 React Hooks 的心理模式）：

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