added a new mutate replacement for useEntityMutate to quickly update cache without revalidating

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

@@ -3,7 +3,7 @@ import { encodeSearch, objectTransform } from "core/utils";
 import type { EntityData, RepoQuery } from "data";
 import type { ModuleApi, ResponseObject } from "modules/ModuleApi";
 import useSWR, { type SWRConfiguration, mutate } from "swr";
-import { useApi } from "ui/client";
+import { type Api, useApi } from "ui/client";
 
 export class UseEntityApiError<Payload = any> extends Error {
    constructor(
@@ -148,9 +148,44 @@ export const useEntityQuery = <
    };
 };
 
+export async function mutateEntityCache<
+   Entity extends keyof DB | string,
+   Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData
+>(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Data>) {
+   function update(prev: any, partialNext: any) {
+      if (
+         typeof prev !== "undefined" &&
+         typeof partialNext !== "undefined" &&
+         "id" in prev &&
+         prev.id === id
+      ) {
+         return { ...prev, ...partialNext };
+      }
+
+      return prev;
+   }
+
+   const entityKey = makeKey(api, entity);
+
+   return mutate(
+      (key) => typeof key === "string" && key.startsWith(entityKey),
+      async (data) => {
+         if (typeof data === "undefined") return;
+         if (Array.isArray(data)) {
+            return data.map((item) => update(item, partialData));
+         }
+         return update(data, partialData);
+      },
+      {
+         revalidate: false
+      }
+   );
+}
+
 export const useEntityMutate = <
    Entity extends keyof DB | string,
-   Id extends PrimaryFieldType | undefined = undefined
+   Id extends PrimaryFieldType | undefined = undefined,
+   Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData
 >(
    entity: Entity,
    id?: Id,
@@ -160,5 +195,15 @@ export const useEntityMutate = <
       ...options,
       enabled: false
    });
-   return $q;
+
+   const _mutate = id
+      ? (data) => mutateEntityCache($q.api, entity, id, data)
+      : (id, data) => mutateEntityCache($q.api, entity, id, data);
+
+   return {
+      ...$q,
+      mutate: _mutate as unknown as Id extends undefined
+         ? (id: PrimaryFieldType, data: Partial<Data>) => Promise<void>
+         : (data: Partial<Data>) => Promise<void>
+   };
 };

app/src/ui/routes/test/tests/swr-and-data-api.tsx

@@ -1,53 +1,69 @@
 import { useEffect, useState } from "react";
-import { useEntity, useEntityQuery } from "ui/client/api/use-entity";
+import { useEntity, useEntityMutate, useEntityQuery } from "ui/client/api/use-entity";
 import { Scrollable } from "ui/layouts/AppShell/AppShell";
 
 export default function SwrAndDataApi() {
    return (
-      <div>
+      <Scrollable>
+         asdf
          <DirectDataApi />
          <QueryDataApi />
-      </div>
+         <QueryMutateDataApi />
+      </Scrollable>
    );
 }
 
-function QueryDataApi() {
-   const [text, setText] = useState("");
-   const { data, update, ...r } = useEntityQuery("comments", 2, {
-      sort: { by: "id", dir: "desc" }
+function QueryMutateDataApi() {
+   const { mutate } = useEntityMutate("comments");
+   const { data, ...r } = useEntityQuery("comments", undefined, {
+      limit: 2
    });
-   const comment = data ? data : null;
-
-   useEffect(() => {
-      setText(comment?.content ?? "");
-   }, [comment]);
 
    return (
-      <Scrollable>
+      <div>
+         bla
          <pre>{JSON.stringify(r.key)}</pre>
          {r.error && <div>failed to load</div>}
          {r.isLoading && <div>loading...</div>}
          {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
          {data && (
-            <form
-               onSubmit={async (e) => {
-                  e.preventDefault();
-                  if (!comment) return;
-                  await update({ content: text });
-                  return false;
-               }}
-            >
-               <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
-               <button type="submit">submit</button>
-            </form>
+            <div>
+               {data.map((comment) => (
+                  <input
+                     key={String(comment.id)}
+                     type="text"
+                     value={comment.content}
+                     onChange={async (e) => {
+                        await mutate(comment.id, { content: e.target.value });
+                     }}
+                     className="border border-black"
+                  />
+               ))}
+            </div>
          )}
-      </Scrollable>
+      </div>
+   );
+}
+
+function QueryDataApi() {
+   const { data, update, ...r } = useEntityQuery("comments", undefined, {
+      sort: { by: "id", dir: "asc" },
+      limit: 3
+   });
+
+   return (
+      <div>
+         <pre>{JSON.stringify(r.key)}</pre>
+         {r.error && <div>failed to load</div>}
+         {r.isLoading && <div>loading...</div>}
+         {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+      </div>
    );
 }
 
 function DirectDataApi() {
    const [data, setData] = useState<any>();
-   const { create, read, update, _delete } = useEntity("users");
+   const { create, read, update, _delete } = useEntity("comments");
 
    useEffect(() => {
       read().then((data) => setData(data));