sentry/static/app/views/starfish/queries/useFullSpanFromTrace.tsx

import {Sort} from 'sentry/utils/discover/fields';
import {useEventJSON} from 'sentry/views/starfish/queries/useEventJSON';
import {useIndexedSpans} from 'sentry/views/starfish/queries/useIndexedSpans';
import {SpanIndexedField} from 'sentry/views/starfish/types';

// NOTE: Fetching the top one is a bit naive, but works for now. A better
// approach might be to fetch several at a time, and let the hook consumer
// decide how to display them
export function useFullSpanFromTrace(
  group?: string,
  sorts?: Sort[],
  enabled: boolean = true,
  extraFilters: Record<string, string> = {}
) {
  const filters = {...extraFilters};

  if (group) {
    filters[SpanIndexedField.SPAN_GROUP] = group;
  }

  const indexedSpansResponse = useIndexedSpans(filters, sorts, 1, enabled);

  const firstIndexedSpan = indexedSpansResponse.data?.[0];

  const eventJSONResponse = useEventJSON(
    firstIndexedSpan ? firstIndexedSpan[SpanIndexedField.TRANSACTION_ID] : undefined,
    firstIndexedSpan ? firstIndexedSpan[SpanIndexedField.PROJECT] : undefined
  );

  const fullSpan = eventJSONResponse?.data?.spans?.find(
    span => span.span_id === firstIndexedSpan?.[SpanIndexedField.ID]
  );

  // N.B. There isn't a great pattern for us to merge the responses together,
  // so we're only merging the three most important properties
  return {
    isLoading: indexedSpansResponse.isLoading || eventJSONResponse.isLoading,
    isFetching: indexedSpansResponse.isFetching || eventJSONResponse.isFetching,
    isError: indexedSpansResponse.isError || eventJSONResponse.isError,
    data: fullSpan,
  };
}