I am currently utilizing the swr library in a Create React App and require the usage of the useSWR hook for data fetching that is both contingent and conditional. The specific task at hand involves:
- Making an API call to retrieve an
idwhich will be used for a subsequent API call. Thisidcan be found within either theupcomingEventsorpassedEventsarray. - My preference is to obtain the
idfrom theupcomingEventsarray, but in cases where it is empty, I would then look into thepassedEventsarray. - It is my intention to extract the first id from either array, thus using the initial index of either array is acceptable (e.g.,
upcomingEvents[0].id). - Below is an illustration of the code snippet and the response received from the initial API call:
const { data: result } = useSWR(`${BASE_URL}/event/${searchEvent}`);
// The subsequent call will wait for the resolution of the first call before executing
const { data: event, error } = useSWR(() => `${BASE_URL}/project/${result.upcomingEvents[0].id}`);
The response obtained from the initial call, which contains the id required for the next call, might resemble this structure:
{
"upcomingEvents": [{"id": "1234"}, {"id": "5678"}, {"id": "0909"}],
"passedEvents": [{"id": "0987"}, {"id": "6543"}]
}
If I explicitly specify the id for the second API call as upcomingEvents[0].id (as shown in the above code example), the desired outcome is achieved.
My challenge lies in determining where to incorporate the logic that selects the appropriate id for the dependent second API call. I require this logic but am uncertain about its placement without violating the rules governing hooks utilization.
const { data: result } = useSWR(`${BASE_URL}/event/${searchEvent}`);
const { data: event, error } = useSWR(() =>
result.upcomingEvents.length > 0
? `${BASE_URL}/project/${result.upcomingEvents[0].id}`
: `${BASE_URL}/project/${result.passedEvents[0].id}`
);