fix(query-devtools): handle missing query row state (#10772)

Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc>

Author: Raashish Aggarwal

.changeset/query-devtools-missing-state.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+Avoid crashing devtools query rows when a cached query state is temporarily unavailable.

packages/query-devtools/src/Devtools.tsx

@@ -1418,7 +1418,7 @@ const QueryRow: Component<{ query: Query }> = (props) => {
 
   const color = createMemo(() =>
     getQueryStatusColor({
-      queryState: queryState()!,
+      queryState: queryState(),
       observerCount: observers(),
       isStale: isStale(),
     }),

packages/query-devtools/src/__tests__/utils.test.ts

@@ -1573,6 +1573,16 @@ describe('Utils tests', () => {
       ).toBe('gray')
     })
 
+    it('should return "gray" when the query state is unavailable', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: undefined,
+          observerCount: 0,
+          isStale: false,
+        }),
+      ).toBe('gray')
+    })
+
     it('should return "purple" when fetchStatus is "paused"', () => {
       expect(
         getQueryStatusColor({

packages/query-devtools/src/utils.tsx

@@ -31,15 +31,15 @@ export function getQueryStatusColor({
   observerCount,
   isStale,
 }: {
-  queryState: Query['state']
+  queryState: Query['state'] | undefined
   observerCount: number
   isStale: boolean
 }) {
-  return queryState.fetchStatus === 'fetching'
+  return queryState?.fetchStatus === 'fetching'
     ? 'blue'
     : !observerCount
       ? 'gray'
-      : queryState.fetchStatus === 'paused'
+      : queryState?.fetchStatus === 'paused'
         ? 'purple'
         : isStale
           ? 'yellow'