Merge branch 'master' of https://github.com/tannerlinsley/react-query-devtools

Author: tannerlinsley

src/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import match from 'match-sorter'
 import { queryCache as cache, useQueryCache } from 'react-query'
 import useLocalStorage from './useLocalStorage'
-import { useSafeState } from './utils'
+import { useSafeState, isStale } from './utils'
 
 import {
   Panel,
@@ -196,7 +196,7 @@ export function ReactQueryDevtools({
 }
 
 const getStatusRank = q =>
-  q.state.isFetching ? 0 : !q.observers.length ? 3 : q.state.isStale ? 2 : 1
+  q.state.isFetching ? 0 : !q.observers.length ? 3 : isStale(q) ? 2 : 1
 
 const sortFns = {
   'Status > Last Updated': (a, b) =>

src/utils.js

@@ -5,10 +5,16 @@ import useMediaQuery from './useMediaQuery'
 
 export const isServer = typeof window === 'undefined'
 
+export function isStale(query) {
+  return typeof query.isStale === 'function'
+    ? query.isStale()
+    : query.state.isStale
+}
+
 export function getQueryStatusColor(query, theme) {
   return query.state.isFetching
     ? theme.active
-    : query.state.isStale
+    : isStale(query)
     ? theme.warning
     : theme.success
 }
@@ -22,7 +28,7 @@ export function getQueryStatusLabel(query) {
     ? 'fetching'
     : !query.observers.length
     ? 'inactive'
-    : query.state.isStale
+    : isStale(query)
     ? 'stale'
     : 'fresh'
 }