ref(tsc): traces endpoint to apiOptions (#112574)

TkDodo · web-flow · commit d483d3eb07af · 2026-04-10T08:46:36.000+02:00
diff --git a/static/app/views/explore/hooks/useAnalytics.tsx b/static/app/views/explore/hooks/useAnalytics.tsx
@@ -102,7 +102,7 @@ function useTrackAnalytics({
     queryType === 'aggregate'
       ? (aggregatesTableResult.result.error?.message ?? '')
       : queryType === 'traces'
-        ? (tracesTableResult?.result.error?.message ?? '')
+        ? (tracesTableResult?.error?.message ?? '')
         : (spansTableResult.result.error?.message ?? '');
   const chartError = timeseriesResult.error?.message ?? '';
   const query_status = tableError || chartError ? 'error' : 'success';
@@ -405,7 +405,7 @@ function useTrackAnalytics({
       'timestamp',
     ];
     const resultMissingRoot =
-      tracesTableResult?.result?.data?.data?.filter(trace => !defined(trace.name))
+      tracesTableResult?.result?.data?.json?.data?.filter(trace => !defined(trace.name))
         .length ?? 0;
     const gaveSeerConsent = organization.hideAiFeatures
       ? 'gen_ai_features_disabled'
@@ -421,7 +421,7 @@ function useTrackAnalytics({
       columns,
       columns_count: columns.length,
       query_status,
-      result_length: tracesTableResult.result.data?.data?.length || 0,
+      result_length: tracesTableResult.result.data?.json?.data?.length || 0,
       result_missing_root: resultMissingRoot,
       user_queries: search.formatString(),
       user_queries_count: search.tokens.length,
@@ -456,7 +456,7 @@ function useTrackAnalytics({
     timeseriesResult.data,
     timeseriesResult.isPending,
     title,
-    tracesTableResult?.result.data?.data,
+    tracesTableResult?.result.data?.json?.data,
     tracesTableResult?.result?.isPending,
     tracesTableResultDefined,
     visualizes,
diff --git a/static/app/views/explore/hooks/useExploreTracesTable.tsx b/static/app/views/explore/hooks/useExploreTracesTable.tsx
@@ -1,12 +1,16 @@
-import {useMemo} from 'react';
+import type {UseQueryResult} from '@tanstack/react-query';
 
 import type {CaseInsensitive} from 'sentry/components/searchQueryBuilder/hooks';
+import type {ApiResponse} from 'sentry/utils/api/apiFetch';
+import type {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
-import {useTraces} from 'sentry/views/explore/hooks/useTraces';
+import {
+  type TraceResults,
+  useTracesApiOptions,
+} from 'sentry/views/explore/hooks/useTraces';
 
 interface UseExploreTracesTableOptions {
-  enabled: boolean;
   limit: number;
   query: string;
   queryExtras?: {
@@ -17,21 +21,20 @@ interface UseExploreTracesTableOptions {
   };
 }
 
-export interface TracesTableResult {
-  result: ReturnType<typeof useTraces>;
-}
+export type TracesTableResult = {
+  error: QueryError | null;
+  result: UseQueryResult<ApiResponse<TraceResults>, Error>;
+};
 
-export function useExploreTracesTable({
-  enabled,
+export function useExploreTracesTableApiOptions({
   limit,
   query,
   queryExtras,
-}: UseExploreTracesTableOptions): TracesTableResult {
+}: UseExploreTracesTableOptions) {
   const location = useLocation();
   const cursor = decodeScalar(location.query.cursor);
 
-  const result = useTraces({
-    enabled,
+  return useTracesApiOptions({
     query,
     limit,
     sort: '-timestamp',
@@ -41,8 +44,4 @@ export function useExploreTracesTable({
     metricQuery: queryExtras?.metricQuery,
     spanQuery: queryExtras?.spanQuery,
   });
-
-  return useMemo(() => {
-    return {result};
-  }, [result]);
 }
diff --git a/static/app/views/explore/hooks/useTraces.spec.tsx b/static/app/views/explore/hooks/useTraces.spec.tsx
@@ -1,3 +1,4 @@
+import {useQuery} from '@tanstack/react-query';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
@@ -7,7 +8,7 @@ import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLib
 import {PageFiltersStore} from 'sentry/components/pageFilters/store';
 import {ProjectsStore} from 'sentry/stores/projectsStore';
 
-import {useTraces, type TraceResult} from './useTraces';
+import {useTracesApiOptions, type TraceResult} from './useTraces';
 
 function createTraceResult(trace?: Partial<TraceResult>): TraceResult {
   return {
@@ -83,7 +84,10 @@ describe('useTraces', () => {
       ],
     });
 
-    const {result} = renderHookWithProviders(useTraces, {
+    const useTracesQuery = (...params: Parameters<typeof useTracesApiOptions>) =>
+      useQuery(useTracesApiOptions(...params));
+
+    const {result} = renderHookWithProviders(useTracesQuery, {
       ...context,
       initialProps: {
         datetime: {
diff --git a/static/app/views/explore/hooks/useTraces.tsx b/static/app/views/explore/hooks/useTraces.tsx
@@ -1,16 +1,11 @@
-import {keepPreviousData as keepPreviousDataFn} from '@tanstack/react-query';
+import {queryOptions} from '@tanstack/react-query';
 
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import type {CaseInsensitive} from 'sentry/components/searchQueryBuilder/hooks';
 import type {PageFilters} from 'sentry/types/core';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import type {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
-import {parseError} from 'sentry/utils/discover/genericDiscoverQuery';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import type {UseApiQueryOptions, UseApiQueryResult} from 'sentry/utils/queryClient';
-import {useApiQuery} from 'sentry/utils/queryClient';
-import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 export const BREAKDOWN_SLICES = 40;
@@ -54,20 +49,15 @@ export interface TraceResult {
 
 type TraceBreakdownResult = TraceBreakdownProject | TraceBreakdownMissing;
 
-interface TraceResults {
+export interface TraceResults {
   data: TraceResult[];
   meta: any;
 }
 
-interface UseTracesOptions extends Pick<
-  UseApiQueryOptions<TraceResults>,
-  'refetchInterval'
-> {
+interface UseTracesOptions {
   caseInsensitive?: CaseInsensitive;
   cursor?: string;
   datetime?: PageFilters['datetime'];
-  enabled?: boolean;
-  keepPreviousData?: boolean;
   limit?: number;
   logQuery?: string[];
   metricQuery?: string[];
@@ -76,61 +66,42 @@ interface UseTracesOptions extends Pick<
   spanQuery?: string[];
 }
 
-type UseTracesResult = Omit<UseApiQueryResult<TraceResults, RequestError>, 'error'> & {
-  error: QueryError | null;
-};
-
-export function useTraces({
+export function useTracesApiOptions({
   caseInsensitive,
   cursor,
   datetime,
-  enabled,
   limit,
   query,
   sort,
-  keepPreviousData,
-  refetchInterval,
   logQuery,
   metricQuery,
   spanQuery,
-}: UseTracesOptions): UseTracesResult {
+}: UseTracesOptions) {
   const organization = useOrganization();
   const {selection} = usePageFilters();
 
-  const path = getApiUrl('/organizations/$organizationIdOrSlug/traces/', {
-    path: {organizationIdOrSlug: organization.slug},
-  });
-
-  const endpointOptions = {
-    query: {
-      project: selection.projects,
-      environment: selection.environments,
-      ...normalizeDateTimeParams(datetime ?? selection.datetime),
-      dataset: DiscoverDatasets.SPANS,
-      query,
-      sort,
-      per_page: limit,
-      cursor,
-      breakdownSlices: BREAKDOWN_SLICES,
-      caseInsensitive: caseInsensitive ? '1' : undefined,
-      ...(Array.isArray(logQuery) && logQuery.length > 0 ? {logQuery} : {}),
-      ...(Array.isArray(metricQuery) && metricQuery.length > 0 ? {metricQuery} : {}),
-      ...(Array.isArray(spanQuery) && spanQuery.length > 0 ? {spanQuery} : {}),
-    },
-  };
-
-  const {error, ...rest} = useApiQuery<TraceResults>([path, endpointOptions], {
-    staleTime: 0,
+  return queryOptions({
+    ...apiOptions.as<TraceResults>()('/organizations/$organizationIdOrSlug/traces/', {
+      path: {organizationIdOrSlug: organization.slug},
+      query: {
+        project: selection.projects,
+        environment: selection.environments,
+        ...normalizeDateTimeParams(datetime ?? selection.datetime),
+        dataset: DiscoverDatasets.SPANS,
+        query,
+        sort,
+        per_page: limit,
+        cursor,
+        breakdownSlices: BREAKDOWN_SLICES,
+        caseInsensitive: caseInsensitive ? '1' : undefined,
+        ...(Array.isArray(logQuery) && logQuery.length > 0 ? {logQuery} : {}),
+        ...(Array.isArray(metricQuery) && metricQuery.length > 0 ? {metricQuery} : {}),
+        ...(Array.isArray(spanQuery) && spanQuery.length > 0 ? {spanQuery} : {}),
+      },
+      staleTime: 0,
+    }),
     refetchOnWindowFocus: false,
     refetchOnMount: false,
     retry: false,
-    placeholderData: keepPreviousData ? keepPreviousDataFn : undefined,
-    enabled,
-    refetchInterval,
   });
-
-  return {
-    ...rest,
-    error: parseError(error),
-  };
 }
diff --git a/static/app/views/explore/spans/spansTab.tsx b/static/app/views/explore/spans/spansTab.tsx
@@ -1,6 +1,7 @@
 import {Fragment, useEffect, useMemo} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Button} from '@sentry/scraps/button';
@@ -20,6 +21,8 @@ import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
+import {parseError} from 'sentry/utils/discover/genericDiscoverQuery';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -38,7 +41,10 @@ import {useCrossEventQueries} from 'sentry/views/explore/hooks/useCrossEventQuer
 import {useExploreAggregatesTable} from 'sentry/views/explore/hooks/useExploreAggregatesTable';
 import {useExploreSpansTable} from 'sentry/views/explore/hooks/useExploreSpansTable';
 import {useExploreTimeseries} from 'sentry/views/explore/hooks/useExploreTimeseries';
-import {useExploreTracesTable} from 'sentry/views/explore/hooks/useExploreTracesTable';
+import {
+  type TracesTableResult,
+  useExploreTracesTableApiOptions,
+} from 'sentry/views/explore/hooks/useExploreTracesTable';
 import {Tab, useTab} from 'sentry/views/explore/hooks/useTab';
 import {useVisitQuery} from 'sentry/views/explore/hooks/useVisitQuery';
 import {
@@ -217,15 +223,22 @@ function SpanTabContentSection({
       ...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
     },
   });
-  const tracesTableResult = useExploreTracesTable({
-    query,
-    limit,
+  const tracesTableQuery = useQuery({
+    ...useExploreTracesTableApiOptions({
+      query,
+      limit,
+      queryExtras: {
+        caseInsensitive,
+        ...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
+      },
+    }),
+    select: selectJsonWithHeaders,
     enabled: isReady && queryType === 'traces',
-    queryExtras: {
-      caseInsensitive,
-      ...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
-    },
   });
+  const tracesTableResult = {
+    result: tracesTableQuery,
+    error: parseError(tracesTableQuery.error),
+  } satisfies TracesTableResult;
 
   const {result: timeseriesResult, samplingMode: timeseriesSamplingMode} =
     useExploreTimeseries({
@@ -265,7 +278,7 @@ function SpanTabContentSection({
     : queryType === 'samples'
       ? spansTableResult.result.error
       : queryType === 'traces'
-        ? tracesTableResult.result.error
+        ? tracesTableResult.error
         : queryType === 'aggregate'
           ? aggregatesTableResult.result.error
           : null;
diff --git a/static/app/views/explore/tables/tracesTable/index.tsx b/static/app/views/explore/tables/tracesTable/index.tsx
@@ -54,8 +54,8 @@ export function TracesTable({tracesTableResult}: TracesTableProps) {
   const query = useQueryParamsQuery();
 
   const {result} = tracesTableResult;
-
-  const {data, isPending, isError, getResponseHeader} = result;
+  const {isPending, isError} = result;
+  const data = result.data?.json;
 
   const showErrorState = !isPending && isError;
   const showEmptyState = !isPending && !showErrorState && (data?.data?.length ?? 0) === 0;
@@ -137,7 +137,7 @@ export function TracesTable({tracesTableResult}: TracesTableProps) {
         </Container>
       </StyledPanel>
       <Pagination
-        pageLinks={getResponseHeader?.('Link')}
+        pageLinks={result.data?.headers.Link}
         paginationAnalyticsEvent={paginationAnalyticsEvent}
       />
     </Fragment>
diff --git a/static/app/views/insights/pages/agents/components/tracesTable.tsx b/static/app/views/insights/pages/agents/components/tracesTable.tsx
diff --git a/static/app/views/performance/onboarding.tsx b/static/app/views/performance/onboarding.tsx
