ref(explore): Accept selection in validateQuery, deduplicate via cache

Move page filter selection out of useAttributeValidation and accept it
as a parameter. This gives the hook a stable identity and lets the call
site control when re-validation happens. Use staleTime: Infinity on the
query options so TanStack Query deduplicates calls with the same filter
keys and selection without extra refs.

Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

Author: nsdeschenes

static/app/views/explore/components/traceItemSearchQueryBuilder.spec.tsx

@@ -1,8 +1,9 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {PageFiltersStore} from 'sentry/components/pageFilters/store';
+import {parseSearch} from 'sentry/components/searchSyntax/parser';
 import {FieldKind} from 'sentry/utils/fields';
 import {
   useTraceItemSearchQueryBuilderProps,
@@ -247,4 +248,100 @@ describe('useTraceItemSearchQueryBuilderProps', () => {
       'log.flag',
     ]);
   });
+
+  it('calls validateQuery when filter keys change', async () => {
+    const validateMock = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/trace-items/attributes/validate/',
+      method: 'POST',
+      body: {attributes: {'span.op': {valid: true}}},
+    });
+
+    const {result} = renderHookWithProviders(useTraceItemSearchQueryBuilderProps, {
+      initialProps: defaultInitialProps,
+      organization,
+    });
+
+    act(() => {
+      result.current.onChange?.('span.op:db', {
+        parsedQuery: parseSearch('span.op:db'),
+        queryIsValid: true,
+      });
+    });
+
+    await waitFor(() => {
+      expect(validateMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('does not call validateQuery when only filter values change', async () => {
+    const validateMock = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/trace-items/attributes/validate/',
+      method: 'POST',
+      body: {attributes: {'span.op': {valid: true}}},
+    });
+
+    const {result} = renderHookWithProviders(useTraceItemSearchQueryBuilderProps, {
+      initialProps: defaultInitialProps,
+      organization,
+    });
+
+    await act(async () => {
+      result.current.onChange?.('span.op:db', {
+        parsedQuery: parseSearch('span.op:db'),
+        queryIsValid: true,
+      });
+    });
+
+    expect(validateMock).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.onChange?.('span.op:web', {
+        parsedQuery: parseSearch('span.op:web'),
+        queryIsValid: true,
+      });
+    });
+
+    // Still only 1 call — value changed but keys didn't
+    expect(validateMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls validateQuery when a new filter key is added', async () => {
+    const validateMock = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/trace-items/attributes/validate/',
+      method: 'POST',
+      body: {
+        attributes: {
+          'span.op': {valid: true},
+          'other.key': {valid: true},
+        },
+      },
+    });
+
+    const {result} = renderHookWithProviders(useTraceItemSearchQueryBuilderProps, {
+      initialProps: defaultInitialProps,
+      organization,
+    });
+
+    act(() => {
+      result.current.onChange?.('span.op:db', {
+        parsedQuery: parseSearch('span.op:db'),
+        queryIsValid: true,
+      });
+    });
+
+    await waitFor(() => {
+      expect(validateMock).toHaveBeenCalledTimes(1);
+    });
+
+    act(() => {
+      result.current.onChange?.('span.op:db other.key:val', {
+        parsedQuery: parseSearch('span.op:db other.key:val'),
+        queryIsValid: true,
+      });
+    });
+
+    await waitFor(() => {
+      expect(validateMock).toHaveBeenCalledTimes(2);
+    });
+  });
 });

static/app/views/explore/components/traceItemSearchQueryBuilder.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useEffect, useMemo} from 'react';
 
