ui/queries: init queries folder

pkgs/clan-app/ui/src/queries/queries.ts

@@ -0,0 +1,31 @@
+import { useQuery, UseQueryResult } from "@tanstack/solid-query";
+import { callApi, SuccessData } from "../hooks/api";
+
+export type ListMachines = SuccessData<"list_machines">;
+
+export type MachinesQueryResult = UseQueryResult<ListMachines>;
+
+interface MachinesQueryParams {
+  clanURI: string | null;
+}
+export const useMachinesQuery = (props: MachinesQueryParams) =>
+  useQuery<ListMachines>(() => ({
+    queryKey: ["clans", props.clanURI, "machines"],
+    enabled: !!props.clanURI,
+    queryFn: async () => {
+      if (!props.clanURI) {
+        return {};
+      }
+      const api = callApi("list_machines", {
+        flake: {
+          identifier: props.clanURI,
+        },
+      });
+      const result = await api.result;
+      if (result.status === "error") {
+        console.error("Error fetching machines:", result.errors);
+        return {};
+      }
+      return result.data;
+    },
+  }));

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -2,8 +2,7 @@ import { RouteSectionProps } from "@solidjs/router";
 import { Component, JSX } from "solid-js";
 import { useMaybeClanURI } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
-import { useQuery, UseQueryResult } from "@tanstack/solid-query";
-import { callApi, SuccessData } from "@/src/hooks/api";
+import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries";
 
 export const Clans: Component<RouteSectionProps> = (props) => {
   return (
@@ -31,32 +30,11 @@ const ClanSwitchDog = () => {
   );
 };
 
-export type ListMachines = SuccessData<"list_machines">;
-
 const SceneDataProvider = (props: {
   clanURI: string | null;
-  children: (sceneData: { query: UseQueryResult<ListMachines> }) => JSX.Element;
+  children: (sceneData: { query: MachinesQueryResult }) => JSX.Element;
 }) => {
-  const machinesQuery = useQuery<ListMachines>(() => ({
-    queryKey: ["clans", props.clanURI, "machines"],
-    enabled: !!props.clanURI,
-    queryFn: async () => {
-      if (!props.clanURI) {
-        return {};
-      }
-      const api = callApi("list_machines", {
-        flake: {
-          identifier: props.clanURI,
-        },
-      });
-      const result = await api.result;
-      if (result.status === "error") {
-        console.error("Error fetching machines:", result.errors);
-        return {};
-      }
-      return result.data;
-    },
-  }));
+  const machinesQuery = useMachinesQuery({ clanURI: props.clanURI });
 
   // This component can be used to provide scene data or context if needed
   return props.children({ query: machinesQuery });