Multiple requests

[kg55kmr]

Hi, how i can send multiple requests with single useSWR? I cannot use useSWR in loop because it hook.

[shuding]

You might need https://swr.vercel.app/docs/pagination#use-swr-infinite if the number of requests you are gonna make is dynamic.

[kg55kmr]

Done it.

function fetcher(...urls) {
  const f = (u) => fetch(u).then((r) => r.json());

  if (urls.length > 1) {
    return Promise.all(urls.map(f));
  }
  return f(urls);
}

[OutThisLife]

@alessandrocapra

Just implemented this as well, here's the code:

const { data, mutate } = useSWR<{ products: Product[] }[]>(
  () =>
    [...state.slugs.entries()].filter(([, v]) => v).map(([k]) => k) ?? null,
  async (...args: string[]): Promise<any> => Promise.all(args.map(fetcher))
)

Where state.slugs is just a Map<string, boolean> of URLs to handle and fetcher is:

export const fetcher = async <T extends any>(k: string): Promise<T> =>
  (await fetch(k)).json() as T

[Angeloem]

this causes useSWR to call itself multiple times leading to unusability...

can someone correct me here:

const {data, error, mutate} = useSWR([[GET_USER_STATS, GET_ALL_USERS]], async (...url: string[]) => Promise.all(url.map(url => GET(url, headers))));

And I also tried doing it as this
const {data, error} = useSWR([[GET_USER_STATS, GET_ALL_USERS]], (url: string[]) => multiFetch(url, headers, GET));

the multiFetcher
export const multiFetch = (url: string[], headers: any, executor: (url: string, headers: any, data?: any) => Promise<AxiosResponse<any>>) => Promise.all([...url.map((_) => executor(_, headers))])

Right now am resorting to call useSWR multiple times, which is not beautiful

[evanxd]

Hey folks, @Angeloem

Below is the full example to request multiple URLs with one useSWR call. Then you can fetch multiple URLs in your UI component with const { data, isError, isLoading } = useMultipleRequests(). Hope this can help and be beautiful. 😛

const fetcher = (...urls) => {
  const f = url => fetch(url).then(r => r.json())
  return Promise.all(urls.map(url => f(url)))
}

export default function useMultipleRequests() {
  const urls = ['/api/v1/magazines/1234', '/api/v1/magazines/1234/articles']
  const { data, error } = useSWR(urls, fetcher)
  return {
    data: data,
    isError: !!error,
    isLoading: !data && !error
  }
}

[Angeloem]

I did exactly that and it didn't work, I think I was mistaken somewhere.... But the whole Idea was to pass urls as spread props and then resolve them all....

What I decided to do was to decompose the component as I best as I could to create more components... I also learnt that I could perform multiple swr request per component...

This is cleaner and more professional, shall come to this later

[shuding]

Indeed, I think decomposing the component is always the preferred way when possible.

[daun-io]

Hi, I figured out this is not exactly the thing that I wanted because,

1. If we end up making multiple requests in 1 SWR call with 1 SWR Key, each individual request won't be cached separately.
2. If our requests includes [a,b,c,d,e] and we call it with 1 SWR Key, we have to revalidate all [a,b,c,d,e] when we mutate 'a'

But in the meanwhile, I think I can depend on this. Thanks.

[daun-io]

I hope there is more elegant solution to make

• Multiple request with multiple SWR keys

in one shot. I'm not sure it's fully supported with 'useSWRInfinite'?...

[0xbe1]

+1.

useSWRInfinite is designed for pagination rather than the use case you describe. And I agree that we need a more elegant solution to make multiple requests with multiple SWR keys, and cache them properly

[0xbe1]

i guess there's a proposal #1988