From 0e9845bc692e8a958b03e79fe70b70344e0d0fce Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 16 Apr 2024 10:38:06 -0700
Subject: [PATCH 1/2] fix(replay): Filter empty querystring params from replay
 list api call

---
 static/app/views/replays/list/replaysList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/static/app/views/replays/list/replaysList.tsx b/static/app/views/replays/list/replaysList.tsx
index 6b91ab71a9fe2a..669ff5f228edcc 100644
--- a/static/app/views/replays/list/replaysList.tsx
+++ b/static/app/views/replays/list/replaysList.tsx
@@ -24,12 +24,20 @@ 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,
     },
   });
+  const filteredQuery = useMemo(
+    () => Object.fromEntries(Object.entries(query).filter(([_key, val]) => val !== '')),
+    [query]
+  );
 
   const {
     data: replays,
@@ -37,7 +45,7 @@ function ReplaysList() {
     isLoading,
     error,
   } = useFetchReplayList({
-    options: {query},
+    options: {query: filteredQuery},
     organization,
     queryReferrer: 'replayList',
   });

From 96f3206c4a14603f0a62469de8164f79d227ca83 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 16 Apr 2024 10:59:21 -0700
Subject: [PATCH 2/2] iterate to make the interface typesafe and better

---
 static/app/utils/queryClient.tsx              |  2 +-
 .../utils/replays/hooks/useFetchReplayList.ts | 26 ++++++++++++++++---
 static/app/views/replays/list/replaysList.tsx |  6 +----
 3 files changed, 25 insertions(+), 9 deletions(-)

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<string, string>,
   Query = Record<string, any>,
   Data = Record<string, any>,
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<Record<string, string>, 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 669ff5f228edcc..1cb32039ab85e4 100644
--- a/static/app/views/replays/list/replaysList.tsx
+++ b/static/app/views/replays/list/replaysList.tsx
@@ -34,10 +34,6 @@ function ReplaysList() {
       utc: decodeScalar,
     },
   });
-  const filteredQuery = useMemo(
-    () => Object.fromEntries(Object.entries(query).filter(([_key, val]) => val !== '')),
-    [query]
-  );
 
   const {
     data: replays,
@@ -45,7 +41,7 @@ function ReplaysList() {
     isLoading,
     error,
   } = useFetchReplayList({
-    options: {query: filteredQuery},
+    options: {query},
     organization,
     queryReferrer: 'replayList',
   });