fix(devtools): make sure that sort function is properly read from localStorage (#3703)

* fix(devtools): make sure that sort function is properly read from localStorage

* test(devtools): wrap getByRole queries with explicit expect statements when the returned element is not used for assertions

* chore(devtools): apply prettier formatting

Author: zorzysty

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
 import { useQuery, QueryClient } from '@tanstack/react-query'
+import { sortFns } from '../devtools'
 import {
   getByTextContent,
   renderWithClient,
@@ -552,6 +553,104 @@ describe('ReactQueryDevtools', () => {
     expect(queries[2]?.textContent).toEqual(query3Hash)
   })
 
+  it('should initialize filtering and sorting values with defaults when they are not stored in localstorage', () => {
+    localStorage.removeItem('reactQueryDevtoolsSortDesc')
+    localStorage.removeItem('reactQueryDevtoolsSortFn')
+    localStorage.removeItem('reactQueryDevtoolsFilter')
+
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+    })
+
+    const filterInput: HTMLInputElement =
+      screen.getByLabelText(/Filter by queryhash/i)
+    expect(filterInput.value).toEqual('')
+
+    const sortCombobox: HTMLSelectElement =
+      screen.getByLabelText(/Sort queries/i)
+    expect(sortCombobox.value).toEqual(Object.keys(sortFns)[0])
+
+    expect(screen.getByRole('button', { name: /Asc/i })).toBeInTheDocument()
+
+    const detailsPanel = screen.queryByText(/Query Details/i)
+    expect(detailsPanel).not.toBeInTheDocument()
+  })
+
+  it('should initialize sorting values with ones stored in localstorage', async () => {
+    localStorage.setItem('reactQueryDevtoolsSortDesc', 'true')
+    localStorage.setItem(
+      'reactQueryDevtoolsSortFn',
+      JSON.stringify(Object.keys(sortFns)[1]),
+    )
+
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+    })
+
+    const sortCombobox: HTMLSelectElement =
+      screen.getByLabelText(/Sort queries/i)
+    expect(sortCombobox.value).toEqual(Object.keys(sortFns)[1])
+
+    expect(screen.getByRole('button', { name: /Desc/i })).toBeInTheDocument()
+  })
+
+  it('should initialize filter value with one stored in localstorage', () => {
+    localStorage.setItem('reactQueryDevtoolsFilter', JSON.stringify('posts'))
+
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+    })
+
+    const filterInput: HTMLInputElement =
+      screen.getByLabelText(/Filter by queryhash/i)
+    expect(filterInput.value).toEqual('posts')
+  })
+
   it('style should have a nonce', async () => {
     const { queryClient } = createQueryClient()
 

packages/react-query-devtools/src/devtools.tsx

@@ -384,7 +384,7 @@ const getStatusRank = (q: Query) =>
     ? 2
     : 1
 
-const sortFns: Record<string, (a: Query, b: Query) => number> = {
+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)
@@ -441,12 +441,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const sortFn = React.useMemo(() => sortFns[sort as string], [sort])
 
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    if (!sortFn) {
-      setSort(Object.keys(sortFns)[0] as string)
-    }
-  }, [setSort, sortFn])
-
   const queriesCount = useSubscribeToQueryCache(
     queryCache,
     () => queryCache.getAll().length,