Swr: Defer render on dependent requests until all requests have finished

[giantrobotbee]

Hi there, I have a request that returns one data set, and then I must traverse that set to get URL's to fetch dependent data for each item in the set. Currently, I have it broke up so that each list item component does its own "sub fetch".

The main component here fetches the first set

function HomePage() {
  // ...
  const { data, error } = useSWR(path, fetcher, {
    revalidateOnFocus: false
  });
  const mainSection = () => {

   // ...
    return (
      <Fragment key={pageNum}>
        <Dex pokemon={data.results} />
      </Fragment>
    );
  };

  return <div className={styles.pokedex}>{mainSection()}</div>;
}

Dex is nothing fancy

const Dex = ({ pokemon }) => {
  return (
    <Fragment>
      <ul>
        {R.map(
          mon => (
            <Mon mon={mon} key={mon.name} />
          ),
          pokemon
        )}
      </ul>
    </Fragment>
  );

Each Pokemon is what matters, right?
```const Mon = ({ mon }) => {
const { data } = useSWR(mon.url, fetcher, {
revalidateOnFocus: false
});

if (!data) return

fuck

;

return (

{data.name}

);
};```

Right now the behaviour is that I end up rendering the list and individual list items pop into existence as each request finishes async. Is there a way to simulate a serialized fetch here so that the WHOLE list stays "loading" until all requests are finished? Like a Promise.all style behaviour?

[sergiodxa]

You can create a custom fetcher that does the first fetch to get the list and multiple parallel fetches to get each item.

Another, future, option will be to use SuspenseList to way until all items are ready, you be an try it with experimental React but is not stable yet.