How can I make sure that data from createAsync is loaded, before passing it to another function

import { createSession } from "@solid-mediakit/auth/client";
import { createAsync, useParams } from "@solidjs/router";
import { Show, For } from "solid-js";
import FileRecord from "@/components/FileRecord";
import {
  getDirID,
  getFiles,
  getSubDirectories,
} from "@/lib/filebrowser-service";

export default function Protected() {
  const session = createSession();

  const params = useParams()["directory"].split("/");
  const ancestors = params.slice(0, -1);
  const name = params[params.length - 1];

  const dirID = createAsync(async () => {
    return JSON.parse(await getDirID(ancestors, name));
  });

  const subDirs = createAsync(async () => {
    return JSON.parse(await getSubDirectories(dirID()));
  });

  const files = createAsync(async () => {
    return JSON.parse(await getFiles(dirID()));
  });

  return (
    <Show
      when={session()}
      fallback={<p>Only shown for logged in users</p>}
      keyed
    >
      <main class="main-content">
        <div class="filemanager-table">
          <Show when={subDirs()}>
            <For each={subDirs()}>{(subDir) => <FileRecord {...subDir} />}</For>
          </Show>
          <Show when={files()}>
            <For each={files()}>{(file) => <FileRecord {...file} />}</For>
          </Show>
        </div>
      </main>
    </Show>
  );
}