@apollo/client - npm Package Compare versions

Comparing version 0.0.0-pr-11738-20240401174605 to 0.0.0-pr-11742-20240401181227

dev/dev.cjs.native.js

@@ -431,3 +431,3 @@ 'use strict';
 
-var version = "0.0.0-pr-11738-20240401174605";
+var version = "0.0.0-pr-11742-20240401181227";
 
@@ -434,0 +434,0 @@ function maybe(thunk) {

package.json

 {
   "name": "@apollo/client",
-  "version": "0.0.0-pr-11738-20240401174605",
+  "version": "0.0.0-pr-11742-20240401181227",
   "description": "A fully-featured caching GraphQL client.",
@@ -5,0 +5,0 @@ "private": false,

react/hooks/hooks.cjs.native.js

@@ -833,8 +833,2 @@ 'use strict';
     }, [queryRef]);
-    React__namespace.useEffect(function () {
-        if (queryRef.disposed) {
-            suspenseCache.add(cacheKey, queryRef);
-            queryRef.reinitialize();
-        }
-    });
     var skipResult = React__namespace.useMemo(function () {
@@ -947,7 +941,2 @@ var error = toApolloError(queryRef.result);
     }
-    React__namespace.useEffect(function () {
-        if (queryRef.disposed) {
-            suspenseCache.add(cacheKey, queryRef);
-        }
-    });
     var fetchMore = React__namespace.useCallback(function (options) {
@@ -1055,8 +1044,3 @@ var promise = queryRef.fetchMore(options);
     }
-    React__namespace.useEffect(function () {
-        if (internalQueryRef.disposed) {
-            internalQueryRef.reinitialize();
-        }
-        return internalQueryRef.retain();
-    }, [internalQueryRef]);
+    React__namespace.useEffect(function () { return internalQueryRef.retain(); }, [internalQueryRef]);
     var promise = useSyncExternalStore(React__namespace.useCallback(function (forceUpdate) {
@@ -1063,0 +1047,0 @@ return internalQueryRef.listen(function (promise) {

react/hooks/useBackgroundQuery.js

@@ -41,15 +41,2 @@ import { __spreadArray } from "tslib";
     }
-    // Handle strict mode where the query ref might be disposed when useEffect
-    // runs twice. We add the queryRef back in the suspense cache so that the next
-    // render will reuse this queryRef rather than initializing a new instance.
-    // This also prevents issues where rerendering useBackgroundQuery after the
-    // queryRef has been disposed, either automatically or by unmounting
-    // useReadQuery will ensure the same queryRef is maintained.
-    React.useEffect(function () {
-        if (queryRef.disposed) {
-            suspenseCache.add(cacheKey, queryRef);
-        }
-        // Omitting the deps is intentional. This avoids stale closures and the
-        // conditional ensures we aren't running the logic on each render.
-    });
     var fetchMore = React.useCallback(function (options) {
@@ -56,0 +43,0 @@ var promise = queryRef.fetchMore(options);

react/hooks/useReadQuery.js

@@ -16,12 +16,3 @@ import * as React from "rehackt";
     }
-    React.useEffect(function () {
-        // It may seem odd that we are trying to reinitialize the queryRef even
-        // though we reinitialize in render above, but this is necessary to
-        // handle strict mode where this useEffect will be run twice resulting in a
-        // disposed queryRef before the next render.
-        if (internalQueryRef.disposed) {
-            internalQueryRef.reinitialize();
-        }
-        return internalQueryRef.retain();
-    }, [internalQueryRef]);
+    React.useEffect(function () { return internalQueryRef.retain(); }, [internalQueryRef]);
     var promise = useSyncExternalStore(React.useCallback(function (forceUpdate) {
@@ -28,0 +19,0 @@ return internalQueryRef.listen(function (promise) {

react/hooks/useSuspenseQuery.js

@@ -53,29 +53,2 @@ import { __assign, __spreadArray } from "tslib";
     }, [queryRef]);
-    // This effect handles the case where strict mode causes the queryRef to get
-    // disposed early. Previously this was done by using a `setTimeout` inside the
-    // dispose function, but this could cause some issues in cases where someone
-    // might expect the queryRef to be disposed immediately. For example, when
-    // using the same client instance across multiple tests in a test suite, the
-    // `setTimeout` has the possibility of retaining the suspense cache entry for
-    // too long, which means that two tests might accidentally share the same
-    // `queryRef` instance. By immediately disposing, we can avoid this situation.
-    //
-    // Instead we can leverage the work done to allow the queryRef to "resume"
-    // after it has been disposed without executing an additional network request.
-    // This is done by calling the `initialize` function below.
-    React.useEffect(function () {
-        if (queryRef.disposed) {
-            // Calling the `dispose` function removes it from the suspense cache, so
-            // when the component rerenders, it instantiates a fresh query ref.
-            // We address this by adding the queryRef back to the suspense cache
-            // so that the lookup on the next render uses the existing queryRef rather
-            // than instantiating a new one.
-            suspenseCache.add(cacheKey, queryRef);
-            queryRef.reinitialize();
-        }
-        // We can omit the deps here to get a fresh closure each render since the
-        // conditional will prevent the logic from running in most cases. This
-        // should also be a touch faster since it should be faster to check the `if`
-        // statement than for React to compare deps on this effect.
-    });
     var skipResult = React.useMemo(function () {
@@ -82,0 +55,0 @@ var error = toApolloError(queryRef.result);

react/internal/cache/QueryReference.js

@@ -128,5 +128,8 @@ import { __assign } from "tslib";
             _this.references--;
-            if (!_this.references) {
-                _this.dispose();
-            }
+            // Wait before fully disposing in case the app is running in strict mode.
+            setTimeout(function () {
+                if (!_this.references) {
+                    _this.dispose();
+                }
+            });
         };
@@ -133,0 +136,0 @@ };

react/internal/cache/SuspenseCache.d.ts

@@ -22,4 +22,3 @@ import type { ObservableQuery } from "../../../core/index.js";
     getQueryRef<TData = any>(cacheKey: CacheKey, createObservable: () => ObservableQuery<TData>): InternalQueryReference<TData>;
-    add(cacheKey: CacheKey, queryRef: InternalQueryReference<unknown>): void;
 }
 //# sourceMappingURL=SuspenseCache.d.ts.map

react/internal/cache/SuspenseCache.js

@@ -22,6 +22,2 @@ import { Trie } from "@wry/trie";
     };
-    SuspenseCache.prototype.add = function (cacheKey, queryRef) {
-        var ref = this.queryRefs.lookupArray(cacheKey);
-        ref.current = queryRef;
-    };
     return SuspenseCache;
@@ -28,0 +24,0 @@ }());

react/internal/internal.cjs.native.js

@@ -115,5 +115,7 @@ 'use strict';
             _this.references--;
-            if (!_this.references) {
-                _this.dispose();
-            }
+            setTimeout(function () {
+                if (!_this.references) {
+                    _this.dispose();
+                }
+            });
         };
@@ -286,6 +288,2 @@ };
     };
-    SuspenseCache.prototype.add = function (cacheKey, queryRef) {
-        var ref = this.queryRefs.lookupArray(cacheKey);
-        ref.current = queryRef;
-    };
     return SuspenseCache;
@@ -292,0 +290,0 @@ }());

utilities/globals/globals.cjs.native.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var version = "0.0.0-pr-11738-20240401174605";
+var version = "0.0.0-pr-11742-20240401181227";
 
@@ -10,0 +10,0 @@ function maybe(thunk) {

version.js

@@ -1,2 +0,2 @@
-export var version = "0.0.0-pr-11738-20240401174605";
+export var version = "0.0.0-pr-11742-20240401181227";
 //# sourceMappingURL=version.js.map

No alert changes

Worsened metrics

Total package byte prevSize

6686729

decreased by-0.24%

Lines of code

58124

decreased by-0.18%

No dependency changes