ref(tsc): move automationFireHistory to apiOptions

Author: TkDodo

static/app/views/automations/components/automationHistoryList.tsx

@@ -1,5 +1,6 @@
 import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 import {PlatformIcon} from 'platformicons';
 
 import {Flex} from '@sentry/scraps/layout';
@@ -11,11 +12,12 @@ import {Pagination} from 'sentry/components/pagination';
 import {Placeholder} from 'sentry/components/placeholder';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t, tct} from 'sentry/locale';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {parseCursor} from 'sentry/utils/cursor';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
-import {useAutomationFireHistoryQuery} from 'sentry/views/automations/hooks';
+import {automationFireHistoryApiOptions} from 'sentry/views/automations/hooks';
 import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
 
 const DEFAULT_HISTORY_PER_PAGE = 10;
@@ -63,36 +65,37 @@ export function AutomationHistoryList({
   const cursor =
     typeof location.query.cursor === 'string' ? location.query.cursor : undefined;
 
-  const {
-    data: fireHistory = [],
-    isLoading,
-    isError,
-    getResponseHeader,
-  } = useAutomationFireHistoryQuery(
-    {automationId, limit, cursor, query},
-    {enabled: !!automationId}
-  );
-
-  const pageLinks = getResponseHeader?.('Link');
-  const totalCount = getResponseHeader?.('X-Hits');
-  const totalCountInt = totalCount ? parseInt(totalCount, 10) : 0;
+  const {data, isLoading, isError} = useQuery({
+    ...automationFireHistoryApiOptions({
+      organization: org,
+      automationId,
+      cursor,
+      limit,
+      query,
+    }),
+    select: selectJsonWithHeaders,
+  });
+
+  const fireHistory = data?.json ?? [];
+  const pageLinks = data?.headers.Link;
+  const totalCountInt = data?.headers['X-Hits'] ?? 0;
 
   const paginationCaption = useMemo(() => {
-    if (isLoading || !fireHistory || fireHistory?.length === 0 || limit === null) {
+    if (isLoading || !data?.json || data.json.length === 0 || limit === null) {
       return undefined;
     }
 
     const currentCursor = parseCursor(cursor);
     const offset = currentCursor?.offset ?? 0;
     const startCount = offset * limit + 1;
-    const endCount = startCount + fireHistory.length - 1;
+    const endCount = startCount + data.json.length - 1;
 
     return tct('[start]-[end] of [total]', {
       start: startCount.toLocaleString(),
       end: endCount.toLocaleString(),
       total: totalCountInt.toLocaleString(),
     });
-  }, [fireHistory, isLoading, cursor, limit, totalCountInt]);
+  }, [data?.json, isLoading, cursor, limit, totalCountInt]);
 
   return (
     <Fragment>

static/app/views/automations/hooks/index.tsx

@@ -1,5 +1,8 @@
+import {queryOptions, skipToken} from '@tanstack/react-query';
+
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {t, tn} from 'sentry/locale';
+import type {Organization} from 'sentry/types/organization';
 import type {Action, ActionHandler} from 'sentry/types/workflowEngine/actions';
 import type {
   Automation,
@@ -10,6 +13,7 @@ import type {
   DataConditionHandler,
   DataConditionHandlerGroupType,
 } from 'sentry/types/workflowEngine/dataConditions';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import type {
   ApiQueryKey,
@@ -82,14 +86,14 @@ interface UseAutomationsQueryOptions {
 }
 export function useAutomationsQuery(
   options: UseAutomationsQueryOptions = {},
-  queryOptions: Partial<UseApiQueryOptions<Automation[]>> = {}
+  useApiQueryOptions: Partial<UseApiQueryOptions<Automation[]>> = {}
 ) {
   const {slug: orgSlug} = useOrganization();
 
   return useApiQuery<Automation[]>(makeAutomationsQueryKey({orgSlug, ...options}), {
     staleTime: 0,
     retry: false,
-    ...queryOptions,
+    ...useApiQueryOptions,
   });
 }
 
@@ -102,45 +106,33 @@ export function useAutomationQuery(automationId: string) {
   });
 }
 
-const makeAutomationFireHistoryQueryKey = ({
-  orgSlug,
-  automationId,
-  cursor,
-  limit,
-  query = {},
-}: {
-  automationId: string;
-  orgSlug: string;
-  cursor?: string;
-  limit?: number;
-  query?: Record<string, any>;
-}): ApiQueryKey => [
-  getApiUrl('/organizations/$organizationIdOrSlug/workflows/$workflowId/group-history/', {
-    path: {organizationIdOrSlug: orgSlug, workflowId: automationId},
-  }),
-  {query: {...query, per_page: limit, cursor}},
-];
-
-interface UseAutomationFireHistoryQueryOptions {
+interface AutomationFireHistoryApiOptionsParams {
   automationId: string;
+  organization: Organization;
   cursor?: string;
   limit?: number;
   query?: Record<string, any>;
 }
-export function useAutomationFireHistoryQuery(
-  options: UseAutomationFireHistoryQueryOptions,
-  queryOptions: Partial<UseApiQueryOptions<AutomationFireHistory[]>> = {}
-) {
-  const {slug} = useOrganization();
-
-  return useApiQuery<AutomationFireHistory[]>(
-    makeAutomationFireHistoryQueryKey({orgSlug: slug, ...options}),
-    {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      retry: false,
-      ...queryOptions,
-    }
-  );
+export function automationFireHistoryApiOptions({
+  automationId,
+  cursor,
+  limit,
+  organization,
+  query = {},
+}: AutomationFireHistoryApiOptionsParams) {
+  return queryOptions({
+    ...apiOptions.as<AutomationFireHistory[]>()(
+      '/organizations/$organizationIdOrSlug/workflows/$workflowId/group-history/',
+      {
+        path: automationId
+          ? {organizationIdOrSlug: organization.slug, workflowId: automationId}
+          : skipToken,
+        query: {...query, per_page: limit, cursor},
+        staleTime: 5 * 60 * 1000, // 5 minutes
+      }
+    ),
+    retry: false,
+  });
 }
 
 export function useDataConditionsQuery(groupType: DataConditionHandlerGroupType) {