Fetching for each data in collection

When you have a dependent call and you want to make a call for each of the data in the collection, how does you handle that with swr?

  const { data: users } = useSWR<Response<User[]>>(
    [usersURL(), token],
    request,
    { revalidateOnFocus: false },
  );

  const allProfiles = [];
  if (users) {
    users .data.forEach(user => {
      const { data: profiles } = useSWR<Response<Profile[]>>(
        [userProfileURL(user.id), token],
        request,
        { revalidateOnFocus: false },
      );

      if (profiles) {
        allProfiles.push(profiles);
      }
    });
  }

The above code snippet does not work, I am getting errors like this Rendered fewer hooks than expected.

[pacocoursey]

Looks like this has been solved!

For future reference, the error

Rendered fewer hooks than expected.

Is caused by using hooks under a conditional:

if (users) {
  // ...
  useSWR(...) // breaks the rules of react hooks
}

Additionally, you can do dependent fetching as described here: https://github.com/zeit/swr#dependent-fetching

[fa10]

@sergiodxa this is the solution I went for!

const fetchSomething = async (id: string, token: string) => {
  try {
    const { data: collection } = await request(
      `${id}/data`,
      token,
    );

    const responses = await Promise.all(
      collection.map(site =>
        request(/data, token),
      ),
    );

    return { data: flatten(responses .map(response => response.data)) };
  } catch (error) {
    return { data: undefined, error };
  }
};

Then use the fetchSomething like this:

  const { data } = useSWR(
    [id, token],
    fetchSomething,
  );