use SWR with depending request data

Question

I'm trying to use SWR to fetch list of users connected to the logged in user id provided by a custom hook.

I can't put useSWR inside either useCallback or useEffect or if (loggedInAdvisor) { ... }... Can't figure out how to do it.

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 supports Conditional Fetching, instead of using an if branching, you need to pass null as a key (that's the mental modal of React Hooks too):

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

---

Updated 2021/12/10:

You can also fetch some data, that based on the result of another request using SWR, too:

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

In this case, if user isn't ready the second request will not start since the key will be null. When the first request ends, the second one will start naturally. This is because a re-render will always happen when user changes from undefined to some data.

You can use this method to fetch as many dependent resources as you want, with the best possible parallelism.