improved DataApi types

- Added type definitions for entity data in DataApi, improving type safety across CRUD operations.
- Introduced new test cases in DataApi.spec.ts to validate the behavior of read and create operations, ensuring correct data handling and response types.
- Updated various files to accommodate the new type definitions and ensure compatibility with existing functionality.

app/__test__/api/DataApi.spec.ts

@@ -1,4 +1,4 @@
-import { afterAll, beforeAll, describe, expect, it } from "bun:test";
+import { afterAll, beforeAll, describe, expect, it, expectTypeOf } from "bun:test";
 import { Guard } from "../../src/auth/authorize/Guard";
 import { DataApi } from "../../src/data/api/DataApi";
 import { DataController } from "../../src/data/api/DataController";
@@ -7,6 +7,7 @@ import * as proto from "../../src/data/prototype";
 import { schemaToEm } from "../helper";
 import { disableConsoleLog, enableConsoleLog } from "core/utils/test";
 import { parse } from "core/utils/schema";
+import type { Generated } from "kysely";
 
 beforeAll(disableConsoleLog);
 afterAll(enableConsoleLog);
@@ -219,4 +220,147 @@ describe("DataApi", () => {
          expect(() => api.createMany("posts", [])).toThrow();
       }
    });
+
+   describe("types", async () => {
+      const schema = proto.em(
+         {
+            posts: proto.entity("posts", { title: proto.text(), count: proto.number() }),
+            comments: proto.entity("comments", { text: proto.text() }),
+         },
+         (fn, s) => {
+            fn.relation(s.comments).manyToOne(s.posts);
+         },
+      );
+      const em = schemaToEm(schema);
+      await em.schema().sync({ force: true });
+
+      const data = {
+         posts: [
+            { title: "foo", count: 0 },
+            { title: "bar", count: 0 },
+            { title: "baz", count: 0 },
+            { title: "bla", count: 2 },
+         ],
+         comments: [
+            { text: "comment1", posts_id: 1 },
+            { text: "comment2", posts_id: 1 },
+            { text: "comment3", posts_id: 2 },
+         ],
+      };
+
+      const ctx: any = { em, guard: new Guard() };
+      const controller = new DataController(ctx, dataConfig);
+      const app = controller.getController();
+
+      type Posts = {
+         id: Generated<number>;
+         title?: string;
+         count?: number;
+         comments?: Comments[];
+      };
+      type Comments = {
+         id: Generated<number>;
+         text?: string;
+         posts_id?: number;
+         posts?: Posts;
+      };
+      type DB = {
+         posts: Posts;
+         comments: Comments;
+      };
+
+      const api = new DataApi<DB>({ basepath: "/" }, app.request);
+      for (const [entity, payload] of Object.entries(data)) {
+         await api.createMany(entity as any, payload);
+      }
+
+      it("readOne", async () => {
+         const result = await api.readOne("posts", 1);
+         const expected = { id: 1, title: "foo", count: 0 } as any;
+         expect(result.res).toBeInstanceOf(Response);
+         expect(result.data).toEqual(expected);
+         expect(result.body.meta.items).toEqual(1);
+
+         expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts | null>();
+
+         {
+            // not found
+            const result = await api.readOne("posts", 0);
+            expect(result.res.status).toEqual(404);
+            expect(result.data).toBeNull();
+            expect(result.body.meta.items).toEqual(0);
+            expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts | null>();
+         }
+      });
+
+      it("readOneBy", async () => {
+         const result = await api.readOneBy("posts", { where: { title: "foo" } });
+         const expected = { id: 1, title: "foo", count: 0 } as any;
+         expect(result.res.status).toEqual(200);
+         expect(result.data).toEqual(expected);
+         // @ts-expect-error body data is typed same as data...
+         expect(result.body.data).toEqual([expected]); // should be array
+         expect(result.body.meta.items).toEqual(1);
+         expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts | null>();
+
+         {
+            // not found
+            const result = await api.readOneBy("posts", { where: { title: "not found" } });
+            // since we're filtering, the result is okay, but empty
+            expect(result.res.status).toEqual(200);
+            expect(result.data).toBeNull();
+            // @ts-expect-error body data is typed same as data...
+            expect(result.body.data).toEqual([]);
+            expect(result.body.meta.items).toEqual(0);
+            expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts | null>();
+         }
+      });
+
+      it("readMany", async () => {
+         const result = await api.readMany("posts", { where: { title: "foo" } });
+         const expected = [{ id: 1, title: "foo", count: 0 }] as any;
+         expect(result.res.status).toEqual(200);
+         expect(result.data).toEqual(expected);
+         expect(result.body.data).toEqual(expected);
+         expect(result.body.meta.items).toEqual(1);
+         expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts[]>();
+
+         {
+            // not found
+            const result = await api.readMany("posts", { where: { title: "not found" } });
+            expect(result.res.status).toEqual(200);
+            expect(result.data).toEqual([]);
+            expect(result.body.meta.items).toEqual(0);
+            expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Posts[]>();
+         }
+      });
+
+      it("readManyByReference", async () => {
+         const result = await api.readManyByReference("posts", 1, "comments");
+         const expected = [
+            { id: 1, text: "comment1", posts_id: 1 },
+            { id: 2, text: "comment2", posts_id: 1 },
+         ] as any;
+         expect(result.res.status).toEqual(200);
+         expect(result.data).toEqual(expected);
+         expect(result.body.meta.items).toEqual(2);
+         expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Comments[]>();
+
+         {
+            // empty
+            const result = await api.readManyByReference("posts", 3, "comments");
+            expect(result.res.status).toEqual(200);
+            expect(result.data).toEqual([]);
+            expect(result.body.meta.items).toEqual(0);
+            expectTypeOf<(typeof result)["data"]>().toEqualTypeOf<Comments[]>();
+         }
+
+         {
+            // non existing (expected, since only 1 query is performed)
+            const result = await api.readManyByReference("posts", 100, "comments");
+            expect(result.res.status).toEqual(200);
+            expect(result.data).toEqual([]);
+         }
+      });
+   });
 });

