ref(tsc): open-period endpoint to apiOptions

static/app/views/detectors/hooks/useOpenPeriods.tsx

@@ -1,15 +1,14 @@
+import {queryOptions, useQuery} from '@tanstack/react-query';
+
 import type {GroupOpenPeriod} from 'sentry/types/group';
+import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {
-  useApiQuery,
-  type ApiQueryKey,
-  type UseApiQueryOptions,
-} from 'sentry/utils/queryClient';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+import type {QueryParamValue} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 type CommonParams = {
-  cursor?: string;
+  cursor?: QueryParamValue;
   end?: string | null;
   eventId?: string;
   limit?: number;
@@ -25,63 +24,48 @@ type UseOpenPeriodsParams =
       groupId: string;
     } & CommonParams);
 
-function makeOpenPeriodsQueryKey({
-  orgSlug,
+export function openPeriodsApiOptions({
+  organization,
   limit,
   ...params
-}: UseOpenPeriodsParams & {orgSlug: string}): ApiQueryKey {
-  return [
-    getApiUrl('/organizations/$organizationIdOrSlug/open-periods/', {
-      path: {organizationIdOrSlug: orgSlug},
-    }),
-    {
-      query: {
-        ...params,
-        per_page: limit,
-      },
-    },
-  ];
+}: UseOpenPeriodsParams & {organization: Organization}) {
+  return queryOptions({
+    ...apiOptions.as<GroupOpenPeriod[]>()(
+      '/organizations/$organizationIdOrSlug/open-periods/',
+      {
+        path: {organizationIdOrSlug: organization.slug},
+        query: {
+          ...params,
+          per_page: limit,
+        },
+        staleTime: 0,
+      }
+    ),
+    retry: false,
+  });
 }
 
 export function useOpenPeriods(
   params: UseOpenPeriodsParams,
-  options: Partial<UseApiQueryOptions<GroupOpenPeriod[]>> = {}
+  options: {enabled?: boolean} = {}
 ) {
   const organization = useOrganization();
 
-  return useApiQuery<GroupOpenPeriod[]>(
-    makeOpenPeriodsQueryKey({orgSlug: organization.slug, ...params}),
-    {
-      staleTime: 0,
-      retry: false,
-      ...options,
-    }
-  );
+  return useQuery({
+    ...openPeriodsApiOptions({organization, ...params}),
+    ...options,
+  });
 }
 
-export function useEventOpenPeriod(
-  params: {
-    eventId: string | undefined;
-    groupId: string;
-  },
-  options: Partial<UseApiQueryOptions<GroupOpenPeriod[]>> = {}
-) {
-  const query = useOpenPeriods(
-    {
-      groupId: params.groupId,
-      eventId: params.eventId,
-      limit: 1,
-    },
-    {
-      enabled: defined(options.enabled)
-        ? options.enabled
-        : defined(params.eventId) && defined(params.groupId),
-      ...options,
-    }
-  );
+export function useEventOpenPeriod(params: {
+  eventId: string | undefined;
+  groupId: string;
+}) {
+  const organization = useOrganization();
 
-  return {
-    ...query,
-    openPeriod: query.data?.[0] ?? null,
-  };
+  return useQuery({
+    ...openPeriodsApiOptions({organization, limit: 1, ...params}),
+    enabled: defined(params.eventId) && defined(params.groupId),
+    select: ({json}) => json[0] ?? null,
+  });
 }

static/app/views/issueDetails/groupOpenPeriods.tsx

@@ -1,5 +1,6 @@
 import {Link} from 'react-router-dom';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 import orderBy from 'lodash/orderBy';
 
 import {DateTime} from 'sentry/components/dateTime';
@@ -10,13 +11,14 @@ import {
 } from 'sentry/components/tables/gridEditable';
 import {t} from 'sentry/locale';
 import type {GroupOpenPeriodActivity} from 'sentry/types/group';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {getShortEventId} from 'sentry/utils/events';
 import {parseLinkHeader} from 'sentry/utils/parseLinkHeader';
 import {unreachable} from 'sentry/utils/unreachable';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
-import {useOpenPeriods} from 'sentry/views/detectors/hooks/useOpenPeriods';
+import {openPeriodsApiOptions} from 'sentry/views/detectors/hooks/useOpenPeriods';
 import {EventListTable} from 'sentry/views/issueDetails/streamline/eventListTable';
 
 interface OpenPeriodDisplayData {
@@ -46,17 +48,21 @@ function IssueOpenPeriodsList() {
   const location = useLocation();
   const params = useParams<{groupId: string}>();
   const {
-    data: openPeriods = [],
+    data: response,
     isPending,
     error,
-    getResponseHeader,
-  } = useOpenPeriods({
-    groupId: params.groupId,
-    cursor: location.query?.cursor as string | undefined,
-    limit: 10,
+  } = useQuery({
+    ...openPeriodsApiOptions({
+      organization,
+      groupId: params.groupId,
+      cursor: location.query?.cursor,
+      limit: 10,
+    }),
+    select: selectJsonWithHeaders,
   });
+  const openPeriods = response?.json ?? [];
 
-  const data: OpenPeriodDisplayData[] = openPeriods.flatMap(period => {
+  const data = openPeriods.flatMap(period => {
     const periodActivities = orderBy(
       period.activities.filter(activity => activity.type !== 'closed'),
       'dateCreated',
@@ -99,8 +105,8 @@ function IssueOpenPeriodsList() {
     return <AlignLeft>{dataRow[column]}</AlignLeft>;
   };
 
-  const links = parseLinkHeader(getResponseHeader?.('Link') ?? '');
-  const totalCount = getResponseHeader?.('X-Hits') ?? undefined;
+  const links = parseLinkHeader(response?.headers.Link ?? '');
+  const totalCount = response?.headers['X-Hits'];
   const previousDisabled = links.previous?.results === false;
   const nextDisabled = links.next?.results === false;
 

static/app/views/issueDetails/metricIssues/metricIssueChart.tsx

@@ -88,7 +88,7 @@ function MetricIssueChartContent({
   openPeriods: GroupOpenPeriod[];
 }) {
   const {selection} = usePageFilters();
-  const {openPeriod, isPending: isOpenPeriodPending} = useEventOpenPeriod({
+  const {data: openPeriod, isPending: isOpenPeriodPending} = useEventOpenPeriod({
     groupId: group.id,
     eventId: event?.id,
   });

static/app/views/issueDetails/streamline/sidebar/metricDetectorTriggeredSection.tsx

@@ -369,7 +369,7 @@ function TriggeredConditionDetails({
   );
   const [fallbackEndDate] = useState(() => new Date().toISOString());
   const detectionType = evidenceData.config?.detectionType ?? 'static';
-  const {openPeriod, isLoading: isOpenPeriodLoading} = useEventOpenPeriod({
+  const {data: openPeriod, isLoading: isOpenPeriodLoading} = useEventOpenPeriod({
     groupId,
     eventId,
   });

static/app/views/issueDetails/streamline/sidebar/openPeriodTimelineSection.tsx

@@ -78,7 +78,11 @@ export function OpenPeriodTimelineSection({
   groupId,
   eventId,
 }: OpenPeriodTimelineSectionProps) {
-  const {openPeriod, isPending, isError} = useEventOpenPeriod({
+  const {
+    data: openPeriod,
+    isPending,
+    isError,
+  } = useEventOpenPeriod({
     groupId,
     eventId,
   });