feat: react-query hey-api integration

openapi-ts.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
   },
   plugins: [
     "@hey-api/sdk",
+    "@tanstack/react-query",
     {
       enums: "typescript",
       name: "@hey-api/typescript",

src/api/generated/@tanstack/react-query.gen.ts

@@ -0,0 +1,107 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { OptionsLegacyParser } from "@hey-api/client-fetch";
+import { queryOptions } from "@tanstack/react-query";
+import {
+  client,
+  getMessagesDashboardMessagesGet,
+  getAlertsDashboardAlertsGet,
+  streamSseDashboardAlertsNotificationGet,
+} from "../sdk.gen";
+
+type QueryKey<TOptions extends OptionsLegacyParser> = [
+  Pick<TOptions, "baseUrl" | "body" | "headers" | "path" | "query"> & {
+    _id: string;
+    _infinite?: boolean;
+  },
+];
+
+const createQueryKey = <TOptions extends OptionsLegacyParser>(
+  id: string,
+  options?: TOptions,
+  infinite?: boolean,
+): QueryKey<TOptions>[0] => {
+  const params: QueryKey<TOptions>[0] = {
+    _id: id,
+    baseUrl: (options?.client ?? client).getConfig().baseUrl,
+  } as QueryKey<TOptions>[0];
+  if (infinite) {
+    params._infinite = infinite;
+  }
+  if (options?.body) {
+    params.body = options.body;
+  }
+  if (options?.headers) {
+    params.headers = options.headers;
+  }
+  if (options?.path) {
+    params.path = options.path;
+  }
+  if (options?.query) {
+    params.query = options.query;
+  }
+  return params;
+};
+
+export const getMessagesDashboardMessagesGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("getMessagesDashboardMessagesGet", options)];
+
+export const getMessagesDashboardMessagesGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await getMessagesDashboardMessagesGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: getMessagesDashboardMessagesGetQueryKey(options),
+  });
+};
+
+export const getAlertsDashboardAlertsGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("getAlertsDashboardAlertsGet", options)];
+
+export const getAlertsDashboardAlertsGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await getAlertsDashboardAlertsGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: getAlertsDashboardAlertsGetQueryKey(options),
+  });
+};
+
+export const streamSseDashboardAlertsNotificationGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("streamSseDashboardAlertsNotificationGet", options)];
+
+export const streamSseDashboardAlertsNotificationGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await streamSseDashboardAlertsNotificationGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: streamSseDashboardAlertsNotificationGetQueryKey(options),
+  });
+};

src/hooks/useAlertsData.ts

@@ -1,12 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
-import { serverApi } from "@/api/service";
-import { AlertConversation } from "@/api/generated";
+import {
+  AlertConversation,
+  getAlertsDashboardAlertsGet,
+} from "@/api/generated";
 import { getMaliciousPackage } from "@/lib/utils";
 import { MaliciousPkgType, TriggerType } from "@/types";
 import { useAlertSearch } from "./useAlertSearch";
+import { getAlertsDashboardAlertsGetQueryKey } from "@/api/generated/@tanstack/react-query.gen";
 
 const fetchAlerts = async (): Promise<AlertConversation[]> => {
-  const { getAlertsDashboardAlertsGet } = await serverApi();
   const { data } = await getAlertsDashboardAlertsGet();
 
   return (data ?? [])
@@ -25,7 +27,7 @@ const fetchAlerts = async (): Promise<AlertConversation[]> => {
 
 export const useAlertsData = ({ ...args } = {}) => {
   return useQuery({
-    queryKey: ["alerts"],
+    queryKey: getAlertsDashboardAlertsGetQueryKey(),
     queryFn: fetchAlerts,
     ...args,
   });

src/hooks/usePromptsData.ts

@@ -1,21 +1,21 @@
 import { useQuery } from "@tanstack/react-query";
-import { serverApi } from "@/api/service";
-import { Conversation } from "@/api/generated";
-
-const fetchPrompts = async (): Promise<Conversation[]> => {
-  const { getMessagesDashboardMessagesGet } = await serverApi();
-  const { data } = await getMessagesDashboardMessagesGet();
-
-  if (!data) return [];
+import {
+  Conversation,
+  GetMessagesDashboardMessagesGetResponse,
+} from "@/api/generated";
+import { getMessagesDashboardMessagesGetOptions } from "@/api/generated/@tanstack/react-query.gen";
 
+const selectConversations = (
+  data: GetMessagesDashboardMessagesGetResponse,
+): Conversation[] => {
   return data.filter((prompt) =>
     prompt.question_answers?.every((item) => item.answer && item.question),
   );
 };
 
 export const usePromptsData = () => {
   return useQuery({
-    queryKey: ["prompts"],
-    queryFn: fetchPrompts,
+    ...getMessagesDashboardMessagesGetOptions(),
+    select: selectConversations,
   });
 };

src/main.tsx

@@ -9,6 +9,12 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ErrorBoundary from "./components/ErrorBoundary.tsx";
 import { Error } from "./components/Error.tsx";
 import { DarkModeProvider } from "@stacklok/ui-kit";
+import { client } from "./api/generated/index.ts";
+
+// Initialize the API client
+client.setConfig({
+  baseUrl: import.meta.env.VITE_BASE_API_URL,
+});
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -23,5 +29,5 @@ createRoot(document.getElementById("root")!).render(
         </SidebarProvider>
       </DarkModeProvider>
     </BrowserRouter>
-  </StrictMode>
+  </StrictMode>,
 );