Merge branch 'master' into feature/2181-useQueries-keepPreviousData

Author: TkDodo

docs/src/pages/guides/infinite-queries.md

@@ -158,11 +158,10 @@ queryClient.setQueryData('projects', data => ({
 Manually removing a single value from an individual page:
 
 ```js
-const newPagesArray = []
-oldPagesArray?.pages.forEach(page => {
-  const newData = page.filter(val => val.id !== updatedId)
-  newPagesArray.push(newData)
-})
+const newPagesArray = oldPagesArray?.pages.map((page) =>
+  page.filter((val) => val.id !== updatedId)
+) ?? []
+
 queryClient.setQueryData('projects', data => ({
   pages: newPagesArray,
   pageParams: data.pageParams,

src/core/tests/queryClient.test.tsx

@@ -344,7 +344,7 @@ describe('queryClient', () => {
       const data = {
         pages: ['data'],
         pageParams: [undefined],
-      }
+      } as const
 
       const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () =>
         Promise.resolve(data.pages[0])

src/core/tests/utils.test.tsx

@@ -295,10 +295,10 @@ describe('core/utils', () => {
       expect(result.todos).not.toBe(next.todos)
       expect(result.todos[0]).not.toBe(prev.todos[0])
       expect(result.todos[0]).not.toBe(next.todos[0])
-      expect(result.todos[0].id).toBe(next.todos[0].id)
-      expect(result.todos[0].meta).toBe(prev.todos[0].meta)
-      expect(result.todos[0].state).not.toBe(next.todos[0].state)
-      expect(result.todos[0].state.done).toBe(next.todos[0].state.done)
+      expect(result.todos[0]?.id).toBe(next.todos[0]?.id)
+      expect(result.todos[0]?.meta).toBe(prev.todos[0]?.meta)
+      expect(result.todos[0]?.state).not.toBe(next.todos[0]?.state)
+      expect(result.todos[0]?.state.done).toBe(next.todos[0]?.state.done)
       expect(result.todos[1]).toBe(prev.todos[1])
     })
   })

src/devtools/devtools.tsx

@@ -21,6 +21,7 @@ import { ThemeProvider, defaultTheme as theme } from './theme'
 import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
 import Logo from './Logo'
+import { noop } from '../core/utils'
 
 interface DevtoolsOptions {
   /**
@@ -384,6 +385,11 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
       return undefined
     }, [isOpen, sort, sortFn, sortDesc, setUnsortedQueries, queryCache])
 
+    const handleRefetch = () => {
+      const promise = activeQuery.fetch()
+      promise.catch(noop)
+    }
+
     return (
       <ThemeProvider theme={theme}>
         <Panel
@@ -710,7 +716,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
               >
                 <Button
                   type="button"
-                  onClick={() => activeQuery.fetch()}
+                  onClick={handleRefetch}
                   disabled={activeQuery.state.isFetching}
                   style={{
                     background: theme.active,

src/react/tests/useQuery.test.tsx

@@ -818,7 +818,7 @@ describe('useQuery', () => {
     expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
     expect(states[1]).toMatchObject({ data: 'test', isFetching: false })
     expect(states[2]).toMatchObject({ data: 'test', isFetching: false })
-    expect(states[1].dataUpdatedAt).not.toBe(states[2].dataUpdatedAt)
+    expect(states[1]?.dataUpdatedAt).not.toBe(states[2]?.dataUpdatedAt)
   })
 
   it('should track properties and only re-render when a tracked property changes', async () => {
@@ -1039,13 +1039,13 @@ describe('useQuery', () => {
 
     await waitFor(() => expect(states.length).toBe(4))
 
-    const todos = states[2].data!
-    const todo1 = todos[0]
-    const todo2 = todos[1]
+    const todos = states[2]?.data
+    const todo1 = todos?.[0]
+    const todo2 = todos?.[1]
 
-    const newTodos = states[3].data!
-    const newTodo1 = newTodos[0]
-    const newTodo2 = newTodos[1]
+    const newTodos = states[3]?.data
+    const newTodo1 = newTodos?.[0]
+    const newTodo2 = newTodos?.[1]
 
     expect(todos).toEqual(result1)
     expect(newTodos).toEqual(result2)
@@ -1465,7 +1465,7 @@ describe('useQuery', () => {
       status: 'error',
       isPreviousData: false,
     })
-    expect(states[7].error).toHaveProperty('message', 'Error test')
+    expect(states[7]?.error).toHaveProperty('message', 'Error test')
 
     consoleMock.mockRestore()
   })
@@ -2304,7 +2304,7 @@ describe('useQuery', () => {
 
     await sleep(20)
 
-    expect(states[1].data).toEqual([key, variables])
+    expect(states[1]?.data).toEqual([key, variables])
   })
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {

tsconfig.json

@@ -11,6 +11,7 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
     "skipLibCheck": true,
     "strict": true,
     "types": ["jest"],