const getTests = query(async () => {
"use server";
const db = new Kysely<DB>({ dialect });
return await db.selectFrom("tests").selectAll().execute();
}, "getTests");
const addTest = action(async (formData: FormData) => {
"use server";
const db = new Kysely<DB>({ dialect });
const values: InsertableTest = {
// ...
};
await db.insertInto("tests").values(values).execute();
});
export const route = {
preload() {
getTests();
},
} satisfies RouteDefinition;
export default function TestView() {
const addTestAction = useAction(addTest);
const submission = useSubmission(addTest);
// 1. The `createAsync` accessor for the query DOES NOT work!
const data = createAsync<InsertableTest[]>(async () => await getTests());
// 2. Memoization of the `createAsync` query DOES NOT work!
const tableMemo = createMemo(() => data() ?? []);
// 3. Signal updated via `createEffect` DOES work?
const [tableData, setTableData] = createSignal<InsertableTest[]>([]);
createEffect(() => {
setTableData(data() ?? []);
});
return (
<div>
<DataTable columns={columns} data={data()} />
<Button
disabled={submission.pending}
onClick={() => {
const formData = new FormData();
// formData.append(...);
addTestAction(formData);
}}
>
Insert Test
</Button>
</div>
);
}
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[] | undefined;
}
export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
const table = createSolidTable({
get data() {
return props.data ?? [];
},
get columns() {
return props.columns;
},
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
table.setPageSize(20);
// ...
const getTests = query(async () => {
"use server";
const db = new Kysely<DB>({ dialect });
return await db.selectFrom("tests").selectAll().execute();
}, "getTests");
const addTest = action(async (formData: FormData) => {
"use server";
const db = new Kysely<DB>({ dialect });
const values: InsertableTest = {
// ...
};
await db.insertInto("tests").values(values).execute();
});
export const route = {
preload() {
getTests();
},
} satisfies RouteDefinition;
export default function TestView() {
const addTestAction = useAction(addTest);
const submission = useSubmission(addTest);
// 1. The `createAsync` accessor for the query DOES NOT work!
const data = createAsync<InsertableTest[]>(async () => await getTests());
// 2. Memoization of the `createAsync` query DOES NOT work!
const tableMemo = createMemo(() => data() ?? []);
// 3. Signal updated via `createEffect` DOES work?
const [tableData, setTableData] = createSignal<InsertableTest[]>([]);
createEffect(() => {
setTableData(data() ?? []);
});
return (
<div>
<DataTable columns={columns} data={data()} />
<Button
disabled={submission.pending}
onClick={() => {
const formData = new FormData();
// formData.append(...);
addTestAction(formData);
}}
>
Insert Test
</Button>
</div>
);
}
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[] | undefined;
}
export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
const table = createSolidTable({
get data() {
return props.data ?? [];
},
get columns() {
return props.columns;
},
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
table.setPageSize(20);
// ...