reactjs - ¿Cómo puedo iterar sobre la lista de URLs y hacer una llamada al servidor usando el hook useSWR?

Estoy trabajando en una aplicación web ReactJS y me he quedado atascado en un problema. El problema es que tengo un arreglo de URLs de algunos datos JSON y quiero obtener todos estos datos JSON del servidor usando el hook "useSWR" (para que los datos obtenidos también se almacenen en caché). Ahora, el problema es que según las reglas no podemos usar hooks dentro de ningún bucle o bloque.

Ejemplo -

1. Lo que tengo - ["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"]
2. Lo que quiero hacer: iterar sobre este arreglo y llamar a estas URLs usando el hook useSWR, para que tenga una lista de [ Objeto JSONA, Objeto JSONB, Objeto JSONC ]
3. Por qué estoy intentando usar "useSWR" porque sé que estos datos no van a cambiar durante 24 horas y quiero almacenar en caché estos valores.

¿Alguien puede sugerirme cómo puedo iterar sobre la lista de URL y hacer una llamada al servidor usando el hook useSWR? ¿Y hay algún otro enfoque optimizado para resolver este problema? Cualquier ayuda o guía es muy apreciada.

Respuesta #1

Una de las opciones que creo es crear un Componente Fetch de React con la propiedad url y usar el hook useSWR dentro. Renderizar componentes según el número de urls. Algo así:

["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"].map(url=><FetchComponent url={url}/>)

Respuesta #2

Puedes escribir un recuperador personalizado que maneje un arreglo de URL y responda con un arreglo de respuestas:

const multiFetcher = (urls) => Promise.all(
  urls.map(url => fetch(url).then(r => r.json())
)

function MyComponent() {
  const { data } = useSWR(["http://someapi/a.json",
                           "http://someapi/b.json",
                           "http://someapi/c.json"], multiFetcher)

  return <ul>{data.map(d => <li><pre>{JSON.stringify(d)}</pre></li>)}</ul>
}