diff --git a/static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx b/static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx index 04162dd78cb708..5b2e2a7812c559 100644 --- a/static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx +++ b/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, diff --git a/static/app/components/replays/table/deleteReplays.tsx b/static/app/components/replays/table/deleteReplays.tsx index e0243b69da011a..b62a060acf5542 100644 --- a/static/app/components/replays/table/deleteReplays.tsx +++ b/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,7 +14,7 @@ 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'; @@ -22,7 +22,7 @@ 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 (