@tanstack/react-query-devtools 4.10.0 → 4.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.10.0",
+  "version": "4.10.2",
   "description": "TODO",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -40,17 +40,17 @@
   "devDependencies": {
     "@types/use-sync-external-store": "^0.0.3",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.10.0",
-    "superjson": "^1.10.0"
+    "@tanstack/react-query": "4.10.1"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.1.1",
+    "superjson": "^1.10.0",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.10.0"
+    "@tanstack/react-query": "4.10.1"
   },
   "scripts": {
     "clean": "rm -rf ./build",

package/src/__tests__/devtools.test.tsx

@@ -555,7 +555,7 @@ describe('ReactQueryDevtools', () => {
   })
 
   it('should initialize filtering and sorting values with defaults when they are not stored in localstorage', () => {
-    localStorage.removeItem('reactQueryDevtoolsSortDesc')
+    localStorage.removeItem('reactQueryDevtoolsBaseSort')
     localStorage.removeItem('reactQueryDevtoolsSortFn')
     localStorage.removeItem('reactQueryDevtoolsFilter')
 
@@ -593,7 +593,7 @@ describe('ReactQueryDevtools', () => {
   })
 
   it('should initialize sorting values with ones stored in localstorage', async () => {
-    localStorage.setItem('reactQueryDevtoolsSortDesc', 'true')
+    localStorage.setItem('reactQueryDevtoolsBaseSort', 'true')
     localStorage.setItem(
       'reactQueryDevtoolsSortFn',
       JSON.stringify(Object.keys(sortFns)[1]),

package/src/devtools.tsx

@@ -11,7 +11,7 @@ import {
   onlineManager,
   notifyManager,
 } from '@tanstack/react-query'
-import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
 import { sortFns, useIsMounted } from './utils'
 import ScreenReader from './screenreader'
@@ -418,9 +418,9 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '')
 
-  const [sortDesc, setSortDesc] = useLocalStorage(
-    'reactQueryDevtoolsSortDesc',
-    false,
+  const [baseSort, setBaseSort] = useLocalStorage(
+    'reactQueryDevtoolsBaseSort',
+    1,
   )
 
   const sortFn = React.useMemo(() => sortFns[sort as string], [sort])
@@ -438,26 +438,23 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const queries = React.useMemo(() => {
     const unsortedQueries = queryCache.getAll()
-    const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : []
 
-    if (sortDesc) {
-      sorted.reverse()
+    if (queriesCount === 0) {
+      return []
     }
 
-    if (!filter) {
-      return sorted
-    }
-
-    let ranked = sorted.map(
-      (item) => [item, rankItem(item.queryHash, filter)] as const,
-    )
-
-    ranked = ranked.filter((d) => d[1].passed)
+    const filtered = filter
+      ? unsortedQueries.filter(
+          (item) => rankItem(item.queryHash, filter).passed,
+        )
+      : [...unsortedQueries]
 
-    ranked = ranked.sort((a, b) => compareItems(a[1], b[1]))
+    const sorted = sortFn
+      ? filtered.sort((a, b) => sortFn(a, b) * (baseSort as number))
+      : filtered
 
-    return ranked.map((d) => d[0])
-  }, [sortDesc, sortFn, filter, queriesCount, queryCache])
+    return sorted
+  }, [baseSort, sortFn, filter, queriesCount, queryCache])
 
   const [isMockOffline, setMockOffline] = React.useState(false)
 
@@ -596,13 +593,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       </Select>
                       <Button
                         type="button"
-                        onClick={() => setSortDesc((old) => !old)}
+                        onClick={() => setBaseSort((old) => old * -1)}
                         style={{
                           padding: '.3em .4em',
                           marginRight: '.5em',
                         }}
                       >
-                        {sortDesc ? '⬇ Desc' : '⬆ Asc'}
+                        {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
                       </Button>
                       <Button
                         type="button"

package/src/utils.ts

@@ -124,6 +124,9 @@ export const displayValue = (value: unknown) => {
   return JSON.stringify(json)
 }
 
+// Sorting functions
+type SortFn = (a: Query, b: Query) => number
+
 const getStatusRank = (q: Query) =>
   q.state.fetchStatus !== 'idle'
     ? 0
@@ -133,14 +136,21 @@ const getStatusRank = (q: Query) =>
     ? 2
     : 1
 
-export const sortFns: Record<string, (a: Query, b: Query) => number> = {
-  'Status > Last Updated': (a, b) =>
-    getStatusRank(a) === getStatusRank(b)
-      ? (sortFns['Last Updated']?.(a, b) as number)
-      : getStatusRank(a) > getStatusRank(b)
-      ? 1
-      : -1,
-  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),
-  'Last Updated': (a, b) =>
-    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,
+const queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)
+
+const dateSort: SortFn = (a, b) =>
+  a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+
+const statusAndDateSort: SortFn = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b)
+  }
+
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1
+}
+
+export const sortFns: Record<string, SortFn> = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort,
 }