Merge remote-tracking branch 'origin/v5' into pr/4715

# Conflicts:
#	docs/react/guides/migrating-to-v5.md

Author: TkDodo

.github/workflows/pr.yml

@@ -63,23 +63,6 @@ jobs:
       - name: Install dependencies
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - run: pnpm run test:format
-  test-react-17:
-    name: 'Test React 17'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.2
-        with:
-          version: 7
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.14.2
-          cache: 'pnpm'
-      - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - run: pnpm run test:react:17
-        env:
-          REACTJS_VERSION: 17
   test-size:
     name: 'Size'
     runs-on: ubuntu-latest

docs/config.json

@@ -177,16 +177,16 @@
               "to": "react/guides/does-this-replace-client-state"
             },
             {
-              "label": "Migrating to React Query 3",
+              "label": "Migrating to v3",
               "to": "react/guides/migrating-to-react-query-3"
             },
             {
-              "label": "Migrating to React Query 4",
+              "label": "Migrating to v4",
               "to": "react/guides/migrating-to-react-query-4"
             },
             {
-              "label": "Migrating to React Query 5",
-              "to": "react/guides/migrating-to-react-query-5"
+              "label": "Migrating to v5",
+              "to": "react/guides/migrating-v5"
             }
           ]
         },

docs/react/guides/important-defaults.md

@@ -15,8 +15,6 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul
   - The network is reconnected
   - The query is optionally configured with a refetch interval
 
-If you see a refetch that you are not expecting, it is likely because you just focused the window and TanStack Query is doing a [`refetchOnWindowFocus`](../guides/window-focus-refetching). During development, this will probably be triggered more frequently, especially because focusing between the Browser DevTools and your app will also cause a fetch, so be aware of that.
-
 > To change this functionality, you can use options like `refetchOnMount`, `refetchOnWindowFocus`, `refetchOnReconnect` and `refetchInterval`.
 
 - Query results that have no more active instances of `useQuery`, `useInfiniteQuery` or query observers are labeled as "inactive" and remain in the cache in case they are used again at a later time.

docs/react/guides/migrating-to-react-query-5.md renamed to docs/react/guides/migrating-to-v5.md

@@ -203,3 +203,22 @@ There are some caveats to this change however, which you must be aware of:
     }
   }, [dataUpdatedAt])
   ```
+
+### Window focus refetching no longer listens to the `focus` event
+
+The `visibilitychange` event is used exclusively now. This is possible because we only support browsers that support the `visibilitychange` event. This fixes a bunch of issues [as listed here](https://github.com/TanStack/query/pull/4805).
+
+### No longer using `unstable_batchedUpdates` as the batching function in React and React Native
+
+Since the function `unstable_batchedUpdates` is noop in React 18, it will no longer be automatically set as the batching function in `react-query`.
+
+If your framework supports a custom batching function, you can let TanStack Query know about it by calling `notifyManager.setBatchNotifyFunction`.
+
+For example, this is how the batch function is set in `solid-query`:
+
+```ts
+import { notifyManager } from '@tanstack/query-core'
+import { batch } from 'solid-js'
+
+notifyManager.setBatchNotifyFunction(batch)
+```

docs/react/guides/window-focus-refetching.md

@@ -48,36 +48,19 @@ In rare circumstances, you may want to manage your own window focus events that
 
 ```tsx
 focusManager.setEventListener((handleFocus) => {
-  // Listen to visibilitychange and focus
+  // Listen to visibilitychange
   if (typeof window !== 'undefined' && window.addEventListener) {
     window.addEventListener('visibilitychange', handleFocus, false)
-    window.addEventListener('focus', handleFocus, false)
   }
 
   return () => {
     // Be sure to unsubscribe if a new handler is set
     window.removeEventListener('visibilitychange', handleFocus)
-    window.removeEventListener('focus', handleFocus)
   }
 })
 ```
 
 [//]: # 'Example3'
-
-## Ignoring Iframe Focus Events
-
-A great use-case for replacing the focus handler is that of iframe events. Iframes present problems with detecting window focus by both double-firing events and also firing false-positive events when focusing or using iframes within your app. If you experience this, you should use an event handler that ignores these events as much as possible. I recommend [this one](https://gist.github.com/tannerlinsley/1d3a2122332107fcd8c9cc379be10d88)! It can be set up in the following way:
-
-[//]: # 'Example4'
-
-```tsx
-import { focusManager } from '@tanstack/react-query'
-import onWindowFocus from './onWindowFocus' // The gist above
-
-focusManager.setEventListener(onWindowFocus) // Boom!
-```
-
-[//]: # 'Example4'
 [//]: # 'ReactNative'
 
 ## Managing Focus in React Native
@@ -105,7 +88,7 @@ useEffect(() => {
 
 ## Managing focus state
 
-[//]: # 'Example5'
+[//]: # 'Example4'
 
 ```tsx
 import { focusManager } from '@tanstack/react-query'
