ref(replay): Refactor how we refresh bulk delete notifications

static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx

@@ -1,28 +1,41 @@
 import type {ReplayBulkDeleteAuditLog} from 'sentry/components/replays/bulkDelete/types';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useApiQuery, type ApiQueryKey} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 
+type Query = {
+  referrer: string;
+  offset?: number;
+  per_page?: number;
+};
+
 interface Props {
   projectSlug: string;
-  query: {
-    referrer: string;
-    offset?: number;
-    per_page?: number;
-  };
+  query: Query;
   enabled?: boolean;
   refetchIntervalMs?: number;
 }
 
+export function useReplayBulkDeleteAuditLogQueryKey({
+  projectSlug,
+  query,
+}: {
+  projectSlug: string;
+  query: Query;
+}): ApiQueryKey {
+  const organization = useOrganization();
+  return [`/projects/${organization.slug}/${projectSlug}/replays/jobs/delete/`, {query}];
+}
+
 export default function useReplayBulkDeleteAuditLog({
   enabled,
   projectSlug,
   query,
   refetchIntervalMs,
 }: Props) {
-  const organization = useOrganization();
+  const queryKey = useReplayBulkDeleteAuditLogQueryKey({projectSlug, query});
   const {data, error, getResponseHeader, isPending, refetch} = useApiQuery<{
     data: ReplayBulkDeleteAuditLog[];
-  }>([`/projects/${organization.slug}/${projectSlug}/replays/jobs/delete/`, {query}], {
+  }>(queryKey, {
     enabled,
     refetchInterval: refetchIntervalMs ?? 1_000,
     retry: false,

static/app/components/replays/table/deleteReplays.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 import styled from '@emotion/styled';
 import invariant from 'invariant';
 
@@ -14,15 +14,15 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import Duration from 'sentry/components/duration/duration';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {KeyValueData} from 'sentry/components/keyValueData';
-import useReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
+import {useReplayBulkDeleteAuditLogQueryKey} from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCalendar, IconDelete} from 'sentry/icons';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
 import {getShortEventId} from 'sentry/utils/events';
-import type {QueryKeyEndpointOptions} from 'sentry/utils/queryClient';
+import {useQueryClient, type QueryKeyEndpointOptions} from 'sentry/utils/queryClient';
 import {decodeList} from 'sentry/utils/queryString';
 import useDeleteReplays, {
   type ReplayBulkDeletePayload,
@@ -40,6 +40,7 @@ interface Props {
 }
 
 export default function DeleteReplays({selectedIds, replays, queryOptions}: Props) {
+  const queryClient = useQueryClient();
   const analyticsArea = useAnalyticsArea();
   const {project: projectIds} = useLocationQuery({
     fields: {
@@ -59,10 +60,13 @@ export default function DeleteReplays({selectedIds, replays, queryOptions}: Prop
 
   const settingsPath = `/settings/projects/${project?.slug}/replays/?replaySettingsTab=bulk-delete`;
 
-  const {refetch: refetchAuditLog} = useReplayBulkDeleteAuditLog({
+  const queryKey = useReplayBulkDeleteAuditLogQueryKey({
     projectSlug: project?.slug ?? '',
     query: {referrer: analyticsArea},
   });
+  const refetchAuditLog = useCallback(() => {
+    queryClient.invalidateQueries({queryKey});
+  }, [queryClient, queryKey]);
 
   return (
     <Tooltip