Faterek
How can I make sure that data from createAsync is loaded, before passing it to another function
No matter what I do dirID is always undefined when it gets to other functions, createEffect also did nothing for me but that might be because I used it incorrectly.
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>
);
}
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>
);
}
10 replies