Merge branch 'main' into alpha

# Conflicts:
#	packages/query-async-storage-persister/package.json
#	packages/query-broadcast-client-experimental/package.json
#	packages/query-core/package.json
#	packages/query-core/src/mutation.ts
#	packages/query-core/src/query.ts
#	packages/query-core/src/utils.ts
#	packages/query-persist-client-core/package.json
#	packages/query-sync-storage-persister/package.json
#	packages/react-query-devtools/package.json
#	packages/react-query-persist-client/package.json
#	packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx
#	packages/react-query/package.json
#	packages/react-query/src/__tests__/useQuery.test.tsx
#	packages/solid-query/package.json
#	packages/svelte-query/package.json
#	packages/vue-query/package.json

Author: TkDodo

packages/query-core/src/mutation.ts

@@ -119,7 +119,7 @@ export class Mutation<
   }
 
   addObserver(observer: MutationObserver<any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) === -1) {
+    if (!this.#observers.includes(observer)) {
       this.#observers.push(observer)
 
       // Stop the mutation from being garbage collected

packages/query-core/src/onlineManager.ts

@@ -5,6 +5,8 @@ type SetupFn = (
   setOnline: (online?: boolean) => void,
 ) => (() => void) | undefined
 
+const onlineEvents = ['online', 'offline'] as const
+
 export class OnlineManager extends Subscribable {
   #online?: boolean
   #cleanup?: () => void
@@ -19,13 +21,15 @@ export class OnlineManager extends Subscribable {
       if (!isServer && window.addEventListener) {
         const listener = () => onOnline()
         // Listen to online
-        window.addEventListener('online', listener, false)
-        window.addEventListener('offline', listener, false)
+        onlineEvents.forEach((event) => {
+          window.addEventListener(event, listener, false)
+        })
 
         return () => {
           // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('online', listener)
-          window.removeEventListener('offline', listener)
+          onlineEvents.forEach((event) => {
+            window.removeEventListener(event, listener)
+          })
         }
       }
 

packages/query-core/src/queriesObserver.ts

@@ -11,7 +11,7 @@ import { Subscribable } from './subscribable'
 import { replaceEqualDeep } from './utils'
 
 function difference<T>(array1: T[], array2: T[]): T[] {
-  return array1.filter((x) => array2.indexOf(x) === -1)
+  return array1.filter((x) => !array2.includes(x))
 }
 
 function replaceAt<T>(array: T[], index: number, value: T): T[] {

packages/query-core/src/query.ts

@@ -281,7 +281,7 @@ export class Query<
   }
 
   addObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) === -1) {
+    if (!this.#observers.includes(observer)) {
       this.#observers.push(observer)
 
       // Stop the query from being garbage collected
@@ -292,7 +292,7 @@ export class Query<
   }
 
   removeObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.#observers.indexOf(observer) !== -1) {
+    if (this.#observers.includes(observer)) {
       this.#observers = this.#observers.filter((x) => x !== observer)
 
       if (!this.#observers.length) {

packages/query-core/src/queryObserver.ts

@@ -191,7 +191,7 @@ export class QueryObserver<
     }
 
     // Update result
-    this.#updateResult(notifyOptions)
+    this.updateResult(notifyOptions)
 
     // Update stale interval if needed
     if (
@@ -291,7 +291,7 @@ export class QueryObserver<
       ...fetchOptions,
       cancelRefetch: fetchOptions.cancelRefetch ?? true,
     }).then(() => {
-      this.#updateResult()
+      this.updateResult()
       return this.#currentResult
     })
   }
@@ -337,7 +337,7 @@ export class QueryObserver<
 
     this.#staleTimeoutId = setTimeout(() => {
       if (!this.#currentResult.isStale) {
-        this.#updateResult()
+        this.updateResult()
       }
     }, timeout)
   }
@@ -561,7 +561,7 @@ export class QueryObserver<
     return result as QueryObserverResult<TData, TError>
   }
 
-  #updateResult(notifyOptions?: NotifyOptions): void {
+  updateResult(notifyOptions?: NotifyOptions): void {
     const prevResult = this.#currentResult as
       | QueryObserverResult<TData, TError>
       | undefined
@@ -637,7 +637,7 @@ export class QueryObserver<
   }
 
   onQueryUpdate(): void {
-    this.#updateResult()
+    this.updateResult()
 
     if (this.hasListeners()) {
       this.#updateTimers()

packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -303,10 +303,13 @@ describe('PersistQueryClientProvider', () => {
 
     queryClient.clear()
 
+    let fetched = false
+
     function Page() {
       const state = useQuery({
         queryKey: key,
         queryFn: async () => {
+          fetched = true
           await sleep(10)
           return 'fetched'
         },
@@ -336,7 +339,9 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('data: null'))
     await waitFor(() => rendered.getByText('data: hydrated'))
 
-    expect(states).toHaveLength(2)
+    expect(states).toHaveLength(3)
+
+    expect(fetched).toBe(false)
 
     expect(states[0]).toMatchObject({
       status: 'pending',
@@ -349,6 +354,9 @@ describe('PersistQueryClientProvider', () => {
       fetchStatus: 'idle',
       data: 'hydrated',
     })
+
+    // #5443 seems like we get an extra render now ...
+    expect(states[1]).toStrictEqual(states[2])
   })
 
   test('should call onSuccess after successful restoring', async () => {

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

@@ -5960,4 +5960,37 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('data: custom client'))
   })
+
+  it('should be notified of updates between create and subscribe', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const mounted = React.useRef<boolean>(false)
+      const { data, status } = useQuery({
+        enabled: false,
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 5
+        },
+      })
+
+      // this simulates a synchronous update between the time the query is created
+      // and the time it is subscribed to that could be missed otherwise
+      if (!mounted.current) {
+        mounted.current = true
+        queryClient.setQueryData(key, 1)
+      }
+
+      return (
+        <div>
+          <span>status: {status}</span>
+          <span>data: {data}</span>
+        </div>
+      )
+    }
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('status: success'))
+    await waitFor(() => rendered.getByText('data: 1'))
+  })
 })

packages/react-query/src/useBaseQuery.ts

@@ -58,10 +58,17 @@ export function useBaseQuery<
 
   React.useSyncExternalStore(
     React.useCallback(
-      (onStoreChange) =>
-        isRestoring
+      (onStoreChange) => {
+        const unsubscribe = isRestoring
           ? () => undefined
-          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),
+          : observer.subscribe(notifyManager.batchCalls(onStoreChange))
+
+        // Update result to make sure we did not miss any query updates
+        // between creating the observer and subscribing to it.
+        observer.updateResult()
+
+        return unsubscribe
+      },
       [observer, isRestoring],
     ),
     () => observer.getCurrentResult(),