ref(logs): Unify pinned-log fetching into a single query+cache

The previous strategy paired per-id useQueries(queryFn: skipToken) with a
separate driver query that imperatively seeded their caches via setQueryData.
Those per-id entries had no queryFn, so once garbage-collected they could not
be refetched, leaving rows permanently blank or stuck pending — a latent
runtime invariant, and an anti-pattern of sourcing a query's data from a
sibling query's side effects.

Collapse it into one useQuery whose queryFn runs the same two-step fetch
(selected range, then a UUIDv7-derived wide window) and returns its rows
directly. placeholderData: keepPreviousData preserves the no-flicker-on-unpin
behavior the per-id cache was hacked in to provide. The unpin effect now only
removes ids that are still missing, so retained notFoundIds can't re-trigger a
removal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: JoshuaKGoldberg

static/app/views/explore/logs/pinning/usePinnedLogsQuery.tsx

@@ -1,6 +1,6 @@
-import {useCallback, useEffect, useMemo} from 'react';
+import {useEffect, useMemo} from 'react';
 import type {QueryClient, QueryFunctionContext} from '@tanstack/react-query';
-import {skipToken, useQueries, useQuery} from '@tanstack/react-query';
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
 import moment from 'moment-timezone';
 
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
@@ -27,7 +27,7 @@ interface PinnedLogsOptions {
   logsPinning: LogsPinning | undefined;
 }
 
-const DRIVER_QUERY_KEY = 'pinned-logs-driver';
+const PINNED_LOGS_QUERY_KEY = 'pinned-logs';
 
 /**
  * Practically-infinite period so the wide step finds any log still in retention,
@@ -42,52 +42,22 @@ const WIDE_STATS_PERIOD = '9999d';
  */
 const WINDOW_BUFFER_MS = 5 * 60 * 1000;
 