+import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import type {SpanSearchQueryBuilderProps} from 'sentry/components/performance/spanSearchQueryBuilder';
 import {
   SearchQueryBuilder,
@@ -108,20 +109,26 @@ export function useTraceItemSearchQueryBuilderProps({
 }: TraceItemSearchQueryBuilderProps) {
   const placeholderText = itemTypeToDefaultPlaceholder(itemType);
 
-  const {invalidFilterKeys, validateQuery} = useAttributeValidation(itemType, projects);
+  const {invalidFilterKeys, validateQuery} = useAttributeValidation(itemType);
+  const {selection} = usePageFilters();
+  const effectiveProjects = projects ?? selection.projects;
+  const validationSelection = useMemo(
+    () => ({datetime: selection.datetime, projects: effectiveProjects}),
+    [selection.datetime, effectiveProjects]
+  );
 
   useEffect(() => {
     if (initialQuery) {
-      validateQuery(initialQuery);
+      validateQuery(initialQuery, validationSelection);
     }
-  }, [initialQuery, validateQuery]);
+  }, [initialQuery, validateQuery, validationSelection]);
 
   const wrappedOnChange = useCallback(
     (query: string, state: CallbackSearchState) => {
-      validateQuery(query);
+      validateQuery(query, validationSelection);
       onChange?.(query, state);
     },
-    [validateQuery, onChange]
+    [validateQuery, validationSelection, onChange]
   );
   const functionTags = useFunctionTags(itemType, supportedAggregates);
   const filterKeySections = useFilterKeySections(itemType, stringAttributes);

static/app/views/explore/hooks/useAttributeValidation.spec.tsx

