UI/queries: migrate existing queries to useApiClient

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

@@ -1,6 +1,7 @@
 import { useQueries, useQuery, UseQueryResult } from "@tanstack/solid-query";
-import { callApi, SuccessData } from "../hooks/api";
+import { SuccessData } from "../hooks/api";
 import { encodeBase64 } from "@/src/hooks/clan";
+import { useApiClient } from "./ApiClient";
 
 export type ClanDetails = SuccessData<"get_clan_details">;
 export type ClanDetailsWithURI = ClanDetails & { uri: string };
@@ -12,11 +13,12 @@ export type MachineDetails = SuccessData<"get_machine_details">;
 export type MachinesQueryResult = UseQueryResult<ListMachines>;
 export type ClanListQueryResult = UseQueryResult<ClanDetailsWithURI>[];
 
-export const useMachinesQuery = (clanURI: string) =>
-  useQuery<ListMachines>(() => ({
+export const useMachinesQuery = (clanURI: string) => {
+  const client = useApiClient();
+  return useQuery<ListMachines>(() => ({
     queryKey: ["clans", encodeBase64(clanURI), "machines"],
     queryFn: async () => {
-      const api = callApi("list_machines", {
+      const api = client.fetch("list_machines", {
         flake: {
           identifier: clanURI,
         },
@@ -29,12 +31,14 @@ export const useMachinesQuery = (clanURI: string) =>
       return result.data;
     },
   }));
+};
 
-export const useMachineQuery = (clanURI: string, machineName: string) =>
-  useQuery<Machine>(() => ({
+export const useMachineQuery = (clanURI: string, machineName: string) => {
+  const client = useApiClient();
+  return useQuery<Machine>(() => ({
     queryKey: ["clans", encodeBase64(clanURI), "machine", machineName],
     queryFn: async () => {
-      const call = callApi("get_machine", {
+      const call = client.fetch("get_machine", {
         name: machineName,
         flake: {
           identifier: clanURI,
@@ -49,12 +53,17 @@ export const useMachineQuery = (clanURI: string, machineName: string) =>
       return result.data;
     },
   }));
+};
 
-export const useMachineDetailsQuery = (clanURI: string, machineName: string) =>
-  useQuery<MachineDetails>(() => ({
+export const useMachineDetailsQuery = (
+  clanURI: string,
+  machineName: string,
+) => {
+  const client = useApiClient();
+  return useQuery<MachineDetails>(() => ({
     queryKey: ["clans", encodeBase64(clanURI), "machine_detail", machineName],
     queryFn: async () => {
-      const call = callApi("get_machine_details", {
+      const call = client.fetch("get_machine_details", {
         machine: {
           name: machineName,
           flake: {
@@ -73,12 +82,14 @@ export const useMachineDetailsQuery = (clanURI: string, machineName: string) =>
       return result.data;
     },
   }));
+};
 
-export const useClanDetailsQuery = (clanURI: string) =>
-  useQuery<ClanDetails>(() => ({
+export const useClanDetailsQuery = (clanURI: string) => {
+  const client = useApiClient();
+  return useQuery<ClanDetails>(() => ({
     queryKey: ["clans", encodeBase64(clanURI), "details"],
     queryFn: async () => {
-      const call = callApi("get_clan_details", {
+      const call = client.fetch("get_clan_details", {
         flake: {
           identifier: clanURI,
         },
@@ -97,14 +108,16 @@ export const useClanDetailsQuery = (clanURI: string) =>
       };
     },
   }));
+};
 
-export const useClanListQuery = (clanURIs: string[]): ClanListQueryResult =>
-  useQueries(() => ({
+export const useClanListQuery = (clanURIs: string[]): ClanListQueryResult => {
+  const client = useApiClient();
+  return useQueries(() => ({
     queries: clanURIs.map((clanURI) => ({
       queryKey: ["clans", encodeBase64(clanURI), "details"],
       enabled: !!clanURI,
       queryFn: async () => {
-        const call = callApi("get_clan_details", {
+        const call = client.fetch("get_clan_details", {
           flake: {
             identifier: clanURI,
           },
@@ -124,3 +137,5 @@ export const useClanListQuery = (clanURIs: string[]): ClanListQueryResult =>
       },
     })),
   }));
+};
+

pkgs/clan-app/ui/src/index.tsx

@@ -7,6 +7,8 @@ import { Routes } from "@/src/routes";
 import { Router } from "@solidjs/router";
 import { Layout } from "@/src/routes/Layout";
 import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+import { ApiClientProvider } from "./hooks/ApiClient";
+import { callApi } from "./hooks/api";
 
 export const client = new QueryClient();
 
@@ -23,10 +25,12 @@ if (import.meta.env.DEV) {
 
 render(
   () => (
-    <QueryClientProvider client={client}>
-      {import.meta.env.DEV && <SolidQueryDevtools initialIsOpen={true} />}
-      <Router root={Layout}>{Routes}</Router>
-    </QueryClientProvider>
+    <ApiClientProvider client={{ fetch: callApi }}>
+      <QueryClientProvider client={client}>
+        {import.meta.env.DEV && <SolidQueryDevtools initialIsOpen={true} />}
+        <Router root={Layout}>{Routes}</Router>
+      </QueryClientProvider>
+    </ApiClientProvider>
   ),
   root!,
 );