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

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>
+   );
+}