app/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "sideEffects": false,
   "bin": "./dist/cli/index.js",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Lightweight Firebase/Supabase alternative built to run anywhere — incl. Next.js, React Router, Astro, Cloudflare, Bun, Node, AWS Lambda & more.",
   "homepage": "https://bknd.io",
   "repository": {
@@ -65,7 +65,7 @@
     "hono": "4.8.3",
     "json-schema-library": "10.0.0-rc7",
     "json-schema-to-ts": "^3.1.1",
-    "jsonv-ts": "0.8.4",
+    "jsonv-ts": "0.8.5",
     "kysely": "0.27.6",
     "lodash-es": "^4.17.21",
     "oauth4webapi": "^2.11.1",

app/src/core/config.ts

@@ -1,6 +1,7 @@
 /**
  * These are package global defaults.
  */
+import type { EntityData } from "data/entities";
 import type { Generated } from "kysely";
 
 export type PrimaryFieldType<IdType = number | string> = IdType | Generated<IdType>;
@@ -16,7 +17,7 @@ export interface DB {
       [key: string]: any;
    }; */
    // @todo: that's not good, but required for admin options
-   [key: string]: any;
+   [key: string]: EntityData;
 }
 
 export const config = {

app/src/data/api/DataApi.ts

@@ -1,4 +1,4 @@
-import type { DB, EntityData, RepoQueryIn } from "bknd";
+import type { DB as DefaultDB, EntityData, RepoQueryIn } from "bknd";
 
 import type { Insertable, Selectable, Updateable } from "kysely";
 import { type BaseModuleApiOptions, ModuleApi, type PrimaryFieldType } from "modules";
@@ -10,7 +10,9 @@ export type DataApiOptions = BaseModuleApiOptions & {
    defaultQuery: Partial<RepoQueryIn>;
 };
 
-export class DataApi extends ModuleApi<DataApiOptions> {
+type EntityObject<DB, E> = E extends keyof DB ? DB[E] : EntityData;
+
+export class DataApi<DB = DefaultDB> extends ModuleApi<DataApiOptions> {
    protected override getDefaultOptions(): Partial<DataApiOptions> {
       return {
          basepath: "/api/data",
@@ -32,29 +34,26 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       id: PrimaryFieldType,
       query: Omit<RepoQueryIn, "where" | "limit" | "offset"> = {},
    ) {
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.get<RepositoryResultJSON<Data>>(["entity", entity as any, id], query);
+      type T = RepositoryResultJSON<EntityObject<DB, E> | null>;
+      return this.get<T>(["entity", entity as any, id], query);
    }
 
    readOneBy<E extends keyof DB | string>(
       entity: E,
       query: Omit<RepoQueryIn, "limit" | "offset" | "sort"> = {},
    ) {
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      type T = RepositoryResultJSON<Data>;
-
-      // @todo: if none found, still returns meta...
-
+      // @todo: if none found, it still returns 200, since it's readMany
       return this.readMany(entity, {
          ...query,
          limit: 1,
          offset: 0,
-      }).refine((data) => data[0]) as unknown as FetchPromise<ResponseObject<T>>;
+      }).refine((data) => data[0] ?? null) as unknown as FetchPromise<
+         ResponseObject<RepositoryResultJSON<EntityObject<DB, E> | null>>
+      >;
    }
 
    readMany<E extends keyof DB | string>(entity: E, query: RepoQueryIn = {}) {
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      type T = RepositoryResultJSON<Data[]>;
+      type T = RepositoryResultJSON<EntityObject<DB, E>[]>;
 
       const input = query ?? this.options.defaultQuery;
       const req = this.get<T>(["entity", entity as any], input);
@@ -72,8 +71,7 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       reference: R,
       query: RepoQueryIn = {},
    ) {
-      type Data = R extends keyof DB ? Selectable<DB[R]> : EntityData;
-      return this.get<RepositoryResultJSON<Data[]>>(
+      return this.get<RepositoryResultJSON<EntityObject<DB, R>[]>>(
          ["entity", entity as any, id, reference],
          query ?? this.options.defaultQuery,
       );
@@ -83,8 +81,7 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       entity: E,
       input: Insertable<Input>,
    ) {
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.post<RepositoryResultJSON<Data>>(["entity", entity as any], input);
+      return this.post<RepositoryResultJSON<EntityObject<DB, E>>>(["entity", entity as any], input);
    }
 
    createMany<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
@@ -94,8 +91,10 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       if (!input || !Array.isArray(input) || input.length === 0) {
          throw new Error("input is required");
       }
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.post<RepositoryResultJSON<Data[]>>(["entity", entity as any], input);
+      return this.post<RepositoryResultJSON<EntityObject<DB, E>[]>>(
+         ["entity", entity as any],
+         input,
+      );
    }
 
    updateOne<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
@@ -104,8 +103,10 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       input: Updateable<Input>,
    ) {
       if (!id) throw new Error("ID is required");
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.patch<RepositoryResultJSON<Data>>(["entity", entity as any, id], input);
+      return this.patch<RepositoryResultJSON<EntityObject<DB, E>>>(
+         ["entity", entity as any, id],
+         input,
+      );
    }
 
    updateMany<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
@@ -114,8 +115,7 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       update: Updateable<Input>,
    ) {
       this.requireObjectSet(where);
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.patch<RepositoryResultJSON<Data[]>>(["entity", entity as any], {
+      return this.patch<RepositoryResultJSON<EntityObject<DB, E>[]>>(["entity", entity as any], {
          update,
          where,
       });
@@ -123,14 +123,15 @@ export class DataApi extends ModuleApi<DataApiOptions> {
 
    deleteOne<E extends keyof DB | string>(entity: E, id: PrimaryFieldType) {
       if (!id) throw new Error("ID is required");
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.delete<RepositoryResultJSON<Data>>(["entity", entity as any, id]);
+      return this.delete<RepositoryResultJSON<EntityObject<DB, E>>>(["entity", entity as any, id]);
    }
 
    deleteMany<E extends keyof DB | string>(entity: E, where: RepoQueryIn["where"]) {
       this.requireObjectSet(where);
-      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
-      return this.delete<RepositoryResultJSON<Data>>(["entity", entity as any], where);
+      return this.delete<RepositoryResultJSON<EntityObject<DB, E>[]>>(
+         ["entity", entity as any],
+         where,
+      );
    }
 
    count<E extends keyof DB | string>(entity: E, where: RepoQueryIn["where"] = {}) {

app/src/data/entities/Entity.ts

@@ -1,4 +1,4 @@
-import { config } from "core/config";
+import { config, type PrimaryFieldType } from "core/config";
 import { snakeToPascalWithSpaces, transformObject, $console, s, parse } from "bknd/utils";
 import {
    type Field,
@@ -25,7 +25,10 @@ export const entityConfigSchema = s
 
 export type EntityConfig = s.Static<typeof entityConfigSchema>;
 
-export type EntityData = Record<string, any>;
+export type EntityData = {
+   id: PrimaryFieldType;
+   [key: string]: any;
+};
 export type EntityJSON = ReturnType<Entity["toJSON"]>;
 
 /**

app/src/data/entities/Result.ts

@@ -119,7 +119,7 @@ export class Result<T = unknown> {
       const keys = isDebug() ? ["items", "time", "sql", "parameters"] : ["items", "time"];
       const meta = pick(metaRaw, [...keys, ...this.additionalMetaKeys()] as any);
       return {
-         data: this.data,
+         data: this.data ? this.data : ((this.options.single ? null : []) as T),
          meta,
       };
    }

app/src/data/entities/mutation/Mutator.ts

@@ -54,7 +54,7 @@ export class Mutator<
       }
 
       const keys = Object.keys(data as any);
-      const validatedData: EntityData = {};
+      const validatedData: Partial<EntityData> = {};
 
       // get relational references/keys
       const relationMutator = new RelationMutator(entity, this.em);
@@ -101,10 +101,10 @@ export class Mutator<
       return validatedData as Given;
    }
 
-   protected async performQuery<T = EntityData[]>(
+   protected async performQuery<O extends MutatorResultOptions>(
       qb: MutatorQB,
-      opts?: MutatorResultOptions,
-   ): Promise<MutatorResult<T>> {
+      opts?: O,
+   ): Promise<MutatorResult<O extends { single: true } ? EntityData : EntityData[]>> {
       const result = new MutatorResult(this.em, this.entity, {
          silent: false,
          ...opts,
@@ -282,7 +282,7 @@ export class Mutator<
          entity.getSelect(),
       );
 
-      return await this.performQuery(qb);
+      return (await this.performQuery(qb)) as any;
    }
 
    async updateWhere(
@@ -301,7 +301,7 @@ export class Mutator<
          .set(validatedData as any)
          .returning(entity.getSelect());
 
-      return await this.performQuery(query);
+      return (await this.performQuery(query)) as any;
    }
 
    async insertMany(data: Input[]): Promise<MutatorResult<Output[]>> {
@@ -336,6 +336,6 @@ export class Mutator<
          .values(validated)
          .returning(entity.getSelect());
 
-      return await this.performQuery(query);
+      return (await this.performQuery(query)) as any;
    }
 }

app/src/data/entities/query/Repository.ts

@@ -180,15 +180,23 @@ export class Repository<TBD extends object = DefaultDB, TB extends keyof TBD = a
    private async triggerFindAfter(
       entity: Entity,
       options: RepoQuery,
-      data: EntityData[],
+      data: EntityData | EntityData[],
    ): Promise<void> {
       if (options.limit === 1) {
          await this.emgr.emit(
-            new Repository.Events.RepositoryFindOneAfter({ entity, options, data }),
+            new Repository.Events.RepositoryFindOneAfter({
+               entity,
+               options,
+               data: data as EntityData,
+            }),
          );
       } else {
          await this.emgr.emit(
-            new Repository.Events.RepositoryFindManyAfter({ entity, options, data }),
+            new Repository.Events.RepositoryFindManyAfter({
+               entity,
+               options,
+               data: data as EntityData[],
+            }),
          );
       }
    }

app/src/data/events/index.ts

@@ -4,6 +4,8 @@ import { Event, InvalidEventReturn } from "core/events";
 import type { Entity, EntityData } from "../entities";
 import type { RepoQuery } from "data/server/query";
 
+type PartialEntityData = Omit<EntityData, "id">;
+
 export class MutatorInsertBefore extends Event<{ entity: Entity; data: EntityData }, EntityData> {
    static override slug = "mutator-insert-before";
 
@@ -26,7 +28,7 @@ export class MutatorInsertBefore extends Event<{ entity: Entity; data: EntityDat
 export class MutatorInsertAfter extends Event<{
    entity: Entity;
    data: EntityData;
-   changed: EntityData;
+   changed: PartialEntityData;
 }> {
    static override slug = "mutator-insert-after";
 }
@@ -34,7 +36,7 @@ export class MutatorUpdateBefore extends Event<
    {
       entity: Entity;
       entityId: PrimaryFieldType;
-      data: EntityData;
+      data: PartialEntityData;
    },
    EntityData
 > {
@@ -61,8 +63,8 @@ export class MutatorUpdateBefore extends Event<
 export class MutatorUpdateAfter extends Event<{
    entity: Entity;
    entityId: PrimaryFieldType;
-   data: EntityData;
-   changed: EntityData;
+   data: PartialEntityData;
+   changed: PartialEntityData;
 }> {
    static override slug = "mutator-update-after";
 }
@@ -104,7 +106,7 @@ export class RepositoryFindManyBefore extends Event<{ entity: Entity; options: R
 export class RepositoryFindManyAfter extends Event<{
    entity: Entity;
    options: RepoQuery;
-   data: EntityData;
+   data: EntityData[];
 }> {
    static override slug = "repository-find-many-after";
 }

app/src/data/helper.ts

@@ -16,7 +16,7 @@ export function getDefaultValues(fields: Field[], data: EntityData): EntityData
 export function getChangeSet(
    action: string,
    formData: EntityData,
-   data: EntityData,
+   data: EntityData | object,
    fields: Field[],
 ): EntityData {
    return transform(

app/src/media/api/MediaApi.ts

@@ -1,11 +1,14 @@
 import type { FileListObject } from "media/storage/Storage";
 import {
    type BaseModuleApiOptions,
+   type FetchPromise,
+   type ResponseObject,
    ModuleApi,
    type PrimaryFieldType,
    type TInput,
 } from "modules/ModuleApi";
 import type { ApiFetcher } from "Api";
+import type { DB, FileUploadedEventData } from "bknd";
 
 export type MediaApiOptions = BaseModuleApiOptions & {
    upload_fetcher: ApiFetcher;
@@ -67,14 +70,14 @@ export class MediaApi extends ModuleApi<MediaApiOptions> {
       return new Headers();
    }
 
-   protected uploadFile(
+   protected uploadFile<T extends FileUploadedEventData>(
       body: File | Blob | ReadableStream | Buffer<ArrayBufferLike>,
       opts?: {
          filename?: string;
          path?: TInput;
          _init?: Omit<RequestInit, "body">;
       },
-   ) {
+   ): FetchPromise<ResponseObject<T>> {
       const headers = {
          "Content-Type": "application/octet-stream",
          ...(opts?._init?.headers || {}),
@@ -106,10 +109,10 @@ export class MediaApi extends ModuleApi<MediaApiOptions> {
          throw new Error("Invalid filename");
       }
 
-      return this.post(opts?.path ?? ["upload", name], body, init);
+      return this.post<T>(opts?.path ?? ["upload", name], body, init);
    }
 
-   async upload(
+   async upload<T extends FileUploadedEventData>(
       item: Request | Response | string | File | Blob | ReadableStream | Buffer<ArrayBufferLike>,
       opts: {
          filename?: string;
@@ -124,12 +127,12 @@ export class MediaApi extends ModuleApi<MediaApiOptions> {
          if (!res.ok || !res.body) {
             throw new Error("Failed to fetch file");
          }
-         return this.uploadFile(res.body, opts);
+         return this.uploadFile<T>(res.body, opts);
       } else if (item instanceof Response) {
          if (!item.body) {
             throw new Error("Invalid response");
          }
-         return this.uploadFile(item.body, {
+         return this.uploadFile<T>(item.body, {
             ...(opts ?? {}),
             _init: {
                ...(opts._init ?? {}),
@@ -141,7 +144,7 @@ export class MediaApi extends ModuleApi<MediaApiOptions> {
          });
       }
 
-      return this.uploadFile(item, opts);
+      return this.uploadFile<T>(item, opts);
    }
 
    async uploadToEntity(
@@ -153,7 +156,7 @@ export class MediaApi extends ModuleApi<MediaApiOptions> {
          _init?: Omit<RequestInit, "body">;
          fetcher?: typeof fetch;
       },
-   ) {
+   ): Promise<ResponseObject<FileUploadedEventData & { result: DB["media"] }>> {
       return this.upload(item, {
          ...opts,
          path: ["entity", entity, id, field],

app/src/modules/ModuleApi.ts

@@ -167,7 +167,6 @@ export type ResponseObject<Body = any, Data = Body extends { data: infer R } ? R
    data: Data;
    body: Body;
    ok: boolean;
-   status: number;
    toJSON(): Data;
 };
 
@@ -177,10 +176,10 @@ export function createResponseProxy<Body = any, Data = any>(
    data?: Data,
 ): ResponseObject<Body, Data> {
    let actualData: any = typeof data !== "undefined" ? data : body;
-   const _props = ["raw", "body", "ok", "status", "res", "data", "toJSON"];
+   const _props = ["raw", "body", "ok", "res", "data", "toJSON"];
 
    // that's okay, since you have to check res.ok anyway
-   if (typeof actualData !== "object") {
+   if (typeof actualData !== "object" || actualData === null) {
       actualData = {};
    }
 
@@ -190,7 +189,6 @@ export function createResponseProxy<Body = any, Data = any>(
          if (prop === "body") return body;
          if (prop === "data") return data;
          if (prop === "ok") return raw.ok;
-         if (prop === "status") return raw.status;
          if (prop === "toJSON") {
             return () => target;
          }

app/src/ui/client/api/use-api.ts

@@ -35,7 +35,7 @@ export const useApiInfiniteQuery = <
    RefineFn extends (data: ResponseObject<Data>) => unknown = (data: ResponseObject<Data>) => Data,
 >(
    fn: (api: Api, page: number) => FetchPromise<Data>,
-   options?: SWRConfiguration & { refine?: RefineFn },
+   options?: SWRConfiguration & { refine?: RefineFn; pageSize?: number },
 ) => {
    const [endReached, setEndReached] = useState(false);
    const api = useApi();
@@ -47,7 +47,7 @@ export const useApiInfiniteQuery = <
    // @ts-ignore
    const swr = useSWRInfinite<RefinedData>(
       (index, previousPageData: any) => {
-         if (previousPageData && !previousPageData.length) {
+         if (index > 0 && previousPageData && previousPageData.length < (options?.pageSize ?? 0)) {
             setEndReached(true);
             return null; // reached the end
          }

app/src/ui/client/api/use-entity.ts

@@ -1,9 +1,14 @@
-import type { DB, PrimaryFieldType, EntityData, RepoQueryIn } from "bknd";
+import type {
+   DB,
+   PrimaryFieldType,
+   EntityData,
+   RepoQueryIn,
+   ResponseObject,
+   ModuleApi,
+} from "bknd";
 import { objectTransform, encodeSearch } from "bknd/utils";
-import type { RepositoryResult } from "data/entities";
-import type { Insertable, Selectable, Updateable } from "kysely";
-import type { FetchPromise, ModuleApi, ResponseObject } from "modules/ModuleApi";
-import useSWR, { type SWRConfiguration, type SWRResponse, mutate } from "swr";
+import type { Insertable, Updateable } from "kysely";
+import useSWR, { type SWRConfiguration, type SWRResponse, mutate, type KeyedMutator } from "swr";
 import { type Api, useApi } from "ui/client";
 
 export class UseEntityApiError<Payload = any> extends Error {
@@ -27,18 +32,16 @@ interface UseEntityReturn<
    Entity extends keyof DB | string,
    Id extends PrimaryFieldType | undefined,
    Data = Entity extends keyof DB ? DB[Entity] : EntityData,
-   Response = ResponseObject<RepositoryResult<Selectable<Data>>>,
+   Response = ResponseObject<Data>,
 > {
    create: (input: Insertable<Data>) => Promise<Response>;
-   read: (
-      query?: RepoQueryIn,
-   ) => Promise<
-      ResponseObject<RepositoryResult<Id extends undefined ? Selectable<Data>[] : Selectable<Data>>>
-   >;
+   read: (query?: RepoQueryIn) => Promise<ResponseObject<Id extends undefined ? Data[] : Data>>;
    update: Id extends undefined
-      ? (input: Updateable<Data>, id: Id) => Promise<Response>
+      ? (input: Updateable<Data>, id: PrimaryFieldType) => Promise<Response>
       : (input: Updateable<Data>) => Promise<Response>;
-   _delete: Id extends undefined ? (id: Id) => Promise<Response> : () => Promise<Response>;
+   _delete: Id extends undefined
+      ? (id: PrimaryFieldType) => Promise<Response>
+      : () => Promise<Response>;
 }
 
 export const useEntity = <
@@ -54,14 +57,14 @@ export const useEntity = <
    return {
       create: async (input: Insertable<Data>) => {
          const res = await api.createOne(entity, input as any);
-         if (!res.ok) {
+         if (!res.res.ok) {
             throw new UseEntityApiError(res, `Failed to create entity "${entity}"`);
          }
          return res as any;
       },
       read: async (query?: RepoQueryIn) => {
          const res = id ? await api.readOne(entity, id!, query) : await api.readMany(entity, query);
-         if (!res.ok) {
+         if (!res.res.ok) {
             throw new UseEntityApiError(res as any, `Failed to read entity "${entity}"`);
          }
          return res as any;
@@ -72,7 +75,7 @@ export const useEntity = <
             throw new Error("id is required");
          }
          const res = await api.updateOne(entity, _id, input);
-         if (!res.ok) {
+         if (!res.res.ok) {
             throw new UseEntityApiError(res, `Failed to update entity "${entity}"`);
          }
          return res as any;
@@ -84,7 +87,7 @@ export const useEntity = <
          }
 
          const res = await api.deleteOne(entity, _id);
-         if (!res.ok) {
+         if (!res.res.ok) {
             throw new UseEntityApiError(res, `Failed to delete entity "${entity}"`);
          }
          return res as any;
@@ -108,15 +111,15 @@ export function makeKey(
    );
 }
 
-interface UseEntityQueryReturn<
+export interface UseEntityQueryReturn<
    Entity extends keyof DB | string,
    Id extends PrimaryFieldType | undefined = undefined,
-   Data = Entity extends keyof DB ? Selectable<DB[Entity]> : EntityData,
-   Return = Id extends undefined ? ResponseObject<Data[]> : ResponseObject<Data>,
+   Data = DB[Entity],
+   Return = Id extends undefined ? Data[] : Data,
 > extends Omit<SWRResponse<Return>, "mutate">,
       Omit<ReturnType<typeof useEntity<Entity, Id>>, "read"> {
    mutate: (id?: PrimaryFieldType) => Promise<any>;
-   mutateRaw: SWRResponse<Return>["mutate"];
+   mutateRaw: KeyedMutator<Data | Data[]>;
    api: Api["data"];
    key: string;
 }
@@ -136,11 +139,11 @@ export const useEntityQuery = <
    const fetcher = () => read(query ?? {});
 
    type T = Awaited<ReturnType<typeof fetcher>>;
-   const swr = useSWR<T>(options?.enabled === false ? null : key, fetcher as any, {
+   const swr = useSWR(options?.enabled === false ? null : key, fetcher as any, {
       revalidateOnFocus: false,
       keepPreviousData: true,
       ...options,
-   });
+   }) as ReturnType<typeof useSWR<T>>;
 
    const mutateFn = async (id?: PrimaryFieldType) => {
       const entityKey = makeKey(api, entity as string, id);
@@ -163,21 +166,23 @@ export const useEntityQuery = <
       };
    }) as Omit<ReturnType<typeof useEntity<Entity, Id>>, "read">;
 
+   const data = swr.data ? swr.data.data : id ? null : [];
+
    return {
       ...swr,
       ...mapped,
+      data,
       mutate: mutateFn,
-      // @ts-ignore
       mutateRaw: swr.mutate,
       api,
       key,
-   };
+   } as any;
 };
 
 export async function mutateEntityCache<
    Entity extends keyof DB | string,
    Data = Entity extends keyof DB ? DB[Entity] : EntityData,
->(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Selectable<Data>>) {
+>(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Data>) {
    function update(prev: any, partialNext: any) {
       if (
          typeof prev !== "undefined" &&
@@ -214,8 +219,8 @@ interface UseEntityMutateReturn<
    Data = Entity extends keyof DB ? DB[Entity] : EntityData,
 > extends Omit<ReturnType<typeof useEntityQuery<Entity, Id>>, "mutate"> {
    mutate: Id extends undefined
-      ? (id: PrimaryFieldType, data: Partial<Selectable<Data>>) => Promise<void>
-      : (data: Partial<Selectable<Data>>) => Promise<void>;
+      ? (id: PrimaryFieldType, data: Partial<Data>) => Promise<void>
+      : (data: Partial<Data>) => Promise<void>;
 }
 
 export const useEntityMutate = <
@@ -233,9 +238,8 @@ export const useEntityMutate = <
    });
 
    const _mutate = id
-      ? (data: Partial<Selectable<Data>>) => mutateEntityCache($q.api, entity, id, data)
-      : (id: PrimaryFieldType, data: Partial<Selectable<Data>>) =>
-           mutateEntityCache($q.api, entity, id, data);
+      ? (data: Partial<Data>) => mutateEntityCache($q.api, entity, id, data)
+      : (id: PrimaryFieldType, data: Partial<Data>) => mutateEntityCache($q.api, entity, id, data);
 
    return {
       ...$q,

app/src/ui/components/table/DataTable.tsx

@@ -53,7 +53,7 @@ export type DataTableProps<Data> = {
 };
 
 export function DataTable<Data extends Record<string, any> = Record<string, any>>({
-   data = [],
+   data: _data = [],
    columns,
    checkable,
    onClickRow,
@@ -71,11 +71,14 @@ export function DataTable<Data extends Record<string, any> = Record<string, any>
    renderValue,
    onClickNew,
 }: DataTableProps<Data>) {
+   const hasTotal = !!total;
+   const data = Array.isArray(_data) ? _data.slice(0, perPage) : _data;
    total = total || data?.length || 0;
    page = page || 1;
 
    const select = columns && columns.length > 0 ? columns : Object.keys(data?.[0] || {});
    const pages = Math.max(Math.ceil(total / perPage), 1);
+   const hasNext = hasTotal ? pages > page : (_data?.length || 0) > perPage;
    const CellRender = renderValue || CellValue;
 
    return (
@@ -202,7 +205,7 @@ export function DataTable<Data extends Record<string, any> = Record<string, any>
                   perPage={perPage}
                   page={page}
                   items={data?.length || 0}
-                  total={total}
+                  total={hasTotal ? total : undefined}
                />
             </div>
             <div className="flex flex-row gap-2 md:gap-10 items-center">
@@ -222,11 +225,17 @@ export function DataTable<Data extends Record<string, any> = Record<string, any>
                   </div>
                )}
                <div className="text-primary/40">
-                  Page {page} of {pages}
+                  Page {page}
+                  {hasTotal ? <> of {pages}</> : ""}
                </div>
                {onClickPage && (
                   <div className="flex flex-row gap-1.5">
-                     <TableNav current={page} total={pages} onClick={onClickPage} />
+                     <TableNav
+                        current={page}
+                        total={hasTotal ? pages : page + (hasNext ? 1 : 0)}
+                        onClick={onClickPage}
+                        hasLast={hasTotal}
+                     />
                   </div>
                )}
             </div>
@@ -268,17 +277,23 @@ const SortIndicator = ({
 };
 
 const TableDisplay = ({ perPage, page, items, total }) => {
-   if (total === 0) {
+   if (items === 0 && page === 1) {
       return <>No rows to show</>;
    }
 
-   if (total === 1) {
-      return <>Showing 1 row</>;
+   const start = Math.max(perPage * (page - 1), 1);
+
+   if (!total) {
+      return (
+         <>
+            Showing {start}-{perPage * (page - 1) + items}
+         </>
+      );
    }
 
    return (
       <>
-         Showing {perPage * (page - 1) + 1}-{perPage * (page - 1) + items} of {total} rows
+         Showing {start}-{perPage * (page - 1) + items} of {total} rows
       </>
    );
 };
@@ -287,30 +302,44 @@ type TableNavProps = {
    current: number;
    total: number;
    onClick?: (page: number) => void;
+   hasLast?: boolean;
 };
 
-const TableNav: React.FC<TableNavProps> = ({ current, total, onClick }: TableNavProps) => {
+const TableNav: React.FC<TableNavProps> = ({
+   current,
+   total,
+   onClick,
+   hasLast = true,
+}: TableNavProps) => {
    const navMap = [
-      { value: 1, Icon: TbChevronsLeft, disabled: current === 1 },
-      { value: current - 1, Icon: TbChevronLeft, disabled: current === 1 },
-      { value: current + 1, Icon: TbChevronRight, disabled: current === total },
-      { value: total, Icon: TbChevronsRight, disabled: current === total },
+      { enabled: true, value: 1, Icon: TbChevronsLeft, disabled: current === 1 },
+      { enabled: true, value: current - 1, Icon: TbChevronLeft, disabled: current === 1 },
+      {
+         enabled: true,
+         value: current + 1,
+         Icon: TbChevronRight,
+         disabled: current === total,
+      },
+      { enabled: hasLast, value: total, Icon: TbChevronsRight, disabled: current === total },
    ] as const;
 
-   return navMap.map((nav, key) => (
-      <button
-         role="button"
-         type="button"
-         key={key}
-         disabled={nav.disabled}
-         className="px-2 py-2 border-muted border rounded-md enabled:link text-lg enabled:hover:bg-primary/5 text-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
-         onClick={() => {
-            const page = nav.value;
-            const safePage = page < 1 ? 1 : page > total ? total : page;
-            onClick?.(safePage);
-         }}
-      >
-         <nav.Icon />
-      </button>
-   ));
+   return navMap.map(
+      (nav, key) =>
+         nav.enabled && (
+            <button
+               role="button"
+               type="button"
+               key={key}
+               disabled={nav.disabled}
+               className="px-2 py-2 border-muted border rounded-md enabled:link text-lg enabled:hover:bg-primary/5 text-primary/90 disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
+               onClick={() => {
+                  const page = nav.value;
+                  const safePage = page < 1 ? 1 : page > total ? total : page;
+                  onClick?.(safePage);
+               }}
+            >
+               <nav.Icon />
+            </button>
+         ),
+   );
 };

app/src/ui/elements/media/DropzoneContainer.tsx

@@ -77,7 +77,9 @@ export function DropzoneContainer({
            });
 
    const $q = infinite
-      ? useApiInfiniteQuery(selectApi, {})
+      ? useApiInfiniteQuery(selectApi, {
+           pageSize,
+        })
       : useApiQuery(selectApi, {
            enabled: initialItems !== false && !initialItems,
            revalidateOnFocus: false,
@@ -108,31 +110,48 @@ export function DropzoneContainer({
       []) as MediaFieldSchema[];
    const _initialItems = mediaItemsToFileStates(actualItems, { baseUrl });
 
-   const key = id + JSON.stringify(_initialItems);
+   const key = id + JSON.stringify(initialItems);
+
+   // check if endpoint reeturns a total, then reaching end is easy
+   const total = "_data" in $q ? $q._data?.[0]?.body.meta.count : undefined;
+   let placeholderLength = 0;
+   if (infinite && "setSize" in $q) {
+      placeholderLength =
+         typeof total === "number"
+            ? total
+            : $q.endReached
+              ? _initialItems.length
+              : _initialItems.length + pageSize;
+
+      // in case there is no total, we overfetch but SWR don't reflect an empty result
+      // therefore we check if it stopped loading, but has a bigger page size than the total.
+      // if that's the case, we assume we reached the end.
+      if (!total && !$q.isValidating && pageSize * $q.size >= placeholderLength) {
+         placeholderLength = _initialItems.length;
+      }
+   }
+
    return (
-      <Dropzone
-         key={id + key}
-         getUploadInfo={getUploadInfo}
-         handleDelete={handleDelete}
-         /* onUploaded={refresh}
-         onDeleted={refresh} */
-         autoUpload
-         initialItems={_initialItems}
-         footer={
-            infinite &&
-            "setSize" in $q && (
-               <Footer
-                  items={_initialItems.length}
-                  length={Math.min(
-                     $q._data?.[0]?.body.meta.count ?? 0,
-                     _initialItems.length + pageSize,
-                  )}
-                  onFirstVisible={() => $q.setSize($q.size + 1)}
-               />
-            )
-         }
-         {...props}
-      />
+      <>
+         <Dropzone
+            key={key}
+            getUploadInfo={getUploadInfo}
+            handleDelete={handleDelete}
+            autoUpload
+            initialItems={_initialItems}
+            footer={
+               infinite &&
+               "setSize" in $q && (
+                  <Footer
+                     items={_initialItems.length}
+                     length={placeholderLength}
+                     onFirstVisible={() => $q.setSize($q.size + 1)}
+                  />
+               )
+            }
+            {...props}
+         />
+      </>
    );
 }
 

app/src/ui/hooks/use-search.ts

@@ -14,10 +14,6 @@ export function useSearch<Schema extends s.Schema = s.Schema>(
 ) {
    const searchString = useWouterSearch();
    const [location, navigate] = useLocation();
-   const [value, setValue] = useState<s.StaticCoerced<Schema>>(
-      options?.defaultValue ?? ({} as any),
-   );
-
    const defaults = useMemo(() => {
       return mergeObject(
          // @ts-ignore
@@ -25,6 +21,7 @@ export function useSearch<Schema extends s.Schema = s.Schema>(
          options?.defaultValue ?? {},
       );
    }, [JSON.stringify({ schema, dflt: options?.defaultValue })]);
+   const [value, setValue] = useState<s.StaticCoerced<Schema>>(defaults);
 
    useEffect(() => {
       const initial =

app/src/ui/modules/data/components/EntityForm.tsx

@@ -301,19 +301,9 @@ function EntityJsonFormField({
                onChange={handleUpdate}
                onBlur={fieldApi.handleBlur}
                minHeight="100"
-               /*required={field.isRequired()}*/
                {...props}
             />
          </Suspense>
-         {/*<Formy.Textarea
-            name={fieldApi.name}
-            id={fieldApi.name}
-            value={fieldApi.state.value}
-            onBlur={fieldApi.handleBlur}
-            onChange={handleUpdate}
-            required={field.isRequired()}
-            {...props}
-         />*/}
       </Formy.Group>
    );
 }
@@ -340,8 +330,8 @@ function EntityEnumFormField({
             {...props}
          >
             {!field.isRequired() && <option value="">- Select -</option>}
-            {field.getOptions().map((option) => (
-               <option key={option.value} value={option.value}>
+            {field.getOptions().map((option, i) => (
+               <option key={`${option.value}-${i}`} value={option.value}>
                   {option.label}
                </option>
             ))}

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -44,7 +44,7 @@ export function EntityRelationalFormField({
    const ref = useRef<any>(null);
    const $q = useEntityQuery(field.target(), undefined, {
       select: query.select,
-      limit: query.limit,
+      limit: query.limit + 1 /* overfetch for softscan=false */,
       offset: (query.page - 1) * query.limit,
    });
    const [_value, _setValue] = useState<{ id: number | undefined; [key: string]: any }>();

app/src/ui/modules/data/hooks/useEntityForm.tsx

@@ -5,7 +5,7 @@ import { getChangeSet, getDefaultValues } from "data/helper";
 type EntityFormProps = {
    action: "create" | "update";
    entity: Entity;
-   initialData?: EntityData | null;
+   initialData?: EntityData | object | null;
    onSubmitted?: (changeSet?: EntityData) => Promise<void>;
 };
 
@@ -20,7 +20,7 @@ export function useEntityForm({
    const fields = entity.getFillableFields(action, true);
 
    // filter defaultValues to only contain fillable fields
-   const defaultValues = getDefaultValues(fields, data);
+   const defaultValues = getDefaultValues(fields, data as any);
    //console.log("useEntityForm", { data, defaultValues });
 
    const Form = useForm({

app/src/ui/routes/data/data.$entity.create.tsx

@@ -120,7 +120,7 @@ export function DataEntityCreate({ params }) {
                entity={entity}
                handleSubmit={handleSubmit}
                fieldsDisabled={fieldsDisabled}
-               data={search.value}
+               data={search.value as any}
                Form={Form}
                action="create"
                className="flex flex-grow flex-col gap-3 p-3"

app/src/ui/routes/data/data.$entity.index.tsx

@@ -61,7 +61,7 @@ function DataEntityListImpl({ params }) {
       (api) =>
          api.data.readMany(entity?.name as any, {
             select: search.value.select,
-            limit: search.value.perPage,
+            limit: search.value.perPage + 1 /* overfetch for softscan=false */,
             offset: (search.value.page - 1) * search.value.perPage,
             sort: `${search.value.sort.dir === "asc" ? "" : "-"}${search.value.sort.by}`,
          }),

app/vite.dev.ts

@@ -1,4 +1,4 @@
-import { readFile } from "node:fs/promises";
+import { readFile, writeFile } from "node:fs/promises";
 import { serveStatic } from "@hono/node-server/serve-static";
 import { showRoutes } from "hono/dev";
 import { App, registries, type CreateAppConfig } from "./src";
@@ -9,6 +9,7 @@ import { $console } from "core/utils/console";
 import { createClient } from "@libsql/client";
 import util from "node:util";
 import { d1Sqlite } from "adapter/cloudflare/connection/D1Connection";
+import { slugify } from "./src/core/utils/strings";
 
 util.inspect.defaultOptions.depth = 5;
 registries.media.register("local", StorageLocalAdapter);
@@ -21,16 +22,19 @@ $console.debug("Using db type", dbType);
 let dbUrl = import.meta.env.VITE_DB_URL ?? ":memory:";
 
 const example = import.meta.env.VITE_EXAMPLE;
-if (example) {
-   const configPath = `.configs/${example}.json`;
-   $console.debug("Loading config from", configPath);
-   const exampleConfig = JSON.parse(await readFile(configPath, "utf-8"));
-   config.config = exampleConfig;
-   dbUrl = `file:.configs/${example}.db`;
+async function loadExampleConfig() {
+   if (example) {
+      const configPath = `.configs/${example}.json`;
+      $console.debug("Loading config from", configPath);
+      const exampleConfig = JSON.parse(await readFile(configPath, "utf-8"));
+      config.config = exampleConfig;
+      dbUrl = `file:.configs/${example}.db`;
+   }
 }
 
 switch (dbType) {
    case "libsql": {
+      await loadExampleConfig();
       $console.debug("Using libsql connection", dbUrl);
       const authToken = import.meta.env.VITE_DB_LIBSQL_TOKEN;
       config.connection = libsql(
@@ -43,15 +47,48 @@ switch (dbType) {
    }
    case "d1": {
       $console.debug("Using d1 connection");
+      const wranglerConfig = {
+         name: "vite-dev",
+         main: "src/index.ts",
+         compatibility_date: "2025-08-03",
+         compatibility_flags: ["nodejs_compat"],
+         d1_databases: [
+            {
+               binding: "DB",
+               database_name: "vite-dev",
+               database_id: "00000000-0000-0000-0000-000000000000",
+            },
+         ],
+         r2_buckets: [
+            {
+               binding: "BUCKET",
+               bucket_name: "vite-dev",
+            },
+         ],
+      };
+      let configPath = ".configs/vite.wrangler.json";
+      if (example) {
+         const name = slugify(example);
+         configPath = `.configs/${slugify(example)}.wrangler.json`;
+         const exists = await readFile(configPath, "utf-8");
+         if (!exists) {
+            wranglerConfig.name = name;
+            wranglerConfig.d1_databases[0]!.database_name = name;
+            wranglerConfig.d1_databases[0]!.database_id = crypto.randomUUID();
+            wranglerConfig.r2_buckets[0]!.bucket_name = name;
+            await writeFile(configPath, JSON.stringify(wranglerConfig, null, 2));
+         }
+      }
 
       const { getPlatformProxy } = await import("wrangler");
       const platformProxy = await getPlatformProxy({
-         configPath: "./vite.wrangler.json",
+         configPath,
       });
       config.connection = d1Sqlite({ binding: platformProxy.env.DB as any });
       break;
    }
    default: {
+      await loadExampleConfig();
       $console.debug("Using node-sqlite connection", dbUrl);
       config.connection = nodeSqlite({ url: dbUrl });
       break;

docs/content/docs/(documentation)/extending/plugins.mdx

@@ -167,6 +167,10 @@ export default {
 
 ### `cloudflareImageOptimization`
 
+<Callout type="info">
+  This plugin doesn't work on the development server, or on workers deployed with a `workers.dev` subdomain. It requires [Cloudflare Image transformations to be enabled](https://developers.cloudflare.com/images/get-started/#enable-transformations-on-your-zone) on your zone.
+</Callout>
+
 A plugin that add Cloudflare Image Optimization to your app's media storage.
 
 ```typescript title="bknd.config.ts"