@@ -2,18 +2,19 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {act, renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {parseSearch} from 'sentry/components/searchSyntax/parser';
 import {
   extractFilterKeys,
   useAttributeValidation,
+  type AttributeValidationSelection,
 } from 'sentry/views/explore/hooks/useAttributeValidation';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 
-jest.mock('sentry/components/pageFilters/usePageFilters');
-
 const ORG_SLUG = 'org-slug';
-const DEFAULT_DATETIME = {period: '14d', start: null, end: null, utc: false};
+const DEFAULT_SELECTION: AttributeValidationSelection = {
+  datetime: {period: '14d', start: null, end: null, utc: false},
+  projects: [],
+};
 
 describe('extractFilterKeys', () => {
   it('returns empty array for null parsedQuery', () => {
@@ -51,19 +52,6 @@ describe('extractFilterKeys', () => {
 describe('useAttributeValidation', () => {
   const organization = OrganizationFixture({slug: ORG_SLUG});
 
-  beforeEach(() => {
-    jest.mocked(usePageFilters).mockReturnValue({
-      isReady: true,
-      pinnedFilters: new Set(),
-      shouldPersist: true,
-      selection: {
-        datetime: DEFAULT_DATETIME,
-        environments: [],
-        projects: [],
-      },
-    });
-  });
-
   it('returns empty invalidFilterKeys initially', () => {
     const {result} = renderHookWithProviders(
       () => useAttributeValidation(TraceItemDataset.SPANS),
@@ -86,7 +74,7 @@ describe('useAttributeValidation', () => {
     );
 
     await act(async () => {
-      await result.current.validateQuery('');
+      await result.current.validateQuery('', DEFAULT_SELECTION);
     });
 
     expect(mockValidate).not.toHaveBeenCalled();
@@ -111,7 +99,10 @@ describe('useAttributeValidation', () => {
     );
 
     await act(async () => {
-      await result.current.validateQuery('span.op:db unknown_key:value');
+      await result.current.validateQuery(
+        'span.op:db unknown_key:value',
+        DEFAULT_SELECTION
+      );
     });
 
     await waitFor(() => {
@@ -132,11 +123,60 @@ describe('useAttributeValidation', () => {
     );
 
     await act(async () => {
-      await result.current.validateQuery('span.op:db');
+      await result.current.validateQuery('span.op:db', DEFAULT_SELECTION);
     });
 
     await waitFor(() => {
       expect(result.current.invalidFilterKeys).toEqual([]);
     });
   });
+
+  it('skips validation when keys and selection are unchanged', async () => {
+    const mockValidate = MockApiClient.addMockResponse({
+      url: `/organizations/${ORG_SLUG}/trace-items/attributes/validate/`,
+      method: 'POST',
+      body: {attributes: {'span.op': {valid: true}}},
+    });
+
+    const {result} = renderHookWithProviders(
+      () => useAttributeValidation(TraceItemDataset.SPANS),
+      {organization}
+    );
+
+    await act(async () => {
+      await result.current.validateQuery('span.op:db', DEFAULT_SELECTION);
+    });
+
+    await act(async () => {
+      await result.current.validateQuery('span.op:web', DEFAULT_SELECTION);
+    });
+
+    expect(mockValidate).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-validates when selection changes', async () => {
+    const mockValidate = MockApiClient.addMockResponse({
+      url: `/organizations/${ORG_SLUG}/trace-items/attributes/validate/`,
+      method: 'POST',
+      body: {attributes: {'span.op': {valid: true}}},
+    });
+
+    const {result} = renderHookWithProviders(
+      () => useAttributeValidation(TraceItemDataset.SPANS),
+      {organization}
+    );
+
+    await act(async () => {
+      await result.current.validateQuery('span.op:db', DEFAULT_SELECTION);
+    });
+
+    await act(async () => {
+      await result.current.validateQuery('span.op:db', {
+        datetime: {period: '7d', start: null, end: null, utc: false},
+        projects: [],
+      });
+    });
+
+    expect(mockValidate).toHaveBeenCalledTimes(2);
+  });
 });

static/app/views/explore/hooks/useAttributeValidation.tsx

@@ -1,7 +1,6 @@
 import {useCallback, useState} from 'react';
 
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
-import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import type {ParseResult} from 'sentry/components/searchSyntax/parser';
 import {Token} from 'sentry/components/searchSyntax/parser';
 import {parseSearch} from 'sentry/components/searchSyntax/parser';
@@ -23,12 +22,15 @@ interface ValidateAttributesResponse {
   attributes: Record<string, AttributeValidationResult>;
 }
 
-interface ValidateAttributesParams {
+export interface AttributeValidationSelection {
   datetime: PageFilters['datetime'];
+  projects?: PageFilters['projects'];
+}
+
+interface ValidateAttributesParams extends AttributeValidationSelection {
   filterKeys: string[];
   itemType: TraceItemDataset;
   organizationSlug: string;
-  projects?: PageFilters['projects'];
 }
 
 const EMPTY_KEYS: string[] = [];
@@ -72,22 +74,24 @@ function validateAttributesQueryOptions({
       },
     ] satisfies ApiQueryKey,
     queryFn: fetchDataQuery<ValidateAttributesResponse>,
+    staleTime: Infinity,
     enabled: filterKeys.length > 0,
   });
 }
 
-export function useAttributeValidation(
-  itemType: TraceItemDataset,
-  projects?: number[]
-): {invalidFilterKeys: string[]; validateQuery: (query: string) => Promise<void>} {
+export function useAttributeValidation(itemType: TraceItemDataset): {
+  invalidFilterKeys: string[];
+  validateQuery: (
+    query: string,
+    selection: AttributeValidationSelection
+  ) => Promise<void>;
+} {
   const [invalidFilterKeys, setInvalidFilterKeys] = useState<string[]>([]);
   const queryClient = useQueryClient();
   const organization = useOrganization();
-  const {selection} = usePageFilters();
-  const effectiveProjects = projects ?? selection.projects;
 
   const validateQuery = useCallback(
-    async (query: string) => {
+    async (query: string, selection: AttributeValidationSelection) => {
       const keys = extractFilterKeys(parseSearch(query));
       if (!keys.length) {
         setInvalidFilterKeys([]);
@@ -98,8 +102,7 @@ export function useAttributeValidation(
           itemType,
           filterKeys: keys,
           organizationSlug: organization.slug,
-          datetime: selection.datetime,
-          projects: effectiveProjects,
+          ...selection,
         });
         await queryClient.cancelQueries({queryKey: [options.queryKey[0]]});
         const [data] = await queryClient.fetchQuery(options);
@@ -112,7 +115,7 @@ export function useAttributeValidation(
         // leave previous state on error
       }
     },
-    [queryClient, organization.slug, itemType, selection.datetime, effectiveProjects]
+    [queryClient, organization.slug, itemType]
   );
 
   return {invalidFilterKeys, validateQuery};