query and insert loro storage

Author: SandroMaglione

apps/client/src/lib/hooks/use-food.ts

@@ -3,15 +3,13 @@ import { SnapshotSchema } from "@local/schema";
 import { RuntimeClient } from "../runtime-client";
 
 export const useFood = ({ workspaceId }: { workspaceId: string }) => {
-  return useDexieQuery(
-    () =>
-      RuntimeClient.runPromise(
-        Service.LoroStorage.use(({ query }) =>
-          query((doc) => doc.getList("food"), {
-            workspaceId,
-          })
-        )
-      ),
-    SnapshotSchema.fields.food.value
+  return useDexieQuery(() =>
+    RuntimeClient.runPromise(
+      Service.LoroStorage.use(({ query }) =>
+        query((doc) => doc.getList("food"), SnapshotSchema.fields.food.value, {
+          workspaceId,
+        })
+      )
+    )
   );
 };

apps/client/src/lib/hooks/use-meal.ts

@@ -0,0 +1,31 @@
+import { Service, useDexieQuery } from "@local/client-lib";
+import { SnapshotSchema } from "@local/schema";
+import { Effect } from "effect";
+import { RuntimeClient } from "../runtime-client";
+
+export const useMeal = ({ workspaceId }: { workspaceId: string }) => {
+  return useDexieQuery(() =>
+    RuntimeClient.runPromise(
+      Effect.gen(function* () {
+        const { query } = yield* Service.LoroStorage;
+
+        const meals = yield* query(
+          (doc) => doc.getList("meal"),
+          SnapshotSchema.fields.meal.value,
+          { workspaceId }
+        );
+
+        const foods = yield* query(
+          (doc) => doc.getList("food"),
+          SnapshotSchema.fields.food.value,
+          { workspaceId }
+        );
+
+        return meals.map(({ foodId, id, quantity }) => {
+          const food = foods.find((food) => food.id === foodId);
+          return { id, quantity, food };
+        });
+      })
+    )
+  );
+};

apps/client/src/lib/storage.ts

@@ -1,5 +1,5 @@
 import { Service } from "@local/client-lib";
-import { SnapshotSchema } from "@local/schema";
+import { CurrentSchema, SnapshotSchema } from "@local/schema";
 import { Effect, Schema } from "effect";
 import { LoroMap, VersionVector } from "loro-crdt";
 
@@ -9,46 +9,48 @@ export class Storage extends Effect.Service<Storage>()("Storage", {
     const temp = yield* Service.TempWorkspace;
     const { load } = yield* Service.LoroStorage;
 
-    const insertFood = ({
-      workspaceId,
-      value,
-    }: {
-      workspaceId: string;
-      value: typeof SnapshotSchema.fields.food.value.Type;
-    }) =>
-      Effect.gen(function* () {
-        const { doc, workspace } = yield* load({ workspaceId });
-
-        const list = doc.getList("food");
-
-        const container = list.insertContainer(list.length, new LoroMap());
-
-        const food = yield* Schema.encode(SnapshotSchema.fields.food.value)(
-          value
-        );
-
-        Object.entries(food).forEach(([key, val]) => {
-          container.set(
-            key as keyof typeof SnapshotSchema.fields.food.value.Type,
-            val
-          );
+    const insert =
+      <T extends typeof SnapshotSchema.Table.Type>(table: T) =>
+      ({
+        workspaceId,
+        value,
+      }: {
+        workspaceId: string;
+        value: Schema.Schema.Encoded<(typeof CurrentSchema.fields)[T]>[number];
+      }) =>
+        Effect.gen(function* () {
+          const { doc, workspace } = yield* load({ workspaceId });
+
+          const list = doc.getList(table);
+
+          const container = list.insertContainer(list.length, new LoroMap());
+
+          const data = yield* Schema.encode(
+            CurrentSchema.fields[table].value as Schema.Schema<typeof value>
+          )(value);
+
+          Object.entries(data).forEach(([key, val]) => {
+            container.set(key, val);
+          });
+
+          const snapshotExport =
+            workspace === undefined
+              ? doc.export({ mode: "snapshot" })
+              : doc.export({
+                  mode: "update",
+                  from: new VersionVector(workspace.version),
+                });
+
+          return yield* temp.put({
+            workspaceId,
+            snapshot: snapshotExport,
+            snapshotId: crypto.randomUUID(),
+          });
         });
 
-        const snapshotExport =
-          workspace === undefined
-            ? doc.export({ mode: "snapshot" })
-            : doc.export({
-                mode: "update",
-                from: new VersionVector(workspace.version),
-              });
-
-        return yield* temp.put({
-          workspaceId,
-          snapshot: snapshotExport,
-          snapshotId: crypto.randomUUID(),
-        });
-      });
-
-    return { insertFood };
+    return {
+      insertFood: insert("food"),
+      insertMeal: insert("meal"),
+    } as const;
   }),
 }) {}

apps/client/src/routes/$workspaceId/index.tsx

@@ -5,6 +5,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Effect } from "effect";
 import { startTransition, useEffect } from "react";
 import { useFood } from "../../lib/hooks/use-food";
