Merge branch 'main' into alpha

Author: TkDodo

docs/react/guides/infinite-queries.md

@@ -142,7 +142,7 @@ useInfiniteQuery({
 
 ## What if I want to manually update the infinite query?
 
-Manually removing first page:
+### Manually removing first page:
 
 [//]: # 'Example5'
 
@@ -155,7 +155,7 @@ queryClient.setQueryData(['projects'], (data) => ({
 
 [//]: # 'Example5'
 
-Manually removing a single value from an individual page:
+### Manually removing a single value from an individual page:
 
 [//]: # 'Example6'
 
@@ -173,10 +173,24 @@ queryClient.setQueryData(['projects'], (data) => ({
 
 [//]: # 'Example6'
 
-Make sure to keep the same data structure of pages and pageParams!
+### Keep only the first page:
 
 [//]: # 'Example7'
 
+```tsx
+queryClient.setQueryData(['projects'], (data) => ({
+  pages: data.pages.slice(0,1),
+  pageParams: data.pageParams.slice(0,1),
+}))
+```
+
+[//]: # 'Example7'
+
+Make sure to always keep the same data structure of pages and pageParams!
+
+
+[//]: # 'Example8'
+
 ## What if I want to limit the number of pages?
 
 In some use cases you may want to limit the number of pages stored in the query data to improve the performance and UX:
@@ -188,7 +202,7 @@ The solution is to use a "Limited Infinite Query". This is made possible by usin
 
 In the following example only 3 pages are kept in the query data pages array. If a refetch is needed, only 3 pages will be refetched sequentially.
 
-[//]: # 'Example7'
+[//]: # 'Example8'
 
 ```tsx
 useInfiniteQuery({
@@ -205,7 +219,7 @@ useInfiniteQuery({
 
 If your API doesn't return a cursor, you can use the `pageParam` as a cursor. Because  `getNextPageParam` and `getPreviousPageParam` also get the `pageParam`of the current page, you can use it to calculate the next / previous page param.
 
-[//]: # 'Example8'
+[//]: # 'Example9'
 
 ```tsx
 return useInfiniteQuery({
@@ -227,4 +241,4 @@ return useInfiniteQuery({
 })
 ```
 
-[//]: # 'Example8'
+[//]: # 'Example9'

docs/react/reference/useMutation.md

@@ -53,7 +53,7 @@ mutate(variables, {
   - If set to `Infinity`, will disable garbage collection
 - `mutationKey: unknown[]`
   - Optional
-  - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults` or to identify the mutation in the devtools.
+  - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults`.
 - `networkMode: 'online' | 'always' | 'offlineFirst`
   - optional
   - defaults to `'online'`

docs/vue/devtools.md

@@ -7,7 +7,7 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat
 
 When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
 
-The only thing you need to do is to install official **[Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**
+The only thing you need to do is to install the official **[Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**.
 
-Vue Query will seemingly integrate with official devtools, adding custom inspector and timeline events.
-Devtools would be treeshaken from production bundles by default.
+Vue Query will seamlessly integrate with the official devtools, adding custom inspector and timeline events.
+Devtool code will be treeshaken from production bundles by default.

docs/vue/guides/infinite-queries.md

@@ -54,18 +54,3 @@ const {
 ```
 
 [//]: # 'Example'
-[//]: # 'Example6'
-
-```tsx
-const newPagesArray =
-  oldPagesArray?.pages.map((page) =>
-    page.filter((val) => val.id !== updatedId),
-  ) ?? []
-
-queryClient.setQueryData(['projects'], (data) => ({
-  pages: newPagesArray,
-  pageParams: data.pageParams,
-}))
-```
-
-[//]: # 'Example6'

packages/query-core/src/focusManager.ts

@@ -56,9 +56,9 @@ export class FocusManager extends Subscribable {
   }
 
   setFocused(focused?: boolean): void {
-    this.#focused = focused
-
-    if (focused) {
+    const changed = this.#focused !== focused
+    if (changed) {
+      this.#focused = focused
       this.onFocus()
     }
   }

packages/query-core/src/onlineManager.ts

@@ -63,9 +63,10 @@ export class OnlineManager extends Subscribable {
   }
 
   setOnline(online?: boolean): void {
-    this.#online = online
+    const changed = this.#online !== online
 
-    if (online) {
+    if (changed) {
+      this.#online = online
       this.onOnline()
     }
   }

packages/query-core/src/tests/focusManager.test.tsx

@@ -39,20 +39,6 @@ describe('focusManager', () => {
     expect(focusManager.isFocused()).toBeTruthy()
   })
 
-  it('should not notify listeners on focus if already focused', async () => {
-    const subscriptionSpy = vi.fn()
-    const unsubscribe = focusManager.subscribe(subscriptionSpy)
-
-    focusManager.setFocused(true)
-    expect(subscriptionSpy).toHaveBeenCalledTimes(1)
-    subscriptionSpy.mockReset()
-
-    focusManager.setFocused(false)
-    expect(subscriptionSpy).toHaveBeenCalledTimes(0)
-
-    unsubscribe()
-  })
-
   it('should return true for isFocused if document is undefined', async () => {
     const { document } = globalThis
 
@@ -150,4 +136,25 @@ describe('focusManager', () => {
 
     unsubscribe2()
   })
+
+  test('should call listeners when setFocused is called', () => {
+    const listener = vi.fn()
+
+    focusManager.subscribe(listener)
+
+    focusManager.setFocused(true)
+    focusManager.setFocused(true)
+
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    focusManager.setFocused(false)
+    focusManager.setFocused(false)
+
+    expect(listener).toHaveBeenCalledTimes(2)
+
+    focusManager.setFocused(undefined)
+    focusManager.setFocused(undefined)
+
+    expect(listener).toHaveBeenCalledTimes(3)
+  })
 })

packages/query-core/src/tests/onlineManager.test.tsx

@@ -148,4 +148,25 @@ describe('onlineManager', () => {
 
     unsubscribe2()
   })
+
+  test('should call listeners when setOnline is called', () => {
+    const listener = vi.fn()
+
+    onlineManager.subscribe(listener)
+
+    onlineManager.setOnline(true)
+    onlineManager.setOnline(true)
+
+    expect(listener).toHaveBeenCalledTimes(1)
+
+    onlineManager.setOnline(false)
+    onlineManager.setOnline(false)
+
+    expect(listener).toHaveBeenCalledTimes(2)
+
+    onlineManager.setOnline(undefined)
+    onlineManager.setOnline(undefined)
+
+    expect(listener).toHaveBeenCalledTimes(3)
+  })
 })

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

@@ -3638,6 +3638,7 @@ describe('useQuery', () => {
           })
           act(() => setPrefetched(true))
         }
+
         prefetch()
       }, [])
 
@@ -5904,6 +5905,7 @@ describe('useQuery', () => {
         </div>
       )
     }
+
     const rendered = renderWithClient(queryClient, <Page />)
     const fetchBtn = rendered.getByRole('button', { name: 'refetch' })
     await waitFor(() => rendered.getByText('data: 1'))
@@ -5964,6 +5966,7 @@ describe('useQuery', () => {
         </div>
       )
     }
+
     const rendered = renderWithClient(queryClient, <Page />)
     await waitFor(() => rendered.getByText('status: success'))
     await waitFor(() => rendered.getByText('data: 1'))

packages/vue-query/src/devtools/devtools.ts

@@ -2,7 +2,7 @@ import { setupDevtoolsPlugin } from '@vue/devtools-api'
 import type { CustomInspectorNode } from '@vue/devtools-api'
 import { rankItem } from '@tanstack/match-sorter-utils'
 import { onlineManager } from '@tanstack/query-core'
-import type { Query } from '@tanstack/query-core'
+import type { Query, QueryCacheNotifyEvent } from '@tanstack/query-core'
 import type { QueryClient } from '../queryClient'
 import {
   getQueryStateLabel,
@@ -146,7 +146,13 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
         api.sendInspectorTree(pluginId)
         api.sendInspectorState(pluginId)
 
-        if (['added', 'removed', 'updated'].includes(event.type)) {
+        const queryEvents: QueryCacheNotifyEvent['type'][] = [
+          'added',
+          'removed',
+          'updated',
+        ]
+
+        if (queryEvents.includes(event.type)) {
           api.addTimelineEvent({
             layerId: pluginId,
             event: {