How to limit the the number of concurrent requests?

[jordymeow]

Hi,

Short version:

I would like to limit the number of concurrent requests performed by useSWR, but it doesn't seem like there is a way to do so.

Long version:

I have a React module. This module attaches itself to a certain type of element. Typically, a webpage (which is not under my control) has a certain number of those elements, and my module instanciates itself for each. For each instance, an asynchronous request is performed, through useSWR.

It's usually no problem, but there are case where I have a huge number of those elements on the same page, and then a huge number of asynchronous requests are fired at the same time (which the server can't handle). The idea would be to poll those requests. Unfortunately, since all those instances don't know about each other, I can't do anything. Only useSWR would be able to do something about it.

Do you have any idea how I could do this?

[promer94]

you can use lib like p-queue to limit the concurrent requests.
https://codesandbox.io/s/nice-pine-5tp33?file=/src/App.tsx

[jordymeow]

Thanks for your reply :) I am actually p-queue for other projects. But in this one, the problem is that: "Unfortunately, since all those instances don't know about each other, I can't do anything". In fact, I can do something, and use a global instance, which is what I am doing now, with my own React Hook. But ideally, I think it would be cool to have this in useSWR, so that it really limits the number of simultaneous requests globally.

[shuding]

First, it would be a great built-in feature indeed!

since all those instances don't know about each other, I can't do anything

However I don't quite understand because SWR uses the request key to dedupe requests globally. No 2 requests will be fired at the same time.

function User () {
  useSWR('/api/user')
}

//...
<User/>
<User/>

Only 1 concurrent request will be triggered in the example above.

Currently, if we want to have it better controlled over p-queue, I think we can do this with fetcher:

const queue = new PQueue({concurrency: 4});
const limitedFetcher = (...args) => queue.add(() => fetcher(...args))

function User () {
  useSWR('/api/user', limitedFetcher)
}

[sergiodxa]

@shuding I think @jordymeow wants to limit request in general, if he's using 10 keys only request 2 at the same time or something like that.

[shuding]

@sergiodxa if you use the same limiter for all fetchers (or the global one), they will be limited together no matter what the key is right?