sentry/static/app/views/performance/newTraceDetails/traceApi/useReplayTraceMeta.tsx

import {useMemo} from 'react';
import type {Location} from 'history';

import {getUtcDateString} from 'sentry/utils/dates';
import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
import EventView from 'sentry/utils/discover/eventView';
import {useApiQuery} from 'sentry/utils/queryClient';
import useOrganization from 'sentry/utils/useOrganization';
import type {ReplayRecord} from 'sentry/views/replays/types';

import {type TraceMetaQueryResults, useTraceMeta} from './useTraceMeta';

// Fetches the meta data for all the traces in a replay and combines the results.
export function useReplayTraceMeta(
  replayRecord: ReplayRecord | undefined
): TraceMetaQueryResults {
  const organization = useOrganization();

  // EventView that is used to fetch the list of events for the replay
  const eventView = useMemo(() => {
    if (!replayRecord) {
      return null;
    }
    const replayId = replayRecord?.id;
    const projectId = replayRecord?.project_id;
    const start = getUtcDateString(replayRecord?.started_at.getTime());
    const end = getUtcDateString(replayRecord?.finished_at.getTime());

    return EventView.fromSavedQuery({
      id: undefined,
      name: `Traces in replay ${replayId}`,
      fields: ['trace', 'count(trace)', 'min(timestamp)'],
      orderby: 'min_timestamp',
      query: `replayId:${replayId}`,
      projects: [Number(projectId)],
      version: 2,
      start,
      end,
    });
  }, [replayRecord]);

  const start = getUtcDateString(replayRecord?.started_at.getTime());
  const end = getUtcDateString(replayRecord?.finished_at.getTime());

  const {
    data: eventsData,
    isLoading: eventsIsLoading,
    isRefetching: eventsIsRefetching,
    refetch: eventsRefetch,
  } = useApiQuery<{data: TableDataRow[]}>(
    [
      `/organizations/${organization.slug}/events/`,
      {
        query: eventView
          ? {
              ...eventView.getEventsAPIPayload({
                start,
                end,
                limit: 10,
              } as unknown as Location),
              sort: ['min_timestamp', 'trace'],
            }
          : {},
      },
    ],
    {
      staleTime: Infinity,
      enabled: !!eventView && !!replayRecord,
    }
  );

  const traceIds = useMemo(() => {
    return (eventsData?.data ?? []).map(({trace}) => String(trace)).filter(Boolean);
  }, [eventsData]);

  const meta = useTraceMeta(traceIds);

  const metaResults = useMemo(() => {
    return {
      data: meta.data,
      isLoading: eventsIsLoading || meta.isLoading,
      isRefetching: meta.isRefetching || eventsIsRefetching,
      refetch: () => {
        meta.refetch();
        eventsRefetch();
      },
    };
  }, [meta, eventsIsLoading, eventsIsRefetching, eventsRefetch]);

  return metaResults;
}