Continuous requests using useSWR

[jackHedaya]

Hi!

In my use case, I have a bunch of independent requests I need to make at once but I want the data to be usable as soon as it is returned.

I've tried making a blast fetcher but that will not return the data until all requests return. I've also tried using useSWRInfinite, but that makes requests happen synchronously.

Is there a recommended method of doing this using useSWR?

[joshkel]

The simplest solution is to make each independent request independently; there's no reason you can't call useSWR as many times as you want within a component. The component will re-render with available data as individual requests come in.

Would that meet your needs?

[jackHedaya]

Considering hooks can't be used in loops, what would that implementation look like?

I was considering making an empty component that uses useSwr and sends the data back to the parent state but it seems like an unnecessary addition for the DOM to handle.

[joshkel]

Ah, sorry. I'd missed that you have a loop.

It looks like the empty component solution would be one approach (since rendering additional components can be used as a workaround for needing conditional hooks). This example could be something like that.

If you can guarantee that the set of queries never changes for the lifetime of a component, then you can get away with hooks in a loop. See here. (In other words, the important thing is that hooks are always called in the same order - the simplest way of ensuring that is disallowing conditionals and loops. But keeping your conditionals and loops the same - e.g., by putting them in a useRef or useState on initial render and then never changing them - would also work.)

Otherwise, I'm afraid I don't have ideas.

[jackHedaya]

This was extremely helpful, thank you so much Josh!

[joshkel]

I realized I may not have been clear - "putting your conditionals and loops in a useRef or useState on initial render" should be "putting whatever controls your conditionals and loops in a useRef or useState on initial render."

You're welcome! Glad I could help.