Dynamic Parallel Requests - how to correctly implement them with SWR?

[Agiledom]

What is the optimal pattern for utilising SWR to perform dynamic parallel requests in a single component (or at a parent level). Currently, SWR doesn't support something similar to React Query's useQueries function (https://react-query.tanstack.com/guides/parallel-queries).

For instance, say I have a filtering system that returns a list of product IDs [1, 2, 3] and I need to simultaneously fetch data from an API that can only take in a single query string i.e. {origin}/products?product_id=1.

Currently, the best solution I have been able to come up with involves utilising Promise.all() (code below), however this has several drawbacks: 1. It involves some really ugly string splitting as you cannot pass an array as into the function as an argument (see here - https://swr.vercel.app/docs/arguments) and it also doesn't properly leverage the cache, because the returned data is stored as a single value, not separate values.

// a utility fetcher function

export function createMultiFetcher(origin: string, baseOptions?: any) {
	return (bigString: string, options?: any) => {
		const delimiter = "~$~";
		const json = options?.body && !isBody(options?.body);
		const init = {
			...baseOptions,
			...options,
			body: json ? JSON.stringify(options?.body) : options?.body,
			headers: {
				...baseOptions?.headers,
				...options?.headers,
				"Content-Type": json ? "application/json" : options?.headers?.["Content-Type"],
			},
		};
		const paths = bigString.split(delimiter);
		const fetchers = paths.map((path) =>
			fetch(origin ? `${origin}/${path}` : path, init).then(async (res) => {
				if (!res.ok) throw await HTTPError.fromResponse(res, origin ? `${origin}/${path}` : path);

				return isJSON(res) ? res.json() : res;
			})
		);
		return Promise.all(fetchers);
	};
}
export function dataMultiFetcher = createMultiFetcher(process.env.NEXT_PUBLIC_BASE_URL!)

// how it would be implemented in a component.

const delimiter = "~$~";
const string = `products?product_id=1${delimiter}products?product_id=2`;
const { data, error } = useSWR(string, (urls) => dataMultiFetcher(urls));
// data would equal [{productID 1's data}, {productID 2's data} ... ]

Many thanks in advance for any input.