Dependency management: am I missing something built-in?

[zopieux]

Hi folks,

Virtually all of my frontend projects need a primitive like the fully typed dependOn I propose below. In short, I usually need two or more async resources (say, network calls) to be available together for some UI element to be fully available, and those async resources will sometimes depend on each other, creating a dependency graph rooted in the final UI element:

graph TD;
    A --> B;
    B --> Final;
    C --> Final;
    D --> B;
    D --> C;

Loading

Per Solid documentation, leaf nodes (A & D) are createResource(async fn)s with no source. But then, to create dependent resources (B, C & Final) which require inputs, I couldn't find a simple, don't-repeat-yourself "API" in standard Solid and ended up writing the dependOn helper below. Note how dependencies are cleanly passed once and are readily usable as same-name arguments in the fetcher.

The way it is used is the following (Solid Playground):

const [A, { refetch: refetchA }] = createResource(fetchA);
const [D] = createResource(fetchD);
const [B] = createResource(...dependOn({ A, D }, fetchB); 
const [C] = createResource(...dependOn({ D }, fetchC); 
const [final] = createResource(...dependOn({ B, C }, fetchFinal); 

async function fetchB({ A, D }) { return A + D; }
async function fetchC({ D }) { return D * 2; }
async function fetchFinal({ B, C }) { return B + C; }

That implementation is not perfect though. While error state is correctly handled, only the fully "ready" state is correctly propagated. The loading aspect is lost on resources with inputs. However what I want is to only trigger a redraw when one of the inputs changes. I don't want final to disappear while an input loads so as to create the last UI disruptions.

This seems like an extremely standard feature that should be built-in. What am I missing? Thanks!

// dependOn helper:
export function dependOn<
  TResources extends Record<string, Resource<any>>,
  TResult extends { [K in keyof TResources]: ReturnType<TResources[K]> },
  Out,
>(
  resources: TResources,
  actor: (source: TResult) => Promise<Out>,
) {
  const resolver = (): TResult | undefined => {
    for (const key in resources) {
      if (resources[key].state !== 'ready') {
        return undefined
      }
    }
    const out = {} as TResult
    for (const key in resources) {
      out[key] = resources[key]()
    }
    return out
  }
  const fetcher = async (source: TResult | undefined) => {
    if (source === undefined) {
      throw new Error('not ready')
    }
    return await actor(source)
  }
  return [resolver, fetcher] as const
}