diff --git a/static/app/utils/queryClient.tsx b/static/app/utils/queryClient.tsx index a88a93cf3e82dd..e4ea4f1a3dfb4e 100644 --- a/static/app/utils/queryClient.tsx +++ b/static/app/utils/queryClient.tsx @@ -40,7 +40,7 @@ export const DEFAULT_QUERY_CLIENT_CONFIG: QueryClientConfig = { // [0]: https://tanstack.com/query/v4/docs/guides/query-cancellation#default-behavior const PERSIST_IN_FLIGHT = true; -type QueryKeyEndpointOptions< +export type QueryKeyEndpointOptions< Headers = Record, Query = Record, Data = Record, diff --git a/static/app/utils/replays/hooks/useFetchReplayList.ts b/static/app/utils/replays/hooks/useFetchReplayList.ts index 2be59e18ec4a96..f284af0fe4aff2 100644 --- a/static/app/utils/replays/hooks/useFetchReplayList.ts +++ b/static/app/utils/replays/hooks/useFetchReplayList.ts @@ -3,7 +3,11 @@ import {useMemo} from 'react'; import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters'; import type {Organization} from 'sentry/types'; import {uniq} from 'sentry/utils/array/uniq'; -import {type ApiQueryKey, useApiQuery} from 'sentry/utils/queryClient'; +import { + type ApiQueryKey, + type QueryKeyEndpointOptions, + useApiQuery, +} from 'sentry/utils/queryClient'; import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils'; import { REPLAY_LIST_FIELDS, @@ -11,8 +15,20 @@ import { type ReplayListRecord, } from 'sentry/views/replays/types'; +interface QueryOptions { + cursor?: string; + end?: string; + environment?: string[]; + project?: string[]; + query?: string; + sort?: string; + start?: string; + statsPeriod?: string; + utc?: string; +} + type Options = { - options: ApiQueryKey[1]; + options: QueryKeyEndpointOptions, QueryOptions, never>; organization: Organization; queryReferrer: ReplayListQueryReferrer; }; @@ -40,13 +56,17 @@ export default function useFetchReplayList({ queryReferrer === 'issueReplays' || queryReferrer === 'transactionReplays' ? ALL_ACCESS_PROJECTS : originalProject; + + const query = Object.fromEntries( + Object.entries(options.query).filter(([_key, val]) => val !== '') + ); return [ url, { ...options, query: { per_page: 50, - ...options.query, + ...query, fields, project, queryReferrer, diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx index 6b91ab71a9fe2a..1cb32039ab85e4 100644 --- a/static/app/views/replays/list/replaysList.tsx +++ b/static/app/views/replays/list/replaysList.tsx @@ -24,10 +24,14 @@ function ReplaysList() { const query = useLocationQuery({ fields: { cursor: decodeScalar, + end: decodeScalar, + environment: decodeList, project: decodeList, query: decodeScalar, sort: value => decodeScalar(value, '-started_at'), + start: decodeScalar, statsPeriod: decodeScalar, + utc: decodeScalar, }, });