feat(query): add 'getObserversCount' util (#2130)

* feat(query): add 'getObserversCount' util

* refactor: replace usage of private observers with getter

src/core/query.ts

@@ -342,6 +342,10 @@ export class Query<
     }
   }
 
+  getObserversCount(): number {
+    return this.observers.length
+  }
+
   invalidate(): void {
     if (!this.state.isInvalidated) {
       this.dispatch({ type: 'invalidate' })

src/core/tests/query.test.tsx

@@ -447,4 +447,29 @@ describe('query', () => {
     await sleep(100)
     expect(queryCache.find(key)).toBeDefined()
   })
+
+  test('should return proper count of observers', async () => {
+    const key = queryKey()
+    const options = { queryKey: key, queryFn: async () => 'data' }
+    const observer = new QueryObserver(queryClient, options)
+    const observer2 = new QueryObserver(queryClient, options)
+    const observer3 = new QueryObserver(queryClient, options)
+    const query = queryCache.find(key)
+
+    expect(query?.getObserversCount()).toEqual(0)
+
+    const unsubscribe1 = observer.subscribe()
+    const unsubscribe2 = observer2.subscribe()
+    const unsubscribe3 = observer3.subscribe()
+    expect(query?.getObserversCount()).toEqual(3)
+
+    unsubscribe3()
+    expect(query?.getObserversCount()).toEqual(2)
+
+    unsubscribe2()
+    expect(query?.getObserversCount()).toEqual(1)
+
+    unsubscribe1()
+    expect(query?.getObserversCount()).toEqual(0)
+  })
 })

src/devtools/devtools.tsx

@@ -306,7 +306,7 @@ export function ReactQueryDevtools({
 }
 
 const getStatusRank = q =>
-  q.state.isFetching ? 0 : !q.observers.length ? 3 : q.isStale() ? 2 : 1
+  q.state.isFetching ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1
 
 const sortFns = {
   'Status > Last Updated': (a, b) =>
@@ -613,7 +613,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                           : 'white',
                     }}
                   >
-                    {query.observers.length}
+                    {query.getObserversCount()}
                   </div>
                   <Code
                     suppressHydrationWarning
@@ -689,7 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                     justifyContent: 'space-between',
                   }}
                 >
-                  Observers: <Code>{activeQuery.observers.length}</Code>
+                  Observers: <Code>{activeQuery.getObserversCount()}</Code>
                 </div>
                 <div
                   style={{

src/devtools/utils.ts

@@ -12,15 +12,15 @@ export function getQueryStatusColor(query, theme) {
     ? theme.active
     : query.isStale()
     ? theme.warning
-    : !query.observers.length
+    : !query.getObserversCount()
     ? theme.gray
     : theme.success
 }
 
 export function getQueryStatusLabel(query) {
   return query.state.isFetching
     ? 'fetching'
-    : !query.observers.length
+    : !query.getObserversCount()
     ? 'inactive'
     : query.isStale()
     ? 'stale'

src/react/tests/suspense.test.tsx

@@ -162,14 +162,12 @@ describe("useQuery's in Suspense mode", () => {
     fireEvent.click(rendered.getByLabelText('toggle'))
     await waitFor(() => rendered.getByText('rendered'))
 
-    // @ts-expect-error
-    expect(queryCache.find(key)?.observers.length).toBe(1)
+    expect(queryCache.find(key)?.getObserversCount()).toBe(1)
 
     fireEvent.click(rendered.getByLabelText('toggle'))
 
     expect(rendered.queryByText('rendered')).toBeNull()
-    // @ts-expect-error
-    expect(queryCache.find(key)?.observers.length).toBe(0)
+    expect(queryCache.find(key)?.getObserversCount()).toBe(0)
   })
 
   it('should call onSuccess on the first successful call', async () => {