-function pinnedLogRowQueryKey(id: string, fields: string[]) {
-  return ['pinned-log-row', id, fields] as const;
+interface PinnedLogsResult {
+  notFoundIds: string[];
+  rows: OurLogsResponseItem[];
 }
 
 export function usePinnedLogsQuery({allRows, logsPinning}: PinnedLogsOptions) {
+  const organization = useOrganization();
+  const {selection, isReady: pageFiltersReady} = usePageFilters();
   const userFields = useQueryParamsFields();
+
   const fields = useMemo(
     () => Array.from(new Set([...AlwaysPresentLogFields, ...userFields])),
     [userFields]
   );
 
   const missingIds = useMissingPinnedLogIds(allRows, logsPinning);
-  const {isFetching, isError, refetch} = usePinnedLogFetcher(
-    missingIds,
-    fields,
-    logsPinning
-  );
-  const {rows, resolvedIds} = useCachedPinnedLogRows(missingIds, fields);
-
-  return {
-    fetchedRows: rows,
-    isPending: isFetching && missingIds.some(id => !resolvedIds.has(id)),
-    isError,
-    refetch,
-  };
-}
-
-/** Pinned ids that aren't already present in the loaded table rows. */
-function useMissingPinnedLogIds(
-  allRows: LogTableRowItem[],
-  logsPinning: LogsPinning | undefined
-) {
-  return useMemo(() => {
-    const allRowIds = new Set(allRows.map(row => row[OurLogKnownFieldKey.ID]));
-    const pinnedIds = logsPinning?.getPinnedRowIds() ?? [];
-    return pinnedIds.filter(id => !allRowIds.has(id));
-  }, [logsPinning, allRows]);
-}
-
-function usePinnedLogFetcher(
-  missingIds: string[],
-  fields: string[],
-  logsPinning: LogsPinning | undefined
-) {
-  const organization = useOrganization();
-  const {selection, isReady: pageFiltersReady} = usePageFilters();
 
   const baseQuery = useMemo(
     () => ({
@@ -105,100 +75,93 @@ function usePinnedLogFetcher(
     [selection.datetime]
   );
 
-  const driver = useQuery({
+  const query = useQuery({
     queryKey: [
-      DRIVER_QUERY_KEY,
+      PINNED_LOGS_QUERY_KEY,
       {
         organizationSlug: organization.slug,
         ids: [...missingIds].sort(),
-        fields,
         baseQuery,
         dateParams: inRangeDateParams,
       },
     ],
     enabled: pageFiltersReady && !!logsPinning && missingIds.length > 0,
-    staleTime: 0,
+    staleTime: Infinity,
+    placeholderData: keepPreviousData,
     queryFn: context =>
-      fetchAndCachePinnedLogs(context, {
+      fetchPinnedLogs(context, {
         ids: missingIds,
         organizationSlug: organization.slug,
         baseQuery,
         inRangeDateParams,
-        fields,
       }),
   });
 
-  const notFoundIds = driver.data;
-  const removePinnedRows = logsPinning?.removePinnedRows;
+  const missingIdSet = useMemo(() => new Set(missingIds), [missingIds]);
+
+  const notFoundIds = query.data?.notFoundIds;
   useEffect(() => {
-    if (removePinnedRows && notFoundIds?.length) {
-      removePinnedRows(notFoundIds);
+    if (!logsPinning?.removePinnedRows || !notFoundIds?.length) {
+      return;
+    }
+    const idsToRemove = notFoundIds.filter(id => missingIdSet.has(id));
+    if (idsToRemove.length) {
+      logsPinning?.removePinnedRows(idsToRemove);
     }
-  }, [notFoundIds, removePinnedRows]);
+  }, [logsPinning, missingIdSet, notFoundIds]);
+
+  const fetchedRows = useMemo(
+    () =>
+      (query.data?.rows ?? []).filter(row =>
+        missingIdSet.has(row[OurLogKnownFieldKey.ID])
+      ),
+    [query.data, missingIdSet]
+  );
+  const resolvedIds = useMemo(
+    () => new Set(fetchedRows.map(row => row[OurLogKnownFieldKey.ID])),
+    [fetchedRows]
+  );
 
   return {
-    isFetching: driver.fetchStatus === 'fetching',
-    isError: driver.isError,
-    refetch: driver.refetch,
+    fetchedRows,
+    isPending: query.isFetching && missingIds.some(id => !resolvedIds.has(id)),
+    isError: query.isError,
+    refetch: query.refetch,
   };
 }
 
-function useCachedPinnedLogRows(missingIds: string[], fields: string[]) {
-  const combine = useCallback(
-    (results: Array<{data: unknown}>) => {
-      const rows: OurLogsResponseItem[] = [];
-      const resolvedIds = new Set<string>();
-      results.forEach((result, index) => {
-        const row = result.data as OurLogsResponseItem | undefined;
-        if (row) {
-          rows.push(row);
-          resolvedIds.add(missingIds[index]!);
-        }
-      });
-      return {rows, resolvedIds};
-    },
-    [missingIds]
-  );
-
-  return useQueries({
-    queries: missingIds.map(id => ({
-      queryKey: pinnedLogRowQueryKey(id, fields),
-      queryFn: skipToken,
-      staleTime: Infinity,
-    })),
-    combine,
-  });
+function useMissingPinnedLogIds(
+  allRows: LogTableRowItem[],
+  logsPinning: LogsPinning | undefined
+) {
+  return useMemo(() => {
+    const allRowIds = new Set(allRows.map(row => row[OurLogKnownFieldKey.ID]));
+    const pinnedIds = logsPinning?.getPinnedRowIds() ?? [];
+    return pinnedIds.filter(id => !allRowIds.has(id));
+  }, [logsPinning, allRows]);
 }
 
-type FetchAndCacheContext = Pick<QueryFunctionContext, 'signal' | 'meta'> & {
+type FetchContext = Pick<QueryFunctionContext, 'signal' | 'meta'> & {
   client: QueryClient;
 };
 
-interface FetchAndCacheOptions {
+interface FetchOptions {
   baseQuery: Record<string, unknown>;
-  fields: string[];
   ids: string[];
   inRangeDateParams: Record<string, unknown>;
   organizationSlug: string;
 }
 
-async function fetchAndCachePinnedLogs(
-  {client, signal, meta}: FetchAndCacheContext,
-  {ids, organizationSlug, baseQuery, inRangeDateParams, fields}: FetchAndCacheOptions
-): Promise<string[]> {
-  const idsToFetch = ids.filter(
-    id => !client.getQueryData(pinnedLogRowQueryKey(id, fields))
-  );
-  if (idsToFetch.length === 0) {
-    return [];
-  }
-
+async function fetchPinnedLogs(
+  {client, signal, meta}: FetchContext,
+  {ids, organizationSlug, baseQuery, inRangeDateParams}: FetchOptions
+): Promise<PinnedLogsResult> {
   const url = getApiUrl('/organizations/$organizationIdOrSlug/events/', {
     path: {organizationIdOrSlug: organizationSlug},
   });
 
-  const fetchByIds = (idsForFetch: string[], dateParams: Record<string, unknown>) => {
-    return apiFetch<EventsLogsResult>({
+  const fetchByIds = (idsForFetch: string[], dateParams: Record<string, unknown>) =>
+    apiFetch<EventsLogsResult>({
       client,
       signal,
       meta,
@@ -215,36 +178,43 @@ async function fetchAndCachePinnedLogs(
         {infinite: false},
       ],
     });
+
+  const rowsById = new Map<string, OurLogsResponseItem>();
+  const collect = (result: EventsLogsResult) => {
+    const found = new Set<string>();
+    for (const row of result.data) {
+      const id = row[OurLogKnownFieldKey.ID];
+      rowsById.set(id, row);
+      found.add(id);
+    }
+    return found;
   };
 
   // Step 1: Search in the parent selected range for pins that are not loaded yet.
   // Start with this smaller range so we don't have to scan the org's full retention period.
   let foundInRange = new Set<string>();
   try {
-    foundInRange = seedAndCollect(
-      client,
-      (await fetchByIds(idsToFetch, inRangeDateParams)).json,
-      fields
-    );
+    foundInRange = collect((await fetchByIds(ids, inRangeDateParams)).json);
   } catch {
     // The selected range failed; let the wide window resolve everything instead.
   }
 
-  const stillMissing = idsToFetch.filter(id => !foundInRange.has(id));
+  const stillMissing = ids.filter(id => !foundInRange.has(id));
   if (stillMissing.length === 0) {
-    return [];
+    return {rows: [...rowsById.values()], notFoundIds: []};
   }
 
   // Step 2: Any IDs not found in the parent selected range escalate to a wider window.
   const wide = await fetchByIds(stillMissing, wideDateParams(stillMissing));
-  const foundWide = seedAndCollect(client, wide.json, fields);
+  const foundWide = collect(wide.json);
 
-  // A partial scan didn't prove the unfound ids absent, so don't unpin them.
-  if (wide.json.meta?.dataScanned === 'partial') {
-    return [];
-  }
+  const notFoundIds =
+    wide.json.meta?.dataScanned === 'partial'
+      ? // A partial scan didn't prove the unfound ids absent, so don't unpin them.
+        []
+      : stillMissing.filter(id => !foundWide.has(id));
 
-  return stillMissing.filter(id => !foundWide.has(id));
+  return {rows: [...rowsById.values()], notFoundIds};
 }
 
 /**
@@ -264,19 +234,3 @@ function wideDateParams(ids: string[]): Record<string, unknown> {
     end: getUtcDateString(moment(Math.max(...decoded) + WINDOW_BUFFER_MS)),
   };
 }
-
-const seedAndCollect = (
-  client: QueryClient,
-  result: EventsLogsResult,
-  fields: string[]
-) => {
-  const foundIds = new Set<string>();
-
-  for (const row of result.data) {
-    const id = row[OurLogKnownFieldKey.ID];
-    client.setQueryData(pinnedLogRowQueryKey(id, fields), row);
-    foundIds.add(id);
-  }
-
-  return foundIds;
-};