Why is there not something like promise.all ?

[n7ck]

both useSWRInfinite and useSWR seem like not a valid option, since I have a dynamic array of product urls for example that I need to make api call on each one of them, then I need to do stuff with the data not just render a component for each product.

Like I previously wasn't needing a hook so i could do this in a loop...
but trying to do it the SWR way and use the useSWR hook in a loop is not going to work since you can't use hooks in loops.
and again I need the data not just render a list of components so i cant just do a loop and generate a component per item in loop and each item has it's own useSWR.

[lfjsa]

You can pass useSWR a an object (docs), which then get passed in to the fetcher. The fetcher can return any promise, including Promise.all.

Putting things together

Note
Be aware of Promise.all's fail-fast behaviour (MDN).

Here's a very simple example to get the idea across. In practice you might want to extract a usePeople hook, pass the list of ids as parameters, not use the ids in the cache key at all, and so on.

const People = () => {
  const { data } = useSWR(
    { url: "/people", ids: ["1", "2", "3", "4"] },
    ({ url, ids }) =>
      Promise.all(
        ids.map((id) =>
          fetch(`https://swapi.dev/api${url}/${id}`).then(async (response) => {
            // do something in here
            const { name } = await response.json()
            return { name: name.toUpperCase() }
          })
        )
      )
  )

  if (!data) return <p>Fail</p>

  return (
    <ul>
      {data.map((r) => (
        <li key={r.name}>{r.name}</li>
      ))}
    </ul>
  )
}

Revalidating

You can now revalidate the data cached under the matching cache key { url: "/people", ids: ["1", "2", "3", "4"] }.

<button
  onClick={() => {
    mutate({ url: "/people", ids: ["1", "2", "3", "4"] }, [
      { name: "hehe" },
    ])
  }}
>
  Mutate!
</button>

---

That said, it might be preferable to extend the products API so you can filter the products using a search param (e.g. api/products?filter=whateverYouWant). This reduces the number of API calls to one and simplifies the frontend code.

[n7ck]

Thank you lfjsa.
your code is amazing and elegant.
You are right that preferable to just make 1 call, but I'm not currently trying to optimize that, yet...
i still working on adding this code in, to replace our existing calls, I spent some time on it, but then pulled to other things... will try again.
Thank you!

[lfjsa]

Glad I could help. But I just realised that passing useSWR a list of IDs (["1", "2", "3", "4"]) will give you unusable cache keys. Ideally it would be something like ["/person/1", "/person/2", "/person/3", "/person/4"]. I'll play with it some more and update the example accordingly.

Edit: I've updated the example above.

[n7ck]

I realize that useSWR ( useSWRImmutable ) is not capable of doing what I want, which is if I make a call and pass it an array of fetch requests (an array because I don't know how many I will need ahead of time)

1. [ /product/3, /product/4, /product/5 ] then
2. [ /product/3, /product/5 ] then
3. /product/3

• then that is going to end up being 6 calls total because the array is considered the key, not each array item.

There is this though, in the works(?) that sounds promising ( useSWRList ) #1988