+import { useMeal } from "../../lib/hooks/use-meal";
 import { RuntimeClient } from "../../lib/runtime-client";
 import { Storage } from "../../lib/storage";
 
@@ -44,11 +45,16 @@ function RouteComponent() {
     workspaceId: workspace.workspaceId,
   });
 
+  const { data: meals } = useMeal({
+    workspaceId: workspace.workspaceId,
+  });
+
   const [, onBootstrap, bootstrapping] = useActionEffect(
     RuntimeClient,
     bootstrap
   );
-  const [, onAdd] = useActionEffect(RuntimeClient, (formData: FormData) =>
+
+  const [, onAddFood] = useActionEffect(RuntimeClient, (formData: FormData) =>
     Effect.gen(function* () {
       const loroStorage = yield* Storage;
 
@@ -66,6 +72,24 @@ function RouteComponent() {
     })
   );
 
+  const [, onAddMeal] = useActionEffect(RuntimeClient, (formData: FormData) =>
+    Effect.gen(function* () {
+      const loroStorage = yield* Storage;
+
+      const foodId = formData.get("foodId") as string;
+      const quantity = formData.get("quantity") as string;
+
+      yield* loroStorage.insertMeal({
+        workspaceId: workspace.workspaceId,
+        value: {
+          id: crypto.randomUUID(),
+          foodId,
+          quantity: parseInt(quantity, 10),
+        },
+      });
+    })
+  );
+
   useEffect(() => {
     const url = new URL("./src/workers/live.ts", globalThis.origin);
     const newWorker = new globalThis.Worker(url, { type: "module" });
@@ -112,7 +136,7 @@ function RouteComponent() {
         {bootstrapping ? "Bootstrapping..." : "Bootstrap"}
       </button>
 
-      <form action={onAdd}>
+      <form action={onAddFood}>
         <input type="text" name="name" />
         <input type="number" name="calories" min={1} />
         <button type="submit">Add food</button>
@@ -128,6 +152,26 @@ function RouteComponent() {
           </div>
         ))}
       </div>
+
+      <form action={onAddMeal}>
+        {(data ?? []).map((food) => (
+          <div key={food.id}>
+            <input type="radio" name="foodId" id={food.id} value={food.id} />
+            <label htmlFor={food.id}>{food.name}</label>
+          </div>
+        ))}
+        <input type="number" name="quantity" min={1} />
+        <button type="submit">Add meal</button>
+      </form>
+
+      <div>
+        {(meals ?? []).map((meal) => (
+          <div key={meal.id}>
+            <p>Food: {meal.food?.name}</p>
+            <p>Quantity: {meal.quantity}</p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

packages/client-lib/src/services/loro-storage.ts

@@ -1,6 +1,6 @@
 import { SnapshotSchema, type LoroSchema } from "@local/schema";
-import { Effect } from "effect";
-import { LoroDoc } from "loro-crdt";
+import { Effect, Schema } from "effect";
+import { LoroDoc, type LoroList, type LoroMap } from "loro-crdt";
 import { TempWorkspace } from "./temp-workspace";
 import { WorkspaceManager } from "./workspace-manager";
 
@@ -34,10 +34,20 @@ export class LoroStorage extends Effect.Service<LoroStorage>()("LoroStorage", {
         })
       );
 
-    const query = <A>(
-      extract: (doc: LoroDoc<LoroSchema>) => A,
+    const query = <A extends Record<string, unknown>>(
+      extract: (doc: LoroDoc<LoroSchema>) => LoroList<LoroMap<A>>,
+      schema: Schema.Schema<A>,
       { workspaceId }: { workspaceId: string }
-    ) => load({ workspaceId }).pipe(Effect.map(({ doc }) => extract(doc)));
+    ) =>
+      Effect.gen(function* () {
+        const { doc } = yield* load({ workspaceId });
+        const data = extract(doc);
+        const list = data.toArray();
+        return yield* Effect.all(
+          list.map((item) => Schema.decode(schema)(item.toJSON() as A)),
+          { concurrency: 10 }
+        );
+      });
 
     return { load, query } as const;
   }),

packages/client-lib/src/use-dexie-query.ts

@@ -1,6 +1,5 @@
 import { useLiveQuery } from "dexie-react-hooks";
-import { Data, Effect, Either, Match, pipe, Schema } from "effect";
-import { type LoroList, type LoroMap } from "loro-crdt";
+import { Data, Effect, Either, Function, Match, pipe } from "effect";
 import { Dexie } from "./services/dexie";
 
 class MissingData extends Data.TaggedError("MissingData")<{}> {}
@@ -9,9 +8,8 @@ class DexieError extends Data.TaggedError("DexieError")<{
   cause: unknown;
 }> {}
 
-export const useDexieQuery = <A, I extends Record<string, unknown>>(
-  query: (db: (typeof Dexie.Service)["db"]) => Promise<LoroList<LoroMap<I>>>,
-  schema: Schema.Schema<A, I>,
+export const useDexieQuery = <A, I>(
+  query: (db: (typeof Dexie.Service)["db"]) => Promise<I>,
   deps: unknown[] = []
 ) => {
   const results = useLiveQuery(
@@ -31,18 +29,7 @@ export const useDexieQuery = <A, I extends Record<string, unknown>>(
   return pipe(
     results,
     Either.fromNullable(() => new MissingData()),
-    Either.flatMap(
-      Either.match({
-        onLeft: Either.left,
-        onRight: (container) =>
-          pipe(
-            Schema.decodeEither(Schema.Array(schema))(container.toJSON()),
-            Either.mapLeft(
-              (cause) => new DexieError({ reason: "invalid-data", cause })
-            )
-          ),
-      })
-    ),
+    Either.flatMap(Function.identity),
     Either.match({
       onLeft: (_) =>
         Match.value(_).pipe(

packages/schema/src/main.ts

@@ -4,7 +4,7 @@ import { AnyLoroDocSchema, Table, VersioningSchema } from "./schema";
 import type { Version } from "./versioning";
 
 export const VERSION = 1 satisfies Version;
-const CurrentSchema = VersioningSchema[VERSION];
+export const CurrentSchema = VersioningSchema[VERSION];
 
 const Metadata = Schema.Struct({ version: Schema.Number });
 
@@ -20,6 +20,8 @@ export class SnapshotSchema extends Schema.Class<SnapshotSchema>(
   metadata: Metadata,
   ...CurrentSchema.fields,
 }) {
+  static readonly Table = Table;
+
   static readonly EmptyDoc = () => {
     const doc = new LoroDoc<LoroSchema>();
     doc.getMap("metadata").set("version", VERSION);