@tanstack/query-core - npm Package Compare versions

Comparing version 5.0.0-alpha.70 to 5.0.0-alpha.81

build/lib/focusManager.js

@@ -48,4 +48,5 @@ import { Subscribable } from './subscribable.js';
   setFocused(focused) {
-    this.#focused = focused;
-    if (focused) {
+    const changed = this.#focused !== focused;
+    if (changed) {
+      this.#focused = focused;
       this.onFocus();
@@ -52,0 +53,0 @@ }

build/lib/focusManager.legacy.js

@@ -63,4 +63,5 @@ import { classPrivateFieldLooseBase as _classPrivateFieldLooseBase, classPrivateFieldLooseKey as _classPrivateFieldLooseKey } from './_virtual/_rollupPluginBabelHelpers.legacy.js';
   setFocused(focused) {
-    _classPrivateFieldLooseBase(this, _focused)[_focused] = focused;
-    if (focused) {
+    const changed = _classPrivateFieldLooseBase(this, _focused)[_focused] !== focused;
+    if (changed) {
+      _classPrivateFieldLooseBase(this, _focused)[_focused] = focused;
       this.onFocus();
@@ -67,0 +68,0 @@ }

build/lib/onlineManager.js

@@ -53,4 +53,5 @@ import { Subscribable } from './subscribable.js';
   setOnline(online) {
-    this.#online = online;
-    if (online) {
+    const changed = this.#online !== online;
+    if (changed) {
+      this.#online = online;
       this.onOnline();
@@ -57,0 +58,0 @@ }

build/lib/onlineManager.legacy.js

@@ -68,4 +68,5 @@ import { classPrivateFieldLooseBase as _classPrivateFieldLooseBase, classPrivateFieldLooseKey as _classPrivateFieldLooseKey } from './_virtual/_rollupPluginBabelHelpers.legacy.js';
   setOnline(online) {
-    _classPrivateFieldLooseBase(this, _online)[_online] = online;
-    if (online) {
+    const changed = _classPrivateFieldLooseBase(this, _online)[_online] !== online;
+    if (changed) {
+      _classPrivateFieldLooseBase(this, _online)[_online] = online;
       this.onOnline();
@@ -72,0 +73,0 @@ }

build/lib/queryObserver.js

@@ -104,3 +104,25 @@ import { shallowEqualObjects, noop, isServer, isValidTimeout, timeUntilStale, replaceData } from './utils.js';
     const query = this.#client.getQueryCache().build(this.#client, options);
-    return this.createResult(query, options);
+    const result = this.createResult(query, options);
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      // this assigns the optimistic result to the current Observer
+      // because if the query function changes, useQuery will be performing
+      // an effect where it would fetch again.
+      // When the fetch finishes, we perform a deep data cloning in order
+      // to reuse objects references. This deep data clone is performed against
+      // the `observer.currentResult.data` property
+      // When QueryKey changes, we refresh the query and get new `optimistic`
+      // result, while we leave the `observer.currentResult`, so when new data
+      // arrives, it finds the old `observer.currentResult` which is related
+      // to the old QueryKey. Which means that currentResult and selectData are
+      // out of sync already.
+      // To solve this, we move the cursor of the currentResult everytime
+      // an observer reads an optimistic value.
+
+      // When keeping the previous data, the result doesn't change until new
+      // data arrives.
+      this.#currentResult = result;
+      this.#currentResultOptions = this.options;
+      this.#currentResultState = this.#currentQuery.state;
+    }
+    return result;
   }
@@ -428,3 +450,16 @@ getCurrentResult() {
 
+// this function would decide if we will update the observer's 'current'
+// properties after an optimistic reading via getOptimisticResult
+function shouldAssignObserverCurrentProperties(observer, optimisticResult) {
+  // if the newly created result isn't what the observer is holding as current,
+  // then we'll need to update the properties as well
+  if (observer.getCurrentResult() !== optimisticResult) {
+    return true;
+  }
+
+  // basically, just keep previous properties if nothing changed
+  return false;
+}
+
 export { QueryObserver };
 //# sourceMappingURL=queryObserver.js.map

build/lib/queryObserver.legacy.js

@@ -197,3 +197,25 @@ import { classPrivateFieldLooseBase as _classPrivateFieldLooseBase, classPrivateFieldLooseKey as _classPrivateFieldLooseKey } from './_virtual/_rollupPluginBabelHelpers.legacy.js';
     const query = _classPrivateFieldLooseBase(this, _client)[_client].getQueryCache().build(_classPrivateFieldLooseBase(this, _client)[_client], options);
-    return this.createResult(query, options);
+    const result = this.createResult(query, options);
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      // this assigns the optimistic result to the current Observer
+      // because if the query function changes, useQuery will be performing
+      // an effect where it would fetch again.
+      // When the fetch finishes, we perform a deep data cloning in order
+      // to reuse objects references. This deep data clone is performed against
+      // the `observer.currentResult.data` property
+      // When QueryKey changes, we refresh the query and get new `optimistic`
+      // result, while we leave the `observer.currentResult`, so when new data
+      // arrives, it finds the old `observer.currentResult` which is related
+      // to the old QueryKey. Which means that currentResult and selectData are
+      // out of sync already.
+      // To solve this, we move the cursor of the currentResult everytime
+      // an observer reads an optimistic value.
+
+      // When keeping the previous data, the result doesn't change until new
+      // data arrives.
+      _classPrivateFieldLooseBase(this, _currentResult)[_currentResult] = result;
+      _classPrivateFieldLooseBase(this, _currentResultOptions)[_currentResultOptions] = this.options;
+      _classPrivateFieldLooseBase(this, _currentResultState)[_currentResultState] = _classPrivateFieldLooseBase(this, _currentQuery)[_currentQuery].state;
+    }
+    return result;
   }
@@ -524,3 +546,16 @@ getCurrentResult() {
 
+// this function would decide if we will update the observer's 'current'
+// properties after an optimistic reading via getOptimisticResult
+function shouldAssignObserverCurrentProperties(observer, optimisticResult) {
+  // if the newly created result isn't what the observer is holding as current,
+  // then we'll need to update the properties as well
+  if (observer.getCurrentResult() !== optimisticResult) {
+    return true;
+  }
+
+  // basically, just keep previous properties if nothing changed
+  return false;
+}
+
 export { QueryObserver };
 //# sourceMappingURL=queryObserver.legacy.js.map

package.json

 {
   "name": "@tanstack/query-core",
-  "version": "5.0.0-alpha.70",
+  "version": "5.0.0-alpha.81",
   "description": "The framework agnostic core that powers TanStack Query",
@@ -5,0 +5,0 @@ "author": "tannerlinsley",

src/focusManager.ts

@@ -59,5 +59,5 @@ import { Subscribable } from './subscribable'
   setFocused(focused?: boolean): void {
-    this.#focused = focused
-
-    if (focused) {
+    const changed = this.#focused !== focused
+    if (changed) {
+      this.#focused = focused
       this.onFocus()
@@ -64,0 +64,0 @@ }

src/onlineManager.ts

@@ -66,5 +66,6 @@ import { Subscribable } from './subscribable'
   setOnline(online?: boolean): void {
-    this.#online = online
+    const changed = this.#online !== online
 
-    if (online) {
+    if (changed) {
+      this.#online = online
       this.onOnline()
@@ -71,0 +72,0 @@ }

src/queryObserver.ts

@@ -230,3 +230,26 @@ import type {
 
-    return this.createResult(query, options)
+    const result = this.createResult(query, options)
+
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      // this assigns the optimistic result to the current Observer
+      // because if the query function changes, useQuery will be performing
+      // an effect where it would fetch again.
+      // When the fetch finishes, we perform a deep data cloning in order
+      // to reuse objects references. This deep data clone is performed against
+      // the `observer.currentResult.data` property
+      // When QueryKey changes, we refresh the query and get new `optimistic`
+      // result, while we leave the `observer.currentResult`, so when new data
+      // arrives, it finds the old `observer.currentResult` which is related
+      // to the old QueryKey. Which means that currentResult and selectData are
+      // out of sync already.
+      // To solve this, we move the cursor of the currentResult everytime
+      // an observer reads an optimistic value.
+
+      // When keeping the previous data, the result doesn't change until new
+      // data arrives.
+      this.#currentResult = result
+      this.#currentResultOptions = this.options
+      this.#currentResultState = this.#currentQuery.state
+    }
+    return result
   }
@@ -723,1 +746,23 @@
 }
+
+// this function would decide if we will update the observer's 'current'
+// properties after an optimistic reading via getOptimisticResult
+function shouldAssignObserverCurrentProperties<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+  optimisticResult: QueryObserverResult<TData, TError>,
+) {
+  // if the newly created result isn't what the observer is holding as current,
+  // then we'll need to update the properties as well
+  if (observer.getCurrentResult() !== optimisticResult) {
+    return true
+  }
+
+  // basically, just keep previous properties if nothing changed
+  return false
+}

No alert changes

Improved metrics

Total package byte prevSize

1846400

increased by1.23%

Lines of code

23074

increased by0.85%

No dependency changes