Search within tanstack query devtools "Data Explorer" section

[shahid-shafi]

It would be great to have a search feature in the React Query Devtools Explorer.

When inspecting large, deeply nested API responses, finding a specific property requires manually expanding many nodes.

A search input that recursively searches nested objects/arrays, highlights matches, and automatically expands matching branches would make debugging much faster and improve the overall developer experience.

[amasen02]

This is a great DX proposal. When inspecting complex payloads (e.g. paginated lists with 100+ nested entities or graph responses), traversing the Devtools Explorer manually is tedious.

Here is an architectural breakdown of how Explorer.tsx works in @tanstack/query-devtools, how this feature can be implemented, performance considerations, and workflows you can use right now:

---

1. Implementation Blueprint in @tanstack/query-devtools

The Data Explorer is implemented in packages/query-devtools/src/Explorer.tsx.

To implement deep search with automatic branch expansion:

A. Recursive Path Matcher

A helper that checks if a node's key or any descendant value contains the search query:

function nodeMatchesQuery(key: string, value: unknown, query: string): boolean {
  if (!query) return true
  const lowerQuery = query.toLowerCase()

  // Match current key
  if (key.toLowerCase().includes(lowerQuery)) return true

  // Match primitive value
  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
    return String(value).toLowerCase().includes(lowerQuery)
  }

  // Recursively check children
  if (value && typeof value === 'object') {
    return Object.entries(value).some(([k, v]) => nodeMatchesQuery(k, v, query))
  }

  return false
}

B. Controlled Expansion State

In Explorer, nodes maintain local expanded state. When a search string is present:

1. Determine if any child of the current branch matches lowerQuery.
2. If query.trim().length > 0, override the default collapsed state to expand matching branches:

const isMatchingChild = useMemo(
  () => search ? Object.entries(value).some(([k, v]) => nodeMatchesQuery(k, v, search)) : false,
  [value, search]
)

const shouldExpand = search ? isMatchingChild : isExpanded

C. Performance Safeguard (Debouncing)

Because Query state objects can be several megabytes in size, running full-tree recursion on every input event will freeze the UI thread.

• Debounce the input (e.g. 150–200ms).
• For arrays with $> 1000$ items, consider indexing keys on demand or limiting search depth.

---

2. Immediate Workarounds Today

While this is being built:

1. Native Chrome/Firefox Console Inspection:
   In the Devtools panel, clicking the "Log to console" button dumps query.state.data directly into your browser console. The browser's native Object Inspector allows you to use Ctrl+F / Cmd+F to search, highlight, and auto-expand nested object properties instantly.
2. Copy to Clipboard:
   You can click the copy icon on the top right of the Data Explorer pane and paste into VS Code (which natively supports deep JSON schema navigation and Cmd+F search).

---

3. Submitting a PR

The maintainers are very open to DevTools usability enhancements in packages/query-devtools. If you'd like to open a PR:

1. Locate packages/query-devtools/src/Explorer.tsx.
2. Add a search input above the root explorer container.
3. Pass down search term to the recursive sub-explorers to control expansion and key highlight styling (<mark> or background color).