@apollo/client 3.9.7 → 3.10.0-alpha.1

package/.changeset/flat-singers-kiss.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix issue where passing a new `from` option to `useFragment` would first render with the previous value before rerendering with the correct value.

package/.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@apollo/client": "3.9.7"
+  },
+  "changesets": [
+    "flat-singers-kiss",
+    "tasty-pillows-ring"
+  ]
+}

package/.changeset/tasty-pillows-ring.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Add `watchFragment` method to the cache and expose it on ApolloClient, refactor `useFragment` using `watchFragment`.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @apollo/client
 
+## 3.10.0-alpha.1
+
+### Patch Changes
+
+- [#11689](https://github.com/apollographql/apollo-client/pull/11689) [`cb8ffe5`](https://github.com/apollographql/apollo-client/commit/cb8ffe50e903397f741b62a44624bfe69b5f7b75) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Fix issue where passing a new `from` option to `useFragment` would first render with the previous value before rerendering with the correct value.
+
+## 3.10.0-alpha.0
+
+### Minor Changes
+
+- [#11465](https://github.com/apollographql/apollo-client/pull/11465) [`7623da7`](https://github.com/apollographql/apollo-client/commit/7623da7720855b0c19e13ff9124679f426a39725) Thanks [@alessbell](https://github.com/alessbell)! - Add `watchFragment` method to the cache and expose it on ApolloClient, refactor `useFragment` using `watchFragment`.
+
 ## 3.9.7
 
 ### Patch Changes

package/apollo-client.cjs

@@ -31,7 +31,7 @@ function _interopNamespace(e) {
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var version = "3.9.7";
+var version = "3.10.0-alpha.1";
 
 function maybe(thunk) {
     try {
@@ -2416,6 +2416,33 @@ var ApolloCache =  (function () {
         if (optimistic === void 0) { optimistic = !!options.optimistic; }
         return this.read(tslib.__assign(tslib.__assign({}, options), { rootId: options.id || "ROOT_QUERY", optimistic: optimistic }));
     };
+    ApolloCache.prototype.watchFragment = function (options) {
+        var _this = this;
+        var fragment = options.fragment, fragmentName = options.fragmentName, from = options.from, _a = options.optimistic, optimistic = _a === void 0 ? true : _a;
+        var diffOptions = {
+            returnPartialData: true,
+            id: typeof from === "string" ? from : this.identify(from),
+            query: this.getFragmentDoc(fragment, fragmentName),
+            optimistic: optimistic,
+        };
+        var latestDiff;
+        return new zenObservableTs.Observable(function (observer) {
+            return _this.watch(tslib.__assign(tslib.__assign({}, diffOptions), { immediate: true, query: _this.getFragmentDoc(fragment, fragmentName), callback: function (diff) {
+                    if (equal.equal(diff, latestDiff)) {
+                        return;
+                    }
+                    var result = {
+                        data: diff.result,
+                        complete: !!diff.complete,
+                    };
+                    if (diff.missing) {
+                        result.missing = mergeDeepArray(diff.missing.map(function (error) { return error.missing; }));
+                    }
+                    latestDiff = diff;
+                    observer.next(result);
+                } }));
+        });
+    };
     ApolloCache.prototype.readFragment = function (options, optimistic) {
         if (optimistic === void 0) { optimistic = !!options.optimistic; }
         return this.read(tslib.__assign(tslib.__assign({}, options), { query: this.getFragmentDoc(options.fragment, options.fragmentName), rootId: options.id, optimistic: optimistic }));
@@ -7061,6 +7088,9 @@ var ApolloClient =  (function () {
         if (optimistic === void 0) { optimistic = false; }
         return this.cache.readQuery(options, optimistic);
     };
+    ApolloClient.prototype.watchFragment = function (options) {
+        return this.cache.watchFragment(options);
+    };
     ApolloClient.prototype.readFragment = function (options, optimistic) {
         if (optimistic === void 0) { optimistic = false; }
         return this.cache.readFragment(options, optimistic);
@@ -8048,21 +8078,27 @@ function _useFragment(options) {
     var resultRef = useLazyRef(function () {
         return diffToResult(cache.diff(diffOptions));
     });
+    var stableOptions = useDeepMemo(function () { return options; }, [options]);
+    React__namespace.useMemo(function () {
+        resultRef.current = diffToResult(cache.diff(diffOptions));
+    }, [diffOptions, cache]);
     var getSnapshot = React__namespace.useCallback(function () { return resultRef.current; }, []);
     return useSyncExternalStore(React__namespace.useCallback(function (forceUpdate) {
         var lastTimeout = 0;
-        var unsubscribe = cache.watch(tslib.__assign(tslib.__assign({}, diffOptions), { immediate: true, callback: function (diff) {
-                if (!equal.equal(diff.result, resultRef.current.data)) {
-                    resultRef.current = diffToResult(diff);
-                    clearTimeout(lastTimeout);
-                    lastTimeout = setTimeout(forceUpdate);
-                }
-            } }));
+        var subscription = cache.watchFragment(stableOptions).subscribe({
+            next: function (result) {
+                if (equal__default(result, resultRef.current))
+                    return;
+                resultRef.current = result;
+                clearTimeout(lastTimeout);
+                lastTimeout = setTimeout(forceUpdate);
+            },
+        });
         return function () {
-            unsubscribe();
+            subscription.unsubscribe();
             clearTimeout(lastTimeout);
         };
-    }, [cache, diffOptions]), getSnapshot, getSnapshot);
+    }, [cache, stableOptions]), getSnapshot, getSnapshot);
 }
 function diffToResult(diff) {
     var result = {