@apollo/client 3.12.11 → 3.13.0-rc.0

package/.changeset/blue-comics-train.md

@@ -0,0 +1,7 @@
+---
+"@apollo/client": minor
+---
+
+Adds a new `useSuspenseFragment` hook.
+
+`useSuspenseFragment` suspends until `data` is complete. It is a drop-in replacement for `useFragment` when you prefer to use Suspense to control the loading state of a fragment.

package/.changeset/bright-guests-chew.md

@@ -0,0 +1,16 @@
+---
+"@apollo/client": patch
+---
+
+Fix the return type of the `updateQuery` function to allow for `undefined`. `updateQuery` had the ability to bail out of the update by returning a falsey value, but the return type enforced a query value.
+
+```ts
+observableQuery.updateQuery((unsafePreviousData, { previousData, complete }) => {
+  if (!complete) {
+    // Bail out of the update by returning early
+    return;
+  }
+
+  // ...
+});
+```

package/.changeset/fluffy-worms-fail.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Ensure errors thrown in the `onCompleted` callback from `useMutation` don't call `onError`.

package/.changeset/heavy-pumas-boil.md

@@ -0,0 +1,6 @@
+---
+"@apollo/client": minor
+---
+
+Deprecate the `onCompleted` and `onError` callbacks of `useQuery` and `useLazyQuery`.
+For more context, please see the [related issue](https://github.com/apollographql/apollo-client/issues/12352) on GitHub.

package/.changeset/khaki-cars-develop.md

@@ -0,0 +1,7 @@
+---
+"@apollo/client": patch
+---
+
+Deprecate option `ignoreResults` in `useMutation`.
+Once this option is removed, existing code still using it might see increase in re-renders.
+If you don't want to synchronize your component state with the mutation, please use `useApolloClient` to get your ApolloClient instance and call `client.mutate` directly.

package/.changeset/pre.json

@@ -0,0 +1,18 @@
+{
+  "mode": "pre",
+  "tag": "rc",
+  "initialVersions": {
+    "@apollo/client": "3.12.2"
+  },
+  "changesets": [
+    "blue-comics-train",
+    "bright-guests-chew",
+    "fluffy-worms-fail",
+    "heavy-pumas-boil",
+    "khaki-cars-develop",
+    "pretty-planets-cough",
+    "quiet-apricots-reply",
+    "sharp-windows-switch",
+    "tough-years-destroy"
+  ]
+}

package/.changeset/pretty-planets-cough.md

@@ -0,0 +1,24 @@
+---
+"@apollo/client": minor
+---
+
+Provide a more type-safe option for the previous data value passed to `observableQuery.updateQuery`. Using it could result in crashes at runtime as this callback could be called with partial data even though its type reported the value as a complete result.
+
+The `updateQuery` callback function is now called with a new type-safe `previousData` property and a new `complete` property in the 2nd argument that determines whether `previousData` is a complete or partial result.
+
+As a result of this change, it is recommended to use the `previousData` property passed to the 2nd argument of the callback rather than using the previous data value from the first argument since that value is not type-safe. The first argument is now deprecated and will be removed in a future version of Apollo Client.
+
+```ts
+observableQuery.updateQuery((unsafePreviousData, { previousData, complete }) => {
+  previousData
+  // ^? TData | DeepPartial<TData> | undefined
+
+  if (complete) {
+    previousData
+    // ^? TData
+  } else {
+    previousData
+    // ^? DeepPartial<TData> | undefined
+  }
+})
+```

package/.changeset/quiet-apricots-reply.md

@@ -0,0 +1,6 @@
+---
+"@apollo/client": patch
+---
+
+In case of a multipart response (e.g. with `@defer`), query deduplication will
+now keep going until the final chunk has been received.

package/.changeset/sharp-windows-switch.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Reject the mutation promise if errors are thrown in the `onCompleted` callback of `useMutation`.

package/.changeset/tough-years-destroy.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix the type of the `variables` property passed as the 2nd argument to the `subscribeToMore` callback. This was previously reported as the `variables` type for the subscription itself, but is now properly typed as the query `variables`.

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @apollo/client
 
+## 3.13.0-rc.0
+
+### Minor Changes
+
+- [#12066](https://github.com/apollographql/apollo-client/pull/12066) [`c01da5d`](https://github.com/apollographql/apollo-client/commit/c01da5da639d4d9e882d380573b7876df4a1d65b) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Adds a new `useSuspenseFragment` hook.
+
+  `useSuspenseFragment` suspends until `data` is complete. It is a drop-in replacement for `useFragment` when you prefer to use Suspense to control the loading state of a fragment.
+
+- [#12174](https://github.com/apollographql/apollo-client/pull/12174) [`ba5cc33`](https://github.com/apollographql/apollo-client/commit/ba5cc330f8734a989eef71e883861f848388ac0c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Ensure errors thrown in the `onCompleted` callback from `useMutation` don't call `onError`.
+
+- [#12340](https://github.com/apollographql/apollo-client/pull/12340) [`716d02e`](https://github.com/apollographql/apollo-client/commit/716d02ec9c5b1448f50cb50a0306a345310a2342) Thanks [@phryneas](https://github.com/phryneas)! - Deprecate the `onCompleted` and `onError` callbacks of `useQuery` and `useLazyQuery`.
+  For more context, please see the [related issue](https://github.com/apollographql/apollo-client/issues/12352) on GitHub.
+
+- [#12276](https://github.com/apollographql/apollo-client/pull/12276) [`670f112`](https://github.com/apollographql/apollo-client/commit/670f112a7d9d85cb357eb279a488ac2c6d0137a9) Thanks [@Cellule](https://github.com/Cellule)! - Provide a more type-safe option for the previous data value passed to `observableQuery.updateQuery`. Using it could result in crashes at runtime as this callback could be called with partial data even though its type reported the value as a complete result.
+
+  The `updateQuery` callback function is now called with a new type-safe `previousData` property and a new `complete` property in the 2nd argument that determines whether `previousData` is a complete or partial result.
+
+  As a result of this change, it is recommended to use the `previousData` property passed to the 2nd argument of the callback rather than using the previous data value from the first argument since that value is not type-safe. The first argument is now deprecated and will be removed in a future version of Apollo Client.
+
+  ```ts
+  observableQuery.updateQuery(
+    (unsafePreviousData, { previousData, complete }) => {
+      previousData;
+      // ^? TData | DeepPartial<TData> | undefined
+
+      if (complete) {
+        previousData;
+        // ^? TData
+      } else {
+        previousData;
+        // ^? DeepPartial<TData> | undefined
+      }
+    }
+  );
+  ```
+
+- [#12174](https://github.com/apollographql/apollo-client/pull/12174) [`ba5cc33`](https://github.com/apollographql/apollo-client/commit/ba5cc330f8734a989eef71e883861f848388ac0c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Reject the mutation promise if errors are thrown in the `onCompleted` callback of `useMutation`.
+
+### Patch Changes
+
+- [#12276](https://github.com/apollographql/apollo-client/pull/12276) [`670f112`](https://github.com/apollographql/apollo-client/commit/670f112a7d9d85cb357eb279a488ac2c6d0137a9) Thanks [@Cellule](https://github.com/Cellule)! - Fix the return type of the `updateQuery` function to allow for `undefined`. `updateQuery` had the ability to bail out of the update by returning a falsey value, but the return type enforced a query value.
+
+  ```ts
+  observableQuery.updateQuery(
+    (unsafePreviousData, { previousData, complete }) => {
+      if (!complete) {
+        // Bail out of the update by returning early
+        return;
+      }
+
+      // ...
+    }
+  );
+  ```
+
+- [#12296](https://github.com/apollographql/apollo-client/pull/12296) [`2422df2`](https://github.com/apollographql/apollo-client/commit/2422df202a7ec71365d5a8ab5b3b554fcf60e4af) Thanks [@Cellule](https://github.com/Cellule)! - Deprecate option `ignoreResults` in `useMutation`.
+  Once this option is removed, existing code still using it might see increase in re-renders.
+  If you don't want to synchronize your component state with the mutation, please use `useApolloClient` to get your ApolloClient instance and call `client.mutate` directly.
+
+- [#12338](https://github.com/apollographql/apollo-client/pull/12338) [`67c16c9`](https://github.com/apollographql/apollo-client/commit/67c16c93897e36be980ba2139ee8bd3f24ab8558) Thanks [@phryneas](https://github.com/phryneas)! - In case of a multipart response (e.g. with `@defer`), query deduplication will
+  now keep going until the final chunk has been received.
+
+- [#12276](https://github.com/apollographql/apollo-client/pull/12276) [`670f112`](https://github.com/apollographql/apollo-client/commit/670f112a7d9d85cb357eb279a488ac2c6d0137a9) Thanks [@Cellule](https://github.com/Cellule)! - Fix the type of the `variables` property passed as the 2nd argument to the `subscribeToMore` `updateQuery` callback. This was previously reported as the `variables` type for the subscription itself, but is now properly typed as the query `variables`.
+
 ## 3.12.11
 
 ### Patch Changes

package/apollo-client.cjs

@@ -30,8 +30,9 @@ function _interopNamespace(e) {
 
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var version = "3.12.11";
+var version = "3.13.0-rc.0";
 
 function maybe(thunk) {
     try {
@@ -5455,12 +5456,8 @@ var ObservableQuery =  (function (_super) {
             next: function (subscriptionData) {
                 var updateQuery = options.updateQuery;
                 if (updateQuery) {
-                    _this.updateQuery(function (previous, _a) {
-                        var variables = _a.variables;
-                        return updateQuery(previous, {
-                            subscriptionData: subscriptionData,
-                            variables: variables,
-                        });
+                    _this.updateQuery(function (previous, updateOptions) {
+                        return updateQuery(previous, tslib.__assign({ subscriptionData: subscriptionData }, updateOptions));
                     });
                 }
             },
@@ -5501,14 +5498,16 @@ var ObservableQuery =  (function (_super) {
     };
     ObservableQuery.prototype.updateQuery = function (mapFn) {
         var queryManager = this.queryManager;
-        var result = queryManager.cache.diff({
+        var _a = queryManager.cache.diff({
             query: this.options.query,
             variables: this.variables,
             returnPartialData: true,
             optimistic: false,
-        }).result;
+        }), result = _a.result, complete = _a.complete;
         var newResult = mapFn(result, {
             variables: this.variables,
+            complete: !!complete,
+            previousData: result,
         });
         if (newResult) {
             queryManager.cache.writeQuery({
@@ -6677,12 +6676,17 @@ var QueryManager =  (function () {
                 var entry = inFlightLinkObservables_1.lookup(printedServerQuery_1, varJson_1);
                 observable = entry.observable;
                 if (!observable) {
-                    var concast = new Concast([
+                    var concast_1 = new Concast([
                         execute(link, operation),
                     ]);
-                    observable = entry.observable = concast;
-                    concast.beforeNext(function () {
-                        inFlightLinkObservables_1.remove(printedServerQuery_1, varJson_1);
+                    observable = entry.observable = concast_1;
+                    concast_1.beforeNext(function cb(method, arg) {
+                        if (method === "next" && "hasNext" in arg && arg.hasNext) {
+                            concast_1.beforeNext(cb);
+                        }
+                        else {
+                            inFlightLinkObservables_1.remove(printedServerQuery_1, varJson_1);
+                        }
                     });
                 }
             }
@@ -8330,10 +8334,10 @@ function useMutation(mutation, options) {
                 onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(response.data, clientOptions);
             }
             return response;
-        })
-            .catch(function (error) {
+        }, function (error) {
             var _a;
-            if (mutationId === ref.current.mutationId && ref.current.isMounted) {
+            if (mutationId === ref.current.mutationId &&
+                ref.current.isMounted) {
                 var result_2 = {
                     loading: false,
                     error: error,
@@ -8877,10 +8881,121 @@ var InternalQueryReference =  (function () {
     return InternalQueryReference;
 }());
 
+var FragmentReference =  (function () {
+    function FragmentReference(client, watchFragmentOptions, options) {
+        var _this = this;
+        this.key = {};
+        this.listeners = new Set();
+        this.references = 0;
+        this.dispose = this.dispose.bind(this);
+        this.handleNext = this.handleNext.bind(this);
+        this.handleError = this.handleError.bind(this);
+        this.observable = client.watchFragment(watchFragmentOptions);
+        if (options.onDispose) {
+            this.onDispose = options.onDispose;
+        }
+        var diff = this.getDiff(client, watchFragmentOptions);
+        var startDisposeTimer = function () {
+            var _a;
+            if (!_this.references) {
+                _this.autoDisposeTimeoutId = setTimeout(_this.dispose, (_a = options.autoDisposeTimeoutMs) !== null && _a !== void 0 ? _a : 30000);
+            }
+        };
+        this.promise =
+            diff.complete ?
+                createFulfilledPromise(diff.result)
+                : this.createPendingPromise();
+        this.subscribeToFragment();
+        this.promise.then(startDisposeTimer, startDisposeTimer);
+    }
+    FragmentReference.prototype.listen = function (listener) {
+        var _this = this;
+        this.listeners.add(listener);
+        return function () {
+            _this.listeners.delete(listener);
+        };
+    };
+    FragmentReference.prototype.retain = function () {
+        var _this = this;
+        this.references++;
+        clearTimeout(this.autoDisposeTimeoutId);
+        var disposed = false;
+        return function () {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            _this.references--;
+            setTimeout(function () {
+                if (!_this.references) {
+                    _this.dispose();
+                }
+            });
+        };
+    };
+    FragmentReference.prototype.dispose = function () {
+        this.subscription.unsubscribe();
+        this.onDispose();
+    };
+    FragmentReference.prototype.onDispose = function () {
+    };
+    FragmentReference.prototype.subscribeToFragment = function () {
+        this.subscription = this.observable.subscribe(this.handleNext.bind(this), this.handleError.bind(this));
+    };
+    FragmentReference.prototype.handleNext = function (result) {
+        var _a;
+        switch (this.promise.status) {
+            case "pending": {
+                if (result.complete) {
+                    return (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, result.data);
+                }
+                this.deliver(this.promise);
+                break;
+            }
+            case "fulfilled": {
+                if (equal.equal(this.promise.value, result.data)) {
+                    return;
+                }
+                this.promise =
+                    result.complete ?
+                        createFulfilledPromise(result.data)
+                        : this.createPendingPromise();
+                this.deliver(this.promise);
+            }
+        }
+    };
+    FragmentReference.prototype.handleError = function (error) {
+        var _a;
+        (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, error);
+    };
+    FragmentReference.prototype.deliver = function (promise) {
+        this.listeners.forEach(function (listener) { return listener(promise); });
+    };
+    FragmentReference.prototype.createPendingPromise = function () {
+        var _this = this;
+        return wrapPromiseWithState(new Promise(function (resolve, reject) {
+            _this.resolve = resolve;
+            _this.reject = reject;
+        }));
+    };
+    FragmentReference.prototype.getDiff = function (client, options) {
+        var cache = client.cache;
+        var from = options.from, fragment = options.fragment, fragmentName = options.fragmentName;
+        var diff = cache.diff(tslib.__assign(tslib.__assign({}, options), { query: cache["getFragmentDoc"](fragment, fragmentName), returnPartialData: true, id: from, optimistic: true }));
+        return tslib.__assign(tslib.__assign({}, diff), { result: client["queryManager"].maskFragment({
+                fragment: fragment,
+                fragmentName: fragmentName,
+                data: diff.result,
+            }) });
+    };
+    return FragmentReference;
+}());
+
 var SuspenseCache =  (function () {
     function SuspenseCache(options) {
         if (options === void 0) { options = Object.create(null); }
         this.queryRefs = new trie.Trie(canUseWeakMap);
+        this.fragmentRefs = new trie.Trie(canUseWeakMap);
         this.options = options;
     }
     SuspenseCache.prototype.getQueryRef = function (cacheKey, createObservable) {
@@ -8895,6 +9010,18 @@ var SuspenseCache =  (function () {
         }
         return ref.current;
     };
+    SuspenseCache.prototype.getFragmentRef = function (cacheKey, client, options) {
+        var ref = this.fragmentRefs.lookupArray(cacheKey);
+        if (!ref.current) {
+            ref.current = new FragmentReference(client, options, {
+                autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
+                onDispose: function () {
+                    delete ref.current;
+                },
+            });
+        }
+        return ref.current;
+    };
     SuspenseCache.prototype.add = function (cacheKey, queryRef) {
         var ref = this.queryRefs.lookupArray(cacheKey);
         ref.current = queryRef;
@@ -8974,7 +9101,8 @@ function useSuspenseQuery_(query, options) {
         setPromise([queryRef.key, queryRef.promise]);
         return promise;
     }, [queryRef]);
-    var subscribeToMore = queryRef.observable.subscribeToMore;
+    var subscribeToMore = queryRef.observable
+        .subscribeToMore;
     return React__namespace.useMemo(function () {
         return {
             client: client,
@@ -9086,11 +9214,52 @@ function useBackgroundQuery_(query, options) {
         {
             fetchMore: fetchMore,
             refetch: refetch,
-            subscribeToMore: queryRef.observable.subscribeToMore,
+            subscribeToMore: queryRef.observable
+                .subscribeToMore,
         },
     ];
 }
 
+var NULL_PLACEHOLDER = [];
+function useSuspenseFragment(options) {
+    return wrapHook("useSuspenseFragment",
+    useSuspenseFragment_, useApolloClient(typeof options === "object" ? options.client : undefined))(options);
+}
+function useSuspenseFragment_(options) {
+    var client = useApolloClient(options.client);
+    var from = options.from;
+    var cache = client.cache;
+    var id = React.useMemo(function () {
+        return typeof from === "string" ? from
+            : from === null ? null
+                : cache.identify(from);
+    }, [cache, from]);
+    var fragmentRef = id === null ? null : (getSuspenseCache(client).getFragmentRef([id, options.fragment, canonicalStringify(options.variables)], client, tslib.__assign(tslib.__assign({}, options), { from: id })));
+    var _a = React__default.useState(fragmentRef === null ? NULL_PLACEHOLDER : ([fragmentRef.key, fragmentRef.promise])), current = _a[0], setPromise = _a[1];
+    React__default.useEffect(function () {
+        if (fragmentRef === null) {
+            return;
+        }
+        var dispose = fragmentRef.retain();
+        var removeListener = fragmentRef.listen(function (promise) {
+            setPromise([fragmentRef.key, promise]);
+        });
+        return function () {
+            dispose();
+            removeListener();
+        };
+    }, [fragmentRef]);
+    if (fragmentRef === null) {
+        return { data: null };
+    }
+    if (current[0] !== fragmentRef.key) {
+        current[0] = fragmentRef.key;
+        current[1] = fragmentRef.promise;
+    }
+    var data = __use(current[1]);
+    return { data: data };
+}
+
 function useLoadableQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -9146,7 +9315,8 @@ function useLoadableQuery(query, options) {
     ]);
     var subscribeToMore = React__namespace.useCallback(function (options) {
         invariant(internalQueryRef, 60);
-        return internalQueryRef.observable.subscribeToMore(options);
+        return internalQueryRef.observable.subscribeToMore(
+        options);
     }, [internalQueryRef]);
     var reset = React__namespace.useCallback(function () {
         setQueryRef(null);
@@ -9187,7 +9357,8 @@ function useQueryRefHandlers_(queryRef) {
     return {
         refetch: refetch,
         fetchMore: fetchMore,
-        subscribeToMore: internalQueryRef.observable.subscribeToMore,
+        subscribeToMore: internalQueryRef.observable
+            .subscribeToMore,
     };
 }
 
@@ -9300,5 +9471,6 @@ exports.useQueryRefHandlers = useQueryRefHandlers;
 exports.useReactiveVar = useReactiveVar;
 exports.useReadQuery = useReadQuery;
 exports.useSubscription = useSubscription;
+exports.useSuspenseFragment = useSuspenseFragment;
 exports.useSuspenseQuery = useSuspenseQuery;
 //# sourceMappingURL=apollo-client.cjs.map