fix(query-devtools): isolate state per devtools instance

.changeset/heavy-carpets-divide.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/query-devtools": patch
+---
+
+Fix devtools UI state (selected query/mutation, panel width, offline mock toggle, and query/mutation cache subscriptions) leaking between independently mounted devtools instances. Selecting a query, resizing a panel, or mocking offline behavior in one devtools instance no longer affects another instance mounted on a different `QueryClient`.

packages/query-devtools/src/Devtools.tsx

@@ -51,7 +51,13 @@ import {
   XCircle,
 } from './icons'
 import Explorer from './Explorer'
-import { usePiPWindow, useQueryDevtoolsContext, useTheme } from './contexts'
+import {
+  DevtoolsInstanceProvider,
+  useDevtoolsInstanceContext,
+  usePiPWindow,
+  useQueryDevtoolsContext,
+  useTheme,
+} from './contexts'
 import {
   BUTTON_POSITION,
   DEFAULT_HEIGHT,
@@ -78,7 +84,7 @@ import type {
   QueryCacheNotifyEvent,
 } from '@tanstack/query-core'
 import type { StorageObject, StorageSetter } from '@solid-primitives/storage'
-import type { Accessor, Component, JSX, Setter } from 'solid-js'
+import type { Accessor, Component, JSX } from 'solid-js'
 
 interface DevtoolsPanelProps {
   localStore: StorageObject<string>
@@ -98,20 +104,20 @@ interface QueryStatusProps {
   count: number
 }
 
-const [selectedQueryHash, setSelectedQueryHash] = createSignal<string | null>(
-  null,
-)
-const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
-  null,
-)
-const [panelWidth, setPanelWidth] = createSignal(0)
-const [offline, setOffline] = createSignal(false)
-
 export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
   shadowDOMTarget?: ShadowRoot
 }
 
 export const Devtools: Component<DevtoolsPanelProps> = (props) => {
+  return (
+    <DevtoolsInstanceProvider>
+      <DevtoolsImpl {...props} />
+    </DevtoolsInstanceProvider>
+  )
+}
+
+const DevtoolsImpl: Component<DevtoolsPanelProps> = (props) => {
+  const { setOffline } = useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -281,6 +287,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
 const PiPPanel: Component<{
   children: JSX.Element
 }> = (props) => {
+  const { panelWidth, setPanelWidth } = useDevtoolsInstanceContext()
   const pip = usePiPWindow()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
@@ -351,6 +358,7 @@ const PiPPanel: Component<{
 export const ParentPanel: Component<{
   children: JSX.Element
 }> = (props) => {
+  const { panelWidth, setPanelWidth } = useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -408,6 +416,8 @@ export const ParentPanel: Component<{
 }
 
 const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
+  const { panelWidth, setPanelWidth, setSelectedQueryHash } =
+    useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -672,6 +682,14 @@ const DraggablePanel: Component<DevtoolsPanelProps> = (props) => {
 }
 
 export const ContentView: Component<ContentViewProps> = (props) => {
+  const {
+    panelWidth,
+    offline,
+    selectedQueryHash,
+    selectedMutationId,
+    setSelectedQueryHash,
+    setSelectedMutationId,
+  } = useDevtoolsInstanceContext()
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
   let containerRef!: HTMLDivElement
@@ -1372,6 +1390,8 @@ export const ContentView: Component<ContentViewProps> = (props) => {
 }
 
 const QueryRow: Component<{ query: Query }> = (props) => {
+  const { selectedQueryHash, setSelectedQueryHash } =
+    useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1481,6 +1501,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
 }
 
 const MutationRow: Component<{ mutation: Mutation }> = (props) => {
+  const { selectedMutationId, setSelectedMutationId } =
+    useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1722,6 +1744,7 @@ const MutationStatusCount: Component = () => {
 }
 
 const QueryStatus: Component<QueryStatusProps> = (props) => {
+  const { panelWidth, selectedQueryHash } = useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -1837,6 +1860,8 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
 }
 
 const QueryDetails = () => {
+  const { selectedQueryHash, setSelectedQueryHash } =
+    useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -2382,6 +2407,7 @@ const QueryDetails = () => {
 }
 
 const MutationDetails = () => {
+  const { selectedMutationId } = useDevtoolsInstanceContext()
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -2569,15 +2595,8 @@ const MutationDetails = () => {
   )
 }
 
-const queryCacheMap = new Map<
-  (q: Accessor<QueryCache>) => any,
-  {
-    setter: Setter<any>
-    shouldUpdate: (event: QueryCacheNotifyEvent) => boolean
-  }
->()
-
 const setupQueryCacheSubscription = () => {
+  const { queryCacheMap } = useDevtoolsInstanceContext()
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getQueryCache()
@@ -2605,6 +2624,7 @@ const createSubscribeToQueryCacheBatcher = <T,>(
   equalityCheck: boolean = true,
   shouldUpdate: (event: QueryCacheNotifyEvent) => boolean = () => true,
 ) => {
+  const { queryCacheMap } = useDevtoolsInstanceContext()
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getQueryCache()
@@ -2631,12 +2651,8 @@ const createSubscribeToQueryCacheBatcher = <T,>(
   return value
 }
 
-const mutationCacheMap = new Map<
-  (q: Accessor<MutationCache>) => any,
-  Setter<any>
->()
-
 const setupMutationCacheSubscription = () => {
+  const { mutationCacheMap } = useDevtoolsInstanceContext()
   const mutationCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getMutationCache()
@@ -2662,6 +2678,7 @@ const createSubscribeToMutationCacheBatcher = <T,>(
   callback: (queryCache: Accessor<MutationCache>) => Exclude<T, Function>,
   equalityCheck: boolean = true,
 ) => {
+  const { mutationCacheMap } = useDevtoolsInstanceContext()
   const mutationCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
     return client.getMutationCache()

packages/query-devtools/src/DevtoolsPanelComponent.tsx

@@ -3,7 +3,12 @@ import { createMemo } from 'solid-js'
 import { ContentView, ParentPanel } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
-import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import {
+  DevtoolsInstanceProvider,
+  PiPProvider,
+  QueryDevtoolsContext,
+  ThemeContext,
+} from './contexts'
 import type { Theme } from './contexts'
 import type { DevtoolsComponentType } from './Devtools'
 
@@ -30,14 +35,16 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
         setLocalStore={setLocalStore}
       >
         <ThemeContext.Provider value={theme}>
-          <ParentPanel>
-            <ContentView
-              localStore={localStore}
-              setLocalStore={setLocalStore}
-              onClose={props.onClose}
-              showPanelViewOnly
-            />
-          </ParentPanel>
+          <DevtoolsInstanceProvider>
+            <ParentPanel>
+              <ContentView
+                localStore={localStore}
+                setLocalStore={setLocalStore}
+                onClose={props.onClose}
+                showPanelViewOnly
+              />
+            </ParentPanel>
+          </DevtoolsInstanceProvider>
         </ThemeContext.Provider>
       </PiPProvider>
     </QueryDevtoolsContext.Provider>