Multi-request managing

[drodmun]

I've used useSWR for single fetch components and I love it, but now I see myself in a pickle, I gotta represent a chart that pulls data from many different endpoints, and as I have it now, it works without SWR, I created a custom hook, do all request and with Promise.all I format the code into a JSON for the chart, something like this:

(a DataLoader is like: {
apiCall: fetch(urlX).then(r => r.data),
dataTypes: [objects to map results into chart values]
}

export const useDataLoaders = (dataLoaders: DataLoader[], filters?: FiltersType): [boolean, string[] | null, DataFormat] => {
  const [loading, setLoading] = useState<boolean>(true);
  const [errors, setErrors] = useState<string[] | null>(null);
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    if (dataLoaders && dataLoaders.length > 0) {
      // Clean on reload to show progressbar
      setData([]);
      setLoading(true);
      setErrors(null);

      // Load from apiCalls
      Promise.all(dataLoaders.map(dl => dl.apiCall(filters || commonFilters)))
        .then(results => {
          return dataLoaders.map((dl: DataLoader, index) => (
            { dataTypes: dl.dataTypes, result: results[index] }
          ));
        })
        .then((results: { dataTypes: DataLoaderDataType[], result: any }[]) => {
          const newData: any[] = [];

          results.forEach(data => {
            data.result.metrics.forEach((m: any) => {
              // ... do stuff with the data
              newData.push({ ...m, ...extraInfoGenerated });
            });
          });

          setData(newData);
          setLoading(false);
          setErrors(null);
        });
    }
  }, [])

  return [loading, errors, data]
}

Any way to involve useSWR into that kind of mix where you need to do something when all requests finish? (as a plan B, I'll leave this as it is, but I'd like to use SWR for it's caching capabilities).

[sergiodxa]

If the amount of endpoints is fixed I would recommend to run useSWR multiple times and wait until all of them have data to finish.

If the amount of endpoints is dynamic, you can pass the list to useSWR as an array key and receives them in your fetcher, where you can use Promise.all to fetch them all at the same time.

function multiFetcher(...urls) {
  return Promise.all(urls.map(url => fetcher(url))
}

const { data: [data1, data2, data3] } = useSWR([url1, url2, url3], multiFetcher)

Something like that 👆

Note this will create a cache key with the array of all of them and it will revalidate all of them at the same time. If you want more granular control you will need to use more than one useSWR call.