added useApi and useApiQuery to work seamlessly with SWR (tbc)

app/src/ui/client/index.ts

@@ -6,5 +6,6 @@ export {
    useBaseUrl
 } from "./ClientProvider";
 
+export { useApi, useApiQuery } from "./use-api";
 export { useAuth } from "./schema/auth/use-auth";
 export { Api } from "../../Api";

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

@@ -0,0 +1,18 @@
+import type { Api } from "Api";
+import type { FetchPromise } from "modules/ModuleApi";
+import useSWR, { type SWRConfiguration } from "swr";
+import { useClient } from "ui/client/ClientProvider";
+
+export const useApi = () => {
+   const client = useClient();
+   return client.api;
+};
+
+export const useApiQuery = <T = any>(
+   fn: (api: Api) => FetchPromise<T>,
+   options?: SWRConfiguration & { enabled?: boolean }
+) => {
+   const api = useApi();
+   const p = fn(api);
+   return useSWR<T>(options?.enabled === false ? null : p.getKey(), () => p, options);
+};

app/src/ui/routes/test/index.tsx

@@ -1,5 +1,6 @@
 import AppShellAccordionsTest from "ui/routes/test/tests/appshell-accordions-test";
 import SwaggerTest from "ui/routes/test/tests/swagger-test";
+import SWRAndAPI from "ui/routes/test/tests/swr-and-api";
 import { Route, useParams } from "wouter";
 import { Empty } from "../../components/display/Empty";
 import { Link } from "../../components/wouter/Link";
@@ -37,7 +38,8 @@ const tests = {
    EntityFieldsForm,
    FlowsTest,
    AppShellAccordionsTest,
-   SwaggerTest
+   SwaggerTest,
+   SWRAndAPI
 } as const;
 
 export default function TestRoutes() {

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

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { useApiQuery } from "ui/client";
+import { Scrollable } from "ui/layouts/AppShell/AppShell";
+
+export default function SWRAndAPI() {
+   const [enabled, setEnabled] = useState(false);
+   const { data, error, isLoading } = useApiQuery(({ data }) => data.readMany("posts"), {
+      enabled,
+      revalidateOnFocus: true
+   });
+
+   return (
+      <Scrollable>
+         <button onClick={() => setEnabled((p) => !p)}>{enabled ? "disable" : "enable"}</button>
+         {error && <div>failed to load</div>}
+         {isLoading && <div>loading...</div>}
+         {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+      </Scrollable>
+   );
+}