Support parallel fetches

The only way to do parallel fetches right now is to render two components as siblings and fetch the data there. Could this library support a getAll() helper that allows fetching multiple requests across the same store? What about multiple stores?

Single store could look something like this:

const userIds = [1,2,3];
const [user1, user2, user3] = getAll(userStore, userIds);

Multiple stores is a little more difficult. An API like this is a little less ergonomic than the above but would cover both cases:

const [foo, bar, baz] = getAll(
  () => fooStore.get(fooId),
  () => barStore.get(barId),
  () => bazStore.get(bazId),
);

An implementation that I got working looks like this, although I’m not sure of it’s correctness

export const getAll = (...fns) => {
  const results = fns.map((fn) => {
    let result;
    try {
      result = { type: "ok", data: fn() };
    } catch (promise) {
      result = { type: "err", promise };
    }

    return result;
  });

  const data = [];
  for (const result of results) {
    if (result.type === "ok") {
      data.push(result.data);
    } else {
      throw result.promise;
    }
  }

  return data;
};

[dai-shi]

Prefetching in an event handler is ideal, but doing in render works (I believe it’s safe.) Doing in an effect seems worse.

If your getAll doesn’t prefetch in render, and you could prefetch all in an event handler, it can be as simple as this:

function User({ id }) {
  const name = nameStore.get(id);
  const age = ageStore.get(id);

  return (
    <>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </>
  );
}

[axelboc]

Yeah, the downside of this is that the requests are made sequentially, if I’m not mistaken, since the component suspends each time. The workaround I found for the single-store case is to do two consecutive loops: one with prefect and one with get. A getAll that does this internally would be convenient.