Skip to content

Commit 8130e08

Browse files
TkDodoTkDodo
committed
ref(tsc): traces endpoint to apiOptions
1 parent b06ca47 commit 8130e08

File tree

8 files changed

+97
-110
lines changed

8 files changed

+97
-110
lines changed

‎static/app/views/explore/hooks/useAnalytics.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ function useTrackAnalytics({
401401
'timestamp',
402402
];
403403
const resultMissingRoot =
404-
tracesTableResult?.result?.data?.data?.filter(trace => !defined(trace.name))
404+
tracesTableResult?.result?.data?.json?.data?.filter(trace => !defined(trace.name))
405405
.length ?? 0;
406406
const gaveSeerConsent = organization.hideAiFeatures
407407
? 'gen_ai_features_disabled'
@@ -417,7 +417,7 @@ function useTrackAnalytics({
417417
columns,
418418
columns_count: columns.length,
419419
query_status,
420-
result_length: tracesTableResult.result.data?.data?.length || 0,
420+
result_length: tracesTableResult.result.data?.json?.data?.length || 0,
421421
result_missing_root: resultMissingRoot,
422422
user_queries: search.formatString(),
423423
user_queries_count: search.tokens.length,
@@ -452,7 +452,7 @@ function useTrackAnalytics({
452452
timeseriesResult.data,
453453
timeseriesResult.isPending,
454454
title,
455-
tracesTableResult?.result.data?.data,
455+
tracesTableResult?.result.data?.json?.data,
456456
tracesTableResult?.result?.isPending,
457457
tracesTableResultDefined,
458458
visualizes,

‎static/app/views/explore/hooks/useExploreTracesTable.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import {useMemo} from 'react';
1+
import type {UseQueryResult} from '@tanstack/react-query';
22

33
import type {CaseInsensitive} from 'sentry/components/searchQueryBuilder/hooks';
4+
import type {ApiResponse} from 'sentry/utils/api/apiFetch';
45
import {decodeScalar} from 'sentry/utils/queryString';
56
import {useLocation} from 'sentry/utils/useLocation';
6-
import {useTraces} from 'sentry/views/explore/hooks/useTraces';
7+
import {
8+
type TraceResults,
9+
useTracesApiOptions,
10+
} from 'sentry/views/explore/hooks/useTraces';
711

812
interface UseExploreTracesTableOptions {
9-
enabled: boolean;
1013
limit: number;
1114
query: string;
1215
queryExtras?: {
@@ -17,21 +20,19 @@ interface UseExploreTracesTableOptions {
1720
};
1821
}
1922

20-
export interface TracesTableResult {
21-
result: ReturnType<typeof useTraces>;
22-
}
23+
export type TracesTableResult = {
24+
result: UseQueryResult<ApiResponse<TraceResults>, Error>;
25+
};
2326

24-
export function useExploreTracesTable({
25-
enabled,
27+
export function useExploreTracesTableApiOptions({
2628
limit,
2729
query,
2830
queryExtras,
29-
}: UseExploreTracesTableOptions): TracesTableResult {
31+
}: UseExploreTracesTableOptions) {
3032
const location = useLocation();
3133
const cursor = decodeScalar(location.query.cursor);
3234

33-
const result = useTraces({
34-
enabled,
35+
return useTracesApiOptions({
3536
query,
3637
limit,
3738
sort: '-timestamp',
@@ -41,8 +42,4 @@ export function useExploreTracesTable({
4142
metricQuery: queryExtras?.metricQuery,
4243
spanQuery: queryExtras?.spanQuery,
4344
});
44-
45-
return useMemo(() => {
46-
return {result};
47-
}, [result]);
4845
}

‎static/app/views/explore/hooks/useTraces.spec.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {useQuery} from '@tanstack/react-query';
12
import {OrganizationFixture} from 'sentry-fixture/organization';
23
import {ProjectFixture} from 'sentry-fixture/project';
34

@@ -7,7 +8,7 @@ import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLib
78
import {PageFiltersStore} from 'sentry/components/pageFilters/store';
89
import {ProjectsStore} from 'sentry/stores/projectsStore';
910

10-
import {useTraces, type TraceResult} from './useTraces';
11+
import {useTracesApiOptions, type TraceResult} from './useTraces';
1112

1213
function createTraceResult(trace?: Partial<TraceResult>): TraceResult {
1314
return {
@@ -83,7 +84,10 @@ describe('useTraces', () => {
8384
],
8485
});
8586

86-
const {result} = renderHookWithProviders(useTraces, {
87+
const useTracesQuery = (...params: Parameters<typeof useTracesApiOptions>) =>
88+
useQuery(useTracesApiOptions(...params));
89+
90+
const {result} = renderHookWithProviders(useTracesQuery, {
8791
...context,
8892
initialProps: {
8993
datetime: {

‎static/app/views/explore/hooks/useTraces.tsx‎

Lines changed: 26 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import {keepPreviousData as keepPreviousDataFn} from '@tanstack/react-query';
1+
import {queryOptions} from '@tanstack/react-query';
22

33
import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
44
import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
55
import type {CaseInsensitive} from 'sentry/components/searchQueryBuilder/hooks';
66
import type {PageFilters} from 'sentry/types/core';
7-
import {getApiUrl} from 'sentry/utils/api/getApiUrl';
8-
import type {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
9-
import {parseError} from 'sentry/utils/discover/genericDiscoverQuery';
7+
import {apiOptions} from 'sentry/utils/api/apiOptions';
108
import {DiscoverDatasets} from 'sentry/utils/discover/types';
11-
import type {UseApiQueryOptions, UseApiQueryResult} from 'sentry/utils/queryClient';
12-
import {useApiQuery} from 'sentry/utils/queryClient';
13-
import type {RequestError} from 'sentry/utils/requestError/requestError';
149
import {useOrganization} from 'sentry/utils/useOrganization';
1510

1611
export const BREAKDOWN_SLICES = 40;
@@ -54,20 +49,15 @@ export interface TraceResult {
5449

5550
type TraceBreakdownResult = TraceBreakdownProject | TraceBreakdownMissing;
5651

57-
interface TraceResults {
52+
export interface TraceResults {
5853
data: TraceResult[];
5954
meta: any;
6055
}
6156

62-
interface UseTracesOptions extends Pick<
63-
UseApiQueryOptions<TraceResults>,
64-
'refetchInterval'
65-
> {
57+
interface UseTracesOptions {
6658
caseInsensitive?: CaseInsensitive;
6759
cursor?: string;
6860
datetime?: PageFilters['datetime'];
69-
enabled?: boolean;
70-
keepPreviousData?: boolean;
7161
limit?: number;
7262
logQuery?: string[];
7363
metricQuery?: string[];
@@ -76,61 +66,42 @@ interface UseTracesOptions extends Pick<
7666
spanQuery?: string[];
7767
}
7868

79-
type UseTracesResult = Omit<UseApiQueryResult<TraceResults, RequestError>, 'error'> & {
80-
error: QueryError | null;
81-
};
82-
83-
export function useTraces({
69+
export function useTracesApiOptions({
8470
caseInsensitive,
8571
cursor,
8672
datetime,
87-
enabled,
8873
limit,
8974
query,
9075
sort,
91-
keepPreviousData,
92-
refetchInterval,
9376
logQuery,
9477
metricQuery,
9578
spanQuery,
96-
}: UseTracesOptions): UseTracesResult {
79+
}: UseTracesOptions) {
9780
const organization = useOrganization();
9881
const {selection} = usePageFilters();
9982

100-
const path = getApiUrl('/organizations/$organizationIdOrSlug/traces/', {
101-
path: {organizationIdOrSlug: organization.slug},
102-
});
103-
104-
const endpointOptions = {
105-
query: {
106-
project: selection.projects,
107-
environment: selection.environments,
108-
...normalizeDateTimeParams(datetime ?? selection.datetime),
109-
dataset: DiscoverDatasets.SPANS,
110-
query,
111-
sort,
112-
per_page: limit,
113-
cursor,
114-
breakdownSlices: BREAKDOWN_SLICES,
115-
caseInsensitive: caseInsensitive ? '1' : undefined,
116-
...(Array.isArray(logQuery) && logQuery.length > 0 ? {logQuery} : {}),
117-
...(Array.isArray(metricQuery) && metricQuery.length > 0 ? {metricQuery} : {}),
118-
...(Array.isArray(spanQuery) && spanQuery.length > 0 ? {spanQuery} : {}),
119-
},
120-
};
121-
122-
const {error, ...rest} = useApiQuery<TraceResults>([path, endpointOptions], {
123-
staleTime: 0,
83+
return queryOptions({
84+
...apiOptions.as<TraceResults>()('/organizations/$organizationIdOrSlug/traces/', {
85+
path: {organizationIdOrSlug: organization.slug},
86+
query: {
87+
project: selection.projects,
88+
environment: selection.environments,
89+
...normalizeDateTimeParams(datetime ?? selection.datetime),
90+
dataset: DiscoverDatasets.SPANS,
91+
query,
92+
sort,
93+
per_page: limit,
94+
cursor,
95+
breakdownSlices: BREAKDOWN_SLICES,
96+
caseInsensitive: caseInsensitive ? '1' : undefined,
97+
...(Array.isArray(logQuery) && logQuery.length > 0 ? {logQuery} : {}),
98+
...(Array.isArray(metricQuery) && metricQuery.length > 0 ? {metricQuery} : {}),
99+
...(Array.isArray(spanQuery) && spanQuery.length > 0 ? {spanQuery} : {}),
100+
},
101+
staleTime: 0,
102+
}),
124103
refetchOnWindowFocus: false,
125104
refetchOnMount: false,
126105
retry: false,
127-
placeholderData: keepPreviousData ? keepPreviousDataFn : undefined,
128-
enabled,
129-
refetchInterval,
130106
});
131-
132-
return {
133-
...rest,
134-
error: parseError(error),
135-
};
136107
}

‎static/app/views/explore/spans/spansTab.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Fragment, useEffect, useMemo} from 'react';
22
import {css} from '@emotion/react';
33
import styled from '@emotion/styled';
4+
import {useQuery} from '@tanstack/react-query';
45

56
import {Alert} from '@sentry/scraps/alert';
67
import {Button} from '@sentry/scraps/button';
@@ -20,6 +21,7 @@ import {t} from 'sentry/locale';
2021
import type {Organization} from 'sentry/types/organization';
2122
import type {Project} from 'sentry/types/project';
2223
import {defined} from 'sentry/utils';
24+
import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
2325
import {DiscoverDatasets} from 'sentry/utils/discover/types';
2426
import {useChartInterval} from 'sentry/utils/useChartInterval';
2527
import {useOrganization} from 'sentry/utils/useOrganization';
@@ -38,7 +40,7 @@ import {useCrossEventQueries} from 'sentry/views/explore/hooks/useCrossEventQuer
3840
import {useExploreAggregatesTable} from 'sentry/views/explore/hooks/useExploreAggregatesTable';
3941
import {useExploreSpansTable} from 'sentry/views/explore/hooks/useExploreSpansTable';
4042
import {useExploreTimeseries} from 'sentry/views/explore/hooks/useExploreTimeseries';
41-
import {useExploreTracesTable} from 'sentry/views/explore/hooks/useExploreTracesTable';
43+
import {useExploreTracesTableApiOptions} from 'sentry/views/explore/hooks/useExploreTracesTable';
4244
import {Tab, useTab} from 'sentry/views/explore/hooks/useTab';
4345
import {useVisitQuery} from 'sentry/views/explore/hooks/useVisitQuery';
4446
import {
@@ -217,15 +219,19 @@ function SpanTabContentSection({
217219
...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
218220
},
219221
});
220-
const tracesTableResult = useExploreTracesTable({
221-
query,
222-
limit,
222+
const tracesTableQuery = useQuery({
223+
...useExploreTracesTableApiOptions({
224+
query,
225+
limit,
226+
queryExtras: {
227+
caseInsensitive,
228+
...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
229+
},
230+
}),
231+
select: selectJsonWithHeaders,
223232
enabled: isReady && queryType === 'traces',
224-
queryExtras: {
225-
caseInsensitive,
226-
...(hasCrossEventQueries && defined(crossEventQueries) ? crossEventQueries : {}),
227-
},
228233
});
234+
const tracesTableResult = {result: tracesTableQuery};
229235

230236
const {result: timeseriesResult, samplingMode: timeseriesSamplingMode} =
231237
useExploreTimeseries({

‎static/app/views/explore/tables/tracesTable/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export function TracesTable({tracesTableResult}: TracesTableProps) {
5454
const query = useQueryParamsQuery();
5555

5656
const {result} = tracesTableResult;
57-
58-
const {data, isPending, isError, getResponseHeader} = result;
57+
const {isPending, isError} = result;
58+
const data = result.data?.json;
5959

6060
const showErrorState = !isPending && isError;
6161
const showEmptyState = !isPending && !showErrorState && (data?.data?.length ?? 0) === 0;
@@ -137,7 +137,7 @@ export function TracesTable({tracesTableResult}: TracesTableProps) {
137137
</Container>
138138
</StyledPanel>
139139
<Pagination
140-
pageLinks={getResponseHeader?.('Link')}
140+
pageLinks={result.data?.headers.Link}
141141
paginationAnalyticsEvent={paginationAnalyticsEvent}
142142
/>
143143
</Fragment>

0 commit comments

Comments
 (0)