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
}

Shu Ding · Answer 1 · 2021-12-10T17:49:35.130

21

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.

edited Dec 10 '21 at 17:49

answered Aug 21 '20 at 16:47

Shu Ding

1,506
13
17

What is missing to me is to have 'real' dependent data. I.e. if you need to make a fetch some result asynchronously, after which you will use the result as a parameter in the swr fetcher. – html_programmer Dec 09 '21 at 19:58
1

@html_programmer You can do it with SWR too, I just updated my answer (it's also mentioned in the docs linked). – Shu Ding Dec 10 '21 at 17:50
This will work; cool! – html_programmer Dec 10 '21 at 18:36
@ShuDing can you please check this similar issue for me: https://stackoverflow.com/questions/70557556/client-side-data-fetching-with-swr-from-internal-api-route – Ilir Jan 02 '22 at 16:19

use SWR with depending request data

1 Answers1