@@ -117,8 +100,4 @@ focusManager.setFocused(true)
 focusManager.setFocused(undefined)
 ```
 
-[//]: # 'Example5'
-
-## Pitfalls & Caveats
-
-Some browser internal dialogue windows, such as spawned by `alert()` or file upload dialogues (as created by `<input type="file" />`) might also trigger focus refetching after they close. This can result in unwanted side effects, as the refetching might trigger component unmounts or remounts before your file upload handler is executed. See [this issue on GitHub](https://github.com/tannerlinsley/react-query/issues/2960) for background and possible workarounds.
+[//]: # 'Example4'

docs/react/reference/focusManager.md

@@ -20,17 +20,15 @@ Its available methods are:
 ```tsx
 import { focusManager } from '@tanstack/react-query'
 
-focusManager.setEventListener(handleFocus => {
-  // Listen to visibilitychange and focus
+focusManager.setEventListener((handleFocus) => {
+  // Listen to visibilitychange
   if (typeof window !== 'undefined' && window.addEventListener) {
     window.addEventListener('visibilitychange', handleFocus, false)
-    window.addEventListener('focus', handleFocus, false)
   }
 
   return () => {
     // Be sure to unsubscribe if a new handler is set
     window.removeEventListener('visibilitychange', handleFocus)
-    window.removeEventListener('focus', handleFocus)
   }
 })
 ```

package.json

@@ -7,7 +7,6 @@
     "install:csb": "pnpm install --frozen-lockfile",
     "test": "pnpm run test:ci",
     "test:ci": "pnpm run test:format && pnpm run test:eslint && pnpm run test:jest --collectCoverage false && pnpm run typecheck",
-    "test:react:17": "pnpm --filter \"./packages/react-*\" --parallel --no-bail run test:jest --collectCoverage false",
     "test:eslint": "pnpm --filter \"./packages/**\" --parallel --no-bail run test:eslint",
     "test:format": "pnpm run prettier --check",
     "test:jest": "pnpm --filter \"./packages/**\" --parallel --no-bail run test:jest",
@@ -35,7 +34,6 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
-    "@testing-library/react-17": "npm:@testing-library/react@12.1.4",
     "@testing-library/react-hooks": "^7.0.2",
     "@tsconfig/svelte": "^3.0.0",
     "@types/jest": "^26.0.4",
@@ -75,9 +73,7 @@
     "luxon": "^2.3.2",
     "prettier": "^2.6.2",
     "react": "^18.2.0",
-    "react-17": "npm:react@^17.0.2",
     "react-dom": "^18.2.0",
-    "react-dom-17": "npm:react-dom@^17.0.2",
     "rollup": "^2.70.2",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-svelte": "^7.1.0",

packages/query-core/src/focusManager.ts

@@ -18,14 +18,12 @@ export class FocusManager extends Subscribable {
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!isServer && window.addEventListener) {
         const listener = () => onFocus()
-        // Listen to visibillitychange and focus
+        // Listen to visibilitychange
         window.addEventListener('visibilitychange', listener, false)
-        window.addEventListener('focus', listener, false)
 
         return () => {
           // Be sure to unsubscribe if a new handler is set
           window.removeEventListener('visibilitychange', listener)
-          window.removeEventListener('focus', listener)
         }
       }
       return

packages/query-core/src/query.ts

@@ -159,7 +159,6 @@ export class Query<
   private observers: QueryObserver<any, any, any, any, any>[]
   private defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
   private abortSignalConsumed: boolean
-
   constructor(config: QueryConfig<TQueryFnData, TError, TData, TQueryKey>) {
     super()
 
@@ -174,11 +173,9 @@ export class Query<
     this.initialState = config.state || getDefaultState(this.options)
     this.state = this.initialState
   }
-
   get meta(): QueryMeta | undefined {
     return this.options.meta
   }
-
   private setOptions(
     options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   ): void {

packages/query-core/src/queryCache.ts

@@ -15,10 +15,6 @@ interface QueryCacheConfig {
   onSuccess?: (data: unknown, query: Query<unknown, unknown, unknown>) => void
 }
 
-interface QueryHashMap {
-  [hash: string]: Query<any, any, any, any>
-}
-
 interface NotifyEventQueryAdded {
   type: 'added'
   query: Query<any, any, any, any>
@@ -72,16 +68,10 @@ type QueryCacheListener = (event: QueryCacheNotifyEvent) => void
 // CLASS
 
 export class QueryCache extends Subscribable<QueryCacheListener> {
-  config: QueryCacheConfig
-
-  private queries: Query<any, any, any, any>[]
-  private queriesMap: QueryHashMap
+  private queries = new Map<string, Query>()
 
-  constructor(config?: QueryCacheConfig) {
+  constructor(public config: QueryCacheConfig = {}) {
     super()
-    this.config = config || {}
-    this.queries = []
-    this.queriesMap = {}
   }
 
   build<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
@@ -111,9 +101,9 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
   }
 
   add(query: Query<any, any, any, any>): void {
-    if (!this.queriesMap[query.queryHash]) {
-      this.queriesMap[query.queryHash] = query
-      this.queries.push(query)
+    if (!this.queries.has(query.queryHash)) {
+      this.queries.set(query.queryHash, query)
+
       this.notify({
         type: 'added',
         query,
@@ -122,15 +112,13 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
   }
 
   remove(query: Query<any, any, any, any>): void {
-    const queryInMap = this.queriesMap[query.queryHash]
+    const queryInMap = this.queries.get(query.queryHash)
 
     if (queryInMap) {
       query.destroy()
 
-      this.queries = this.queries.filter((x) => x !== query)
-
       if (queryInMap === query) {
-        delete this.queriesMap[query.queryHash]
+        this.queries.delete(query.queryHash)
       }
 
       this.notify({ type: 'removed', query })
@@ -139,7 +127,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
 
   clear(): void {
     notifyManager.batch(() => {
-      this.queries.forEach((query) => {
+      this.getAll().forEach((query) => {
         this.remove(query)
       })
     })
@@ -149,15 +137,17 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
     TQueryFnData = unknown,
     TError = Error,
     TData = TQueryFnData,
-    TQueyKey extends QueryKey = QueryKey,
+    TQueryKey extends QueryKey = QueryKey,
   >(
     queryHash: string,
-  ): Query<TQueryFnData, TError, TData, TQueyKey> | undefined {
-    return this.queriesMap[queryHash]
+  ): Query<TQueryFnData, TError, TData, TQueryKey> | undefined {
+    return this.queries.get(queryHash) as
+      | Query<TQueryFnData, TError, TData, TQueryKey>
+      | undefined
   }
 
   getAll(): Query[] {
-    return this.queries
+    return [...this.queries.values()]
   }
 
   find<TQueryFnData = unknown, TError = Error, TData = TQueryFnData>(
@@ -167,13 +157,16 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
       filters.exact = true
     }
 
-    return this.queries.find((query) => matchQuery(filters, query))
+    return this.getAll().find((query) => matchQuery(filters, query)) as
+      | Query<TQueryFnData, TError, TData>
+      | undefined
   }
 
   findAll(filters: QueryFilters = {}): Query[] {
+    const queries = this.getAll()
     return Object.keys(filters).length > 0
-      ? this.queries.filter((query) => matchQuery(filters, query))
-      : this.queries
+      ? queries.filter((query) => matchQuery(filters, query))
+      : queries
   }
 
   notify(event: QueryCacheNotifyEvent) {
@@ -186,15 +179,15 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
 
   onFocus(): void {
     notifyManager.batch(() => {
-      this.queries.forEach((query) => {
+      this.getAll().forEach((query) => {
         query.onFocus()
       })
     })
   }
 
   onOnline(): void {
     notifyManager.batch(() => {
-      this.queries.forEach((query) => {
+      this.getAll().forEach((query) => {
         query.onOnline()
       })
     })