@apollo/client 3.8.0-rc.1 → 3.8.0

package/apollo-client.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var invariant$1 = require('ts-invariant');
+var tsInvariant = require('ts-invariant');
 var equal = require('@wry/equality');
 var graphql = require('graphql');
 var zenObservableTs = require('zen-observable-ts');
@@ -28,11 +28,10 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant$1);
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var version = '3.8.0-rc.1';
+var version = '3.8.0';
 
 function maybe(thunk) {
     try {
@@ -67,7 +66,7 @@ function wrap(fn) {
         for (var _i = 1; _i < arguments.length; _i++) {
             args[_i - 1] = arguments[_i];
         }
-        fn.apply(void 0, tslib.__spreadArray([typeof message === 'number' ? getErrorMsg(message) : message], args, false));
+        fn.apply(void 0, tslib.__spreadArray([typeof message === "number" ? getErrorMsg(message) : message], args, false));
     };
 }
 var invariant = Object.assign(function invariant(condition, message) {
@@ -76,28 +75,28 @@ var invariant = Object.assign(function invariant(condition, message) {
         args[_i - 2] = arguments[_i];
     }
     if (!condition) {
-        invariant$1.invariant(condition, getErrorMsg(message, args));
+        tsInvariant.invariant(condition, getErrorMsg(message, args));
     }
 }, {
-    debug: wrap(invariant$1.invariant.debug),
-    log: wrap(invariant$1.invariant.log),
-    warn: wrap(invariant$1.invariant.warn),
-    error: wrap(invariant$1.invariant.error),
+    debug: wrap(tsInvariant.invariant.debug),
+    log: wrap(tsInvariant.invariant.log),
+    warn: wrap(tsInvariant.invariant.warn),
+    error: wrap(tsInvariant.invariant.error),
 });
 function newInvariantError(message) {
     var optionalParams = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         optionalParams[_i - 1] = arguments[_i];
     }
-    return new invariant$1.InvariantError(getErrorMsg(message, optionalParams));
+    return new tsInvariant.InvariantError(getErrorMsg(message, optionalParams));
 }
-var ApolloErrorMessageHandler = Symbol.for('ApolloErrorMessageHandler_' + version);
+var ApolloErrorMessageHandler = Symbol.for("ApolloErrorMessageHandler_" + version);
 function getErrorMsg(message, messageArgs) {
     if (messageArgs === void 0) { messageArgs = []; }
     if (!message)
         return;
     var args = messageArgs.map(function (arg) {
-        return typeof arg == 'string' ? arg : stringifyForDisplay(arg, 2).slice(0, 1000);
+        return typeof arg == "string" ? arg : stringifyForDisplay(arg, 2).slice(0, 1000);
     });
     return ((global$1[ApolloErrorMessageHandler] &&
         global$1[ApolloErrorMessageHandler](message, args)) ||
@@ -958,36 +957,36 @@ var DeepMerger = (function () {
 
 function createFulfilledPromise(value) {
     var promise = Promise.resolve(value);
-    promise.status = 'fulfilled';
+    promise.status = "fulfilled";
     promise.value = value;
     return promise;
 }
 function createRejectedPromise(reason) {
     var promise = Promise.reject(reason);
     promise.catch(function () { });
-    promise.status = 'rejected';
+    promise.status = "rejected";
     promise.reason = reason;
     return promise;
 }
 function isStatefulPromise(promise) {
-    return 'status' in promise;
+    return "status" in promise;
 }
 function wrapPromiseWithState(promise) {
     if (isStatefulPromise(promise)) {
         return promise;
     }
     var pendingPromise = promise;
-    pendingPromise.status = 'pending';
+    pendingPromise.status = "pending";
     pendingPromise.then(function (value) {
-        if (pendingPromise.status === 'pending') {
+        if (pendingPromise.status === "pending") {
             var fulfilledPromise = pendingPromise;
-            fulfilledPromise.status = 'fulfilled';
+            fulfilledPromise.status = "fulfilled";
             fulfilledPromise.value = value;
         }
     }, function (reason) {
-        if (pendingPromise.status === 'pending') {
+        if (pendingPromise.status === "pending") {
             var rejectedPromise = pendingPromise;
-            rejectedPromise.status = 'rejected';
+            rejectedPromise.status = "rejected";
             rejectedPromise.reason = reason;
         }
     });
@@ -4560,7 +4559,7 @@ function selectionHasNonreactiveDirective(selection) {
     return (!!selection.directives && selection.directives.some(directiveIsNonreactive));
 }
 function directiveIsNonreactive(dir) {
-    return dir.name.value === 'nonreactive';
+    return dir.name.value === "nonreactive";
 }
 
 var assign = Object.assign, hasOwnProperty$2 = Object.hasOwnProperty;
@@ -6808,19 +6807,21 @@ var ApolloClient = (function () {
 }());
 
 var contextKey = canUseSymbol
-    ? Symbol.for('__APOLLO_CONTEXT__')
-    : '__APOLLO_CONTEXT__';
+    ? Symbol.for("__APOLLO_CONTEXT__")
+    : "__APOLLO_CONTEXT__";
 function getApolloContext() {
-    invariant('createContext' in React__namespace, 43);
-    var contextStorage = global$1[contextKey] || (global$1[contextKey] = new Map());
-    var value = contextStorage.get(React__namespace.createContext);
-    if (!value) {
-        value = Object.assign(React__namespace.createContext({}), {
-            displayName: 'ApolloContext',
+    invariant("createContext" in React__namespace, 43);
+    var context = React__namespace.createContext[contextKey];
+    if (!context) {
+        Object.defineProperty(React__namespace.createContext, contextKey, {
+            value: (context = React__namespace.createContext({})),
+            enumerable: false,
+            writable: false,
+            configurable: true,
         });
-        contextStorage.set(React__namespace.createContext, value);
+        context.displayName = "ApolloContext";
     }
-    return value;
+    return context;
 }
 var resetApolloContext = getApolloContext;
 
@@ -6853,38 +6854,41 @@ function useApolloClient(override) {
 var didWarnUncachedGetSnapshot = false;
 var uSESKey = "useSyncExternalStore";
 var realHook$1 = React__namespace[uSESKey];
-var useSyncExternalStore = realHook$1 || (function (subscribe, getSnapshot, getServerSnapshot) {
-    var value = getSnapshot();
-    if (globalThis.__DEV__ !== false &&
-        !didWarnUncachedGetSnapshot &&
-        value !== getSnapshot()) {
-        didWarnUncachedGetSnapshot = true;
-        globalThis.__DEV__ !== false && invariant.error(56);
-    }
-    var _a = React__namespace.useState({ inst: { value: value, getSnapshot: getSnapshot } }), inst = _a[0].inst, forceUpdate = _a[1];
-    if (canUseLayoutEffect) {
-        React__namespace.useLayoutEffect(function () {
+var useSyncExternalStore = realHook$1 ||
+    (function (subscribe, getSnapshot, getServerSnapshot) {
+        var value = getSnapshot();
+        if (globalThis.__DEV__ !== false &&
+            !didWarnUncachedGetSnapshot &&
+            value !== getSnapshot()) {
+            didWarnUncachedGetSnapshot = true;
+            globalThis.__DEV__ !== false && invariant.error(56);
+        }
+        var _a = React__namespace.useState({
+            inst: { value: value, getSnapshot: getSnapshot },
+        }), inst = _a[0].inst, forceUpdate = _a[1];
+        if (canUseLayoutEffect) {
+            React__namespace.useLayoutEffect(function () {
+                Object.assign(inst, { value: value, getSnapshot: getSnapshot });
+                if (checkIfSnapshotChanged(inst)) {
+                    forceUpdate({ inst: inst });
+                }
+            }, [subscribe, value, getSnapshot]);
+        }
+        else {
             Object.assign(inst, { value: value, getSnapshot: getSnapshot });
-            if (checkIfSnapshotChanged(inst)) {
-                forceUpdate({ inst: inst });
-            }
-        }, [subscribe, value, getSnapshot]);
-    }
-    else {
-        Object.assign(inst, { value: value, getSnapshot: getSnapshot });
-    }
-    React__namespace.useEffect(function () {
-        if (checkIfSnapshotChanged(inst)) {
-            forceUpdate({ inst: inst });
         }
-        return subscribe(function handleStoreChange() {
+        React__namespace.useEffect(function () {
             if (checkIfSnapshotChanged(inst)) {
                 forceUpdate({ inst: inst });
             }
-        });
-    }, [subscribe]);
-    return value;
-});
+            return subscribe(function handleStoreChange() {
+                if (checkIfSnapshotChanged(inst)) {
+                    forceUpdate({ inst: inst });
+                }
+            });
+        }, [subscribe]);
+        return value;
+    });
 function checkIfSnapshotChanged(_a) {
     var value = _a.value, getSnapshot = _a.getSnapshot;
     try {
@@ -6906,13 +6910,13 @@ function operationName(type) {
     var name;
     switch (type) {
         case exports.DocumentType.Query:
-            name = 'Query';
+            name = "Query";
             break;
         case exports.DocumentType.Mutation:
-            name = 'Mutation';
+            name = "Mutation";
             break;
         case exports.DocumentType.Subscription:
-            name = 'Subscription';
+            name = "Subscription";
             break;
     }
     return name;
@@ -6929,26 +6933,28 @@ function parser(document) {
     var subscriptions = [];
     for (var _i = 0, _a = document.definitions; _i < _a.length; _i++) {
         var x = _a[_i];
-        if (x.kind === 'FragmentDefinition') {
+        if (x.kind === "FragmentDefinition") {
             fragments.push(x);
             continue;
         }
-        if (x.kind === 'OperationDefinition') {
+        if (x.kind === "OperationDefinition") {
             switch (x.operation) {
-                case 'query':
+                case "query":
                     queries.push(x);
                     break;
-                case 'mutation':
+                case "mutation":
                     mutations.push(x);
                     break;
-                case 'subscription':
+                case "subscription":
                     subscriptions.push(x);
                     break;
             }
         }
     }
     invariant(!fragments.length ||
-        (queries.length || mutations.length || subscriptions.length), 58);
+        queries.length ||
+        mutations.length ||
+        subscriptions.length, 58);
     invariant(
         queries.length + mutations.length + subscriptions.length <= 1,
         59,
@@ -6968,11 +6974,11 @@ function parser(document) {
     invariant(definitions.length === 1, 60, document, definitions.length);
     var definition = definitions[0];
     variables = definition.variableDefinitions || [];
-    if (definition.name && definition.name.kind === 'Name') {
+    if (definition.name && definition.name.kind === "Name") {
         name = definition.name.value;
     }
     else {
-        name = 'data';
+        name = "data";
     }
     var payload = { name: name, type: type, variables: variables };
     cache.set(document, payload);
@@ -7004,16 +7010,15 @@ function useInternalState(client, query) {
         stateRef.current = new InternalState(client, query, stateRef.current);
     }
     var state = stateRef.current;
-    var _a = React__namespace.useState(0); _a[0]; var setTick = _a[1];
-    state.forceUpdate = function () {
-        setTick(function (tick) { return tick + 1; });
-    };
+    state.forceUpdateState = React__namespace.useReducer(function (tick) { return tick + 1; }, 0)[1];
     return state;
 }
 var InternalState = (function () {
     function InternalState(client, query, previous) {
+        var _this = this;
         this.client = client;
         this.query = query;
+        this.forceUpdate = function () { return _this.forceUpdateState(); };
         this.ssrDisabledResult = maybeDeepFreeze({
             loading: true,
             data: void 0,
@@ -7034,7 +7039,7 @@ var InternalState = (function () {
             this.previousData = previousData;
         }
     }
-    InternalState.prototype.forceUpdate = function () {
+    InternalState.prototype.forceUpdateState = function () {
         globalThis.__DEV__ !== false && invariant.warn(48);
     };
     InternalState.prototype.executeQuery = function (options) {
@@ -7043,7 +7048,7 @@ var InternalState = (function () {
         if (options.query) {
             Object.assign(this, { query: options.query });
         }
-        this.watchQueryOptions = this.createWatchQueryOptions(this.queryHookOptions = options);
+        this.watchQueryOptions = this.createWatchQueryOptions((this.queryHookOptions = options));
         var concast = this.observable.reobserveAsConcast(this.getObsQueryOptions());
         this.previousData = ((_a = this.result) === null || _a === void 0 ? void 0 : _a.data) || this.previousData;
         this.result = void 0;
@@ -7059,7 +7064,7 @@ var InternalState = (function () {
                 },
                 complete: function () {
                     resolve(_this.toQueryResult(result));
-                }
+                },
             });
         });
     };
@@ -7068,10 +7073,11 @@ var InternalState = (function () {
         this.renderPromises = React__namespace.useContext(getApolloContext()).renderPromises;
         this.useOptions(options);
         var obsQuery = this.useObservableQuery();
-        var result = useSyncExternalStore(React__namespace.useCallback(function () {
+        var result = useSyncExternalStore(React__namespace.useCallback(function (handleStoreChange) {
             if (_this.renderPromises) {
                 return function () { };
             }
+            _this.forceUpdate = handleStoreChange;
             var onNext = function () {
                 var previousResult = _this.result;
                 var result = obsQuery.getCurrentResult();
@@ -7093,7 +7099,7 @@ var InternalState = (function () {
                 finally {
                     obsQuery["last"] = last;
                 }
-                if (!hasOwnProperty.call(error, 'graphQLErrors')) {
+                if (!hasOwnProperty.call(error, "graphQLErrors")) {
                     throw error;
                 }
                 var previousResult = _this.result;
@@ -7109,7 +7115,10 @@ var InternalState = (function () {
                 }
             };
             var subscription = obsQuery.subscribe(onNext, onError);
-            return function () { return setTimeout(function () { return subscription.unsubscribe(); }); };
+            return function () {
+                setTimeout(function () { return subscription.unsubscribe(); });
+                _this.forceUpdate = function () { return _this.forceUpdateState(); };
+            };
         }, [
             obsQuery,
             this.renderPromises,
@@ -7120,7 +7129,7 @@ var InternalState = (function () {
     };
     InternalState.prototype.useOptions = function (options) {
         var _a;
-        var watchQueryOptions = this.createWatchQueryOptions(this.queryHookOptions = options);
+        var watchQueryOptions = this.createWatchQueryOptions((this.queryHookOptions = options));
         var currentWatchQueryOptions = this.watchQueryOptions;
         if (!equal.equal(watchQueryOptions, currentWatchQueryOptions)) {
             this.watchQueryOptions = watchQueryOptions;
@@ -7130,7 +7139,8 @@ var InternalState = (function () {
                 this.result = void 0;
             }
         }
-        this.onCompleted = options.onCompleted || InternalState.prototype.onCompleted;
+        this.onCompleted =
+            options.onCompleted || InternalState.prototype.onCompleted;
         this.onError = options.onError || InternalState.prototype.onError;
         if ((this.renderPromises || this.client.disableNetworkFetches) &&
             this.queryHookOptions.ssr === false &&
@@ -7138,7 +7148,7 @@ var InternalState = (function () {
             this.result = this.ssrDisabledResult;
         }
         else if (this.queryHookOptions.skip ||
-            this.watchQueryOptions.fetchPolicy === 'standby') {
+            this.watchQueryOptions.fetchPolicy === "standby") {
             this.result = this.skipStandbyResult;
         }
         else if (this.result === this.ssrDisabledResult ||
@@ -7163,9 +7173,9 @@ var InternalState = (function () {
         var skip = _a.skip; _a.ssr; _a.onCompleted; _a.onError; _a.defaultOptions; var otherOptions = tslib.__rest(_a, ["skip", "ssr", "onCompleted", "onError", "defaultOptions"]);
         var watchQueryOptions = Object.assign(otherOptions, { query: this.query });
         if (this.renderPromises &&
-            (watchQueryOptions.fetchPolicy === 'network-only' ||
-                watchQueryOptions.fetchPolicy === 'cache-and-network')) {
-            watchQueryOptions.fetchPolicy = 'cache-first';
+            (watchQueryOptions.fetchPolicy === "network-only" ||
+                watchQueryOptions.fetchPolicy === "cache-and-network")) {
+            watchQueryOptions.fetchPolicy = "cache-first";
         }
         if (!watchQueryOptions.variables) {
             watchQueryOptions.variables = {};
@@ -7174,7 +7184,7 @@ var InternalState = (function () {
             var _c = watchQueryOptions.fetchPolicy, fetchPolicy = _c === void 0 ? this.getDefaultFetchPolicy() : _c, _d = watchQueryOptions.initialFetchPolicy, initialFetchPolicy = _d === void 0 ? fetchPolicy : _d;
             Object.assign(watchQueryOptions, {
                 initialFetchPolicy: initialFetchPolicy,
-                fetchPolicy: 'standby',
+                fetchPolicy: "standby",
             });
         }
         else if (!watchQueryOptions.fetchPolicy) {
@@ -7193,11 +7203,11 @@ var InternalState = (function () {
     InternalState.prototype.onCompleted = function (data) { };
     InternalState.prototype.onError = function (error) { };
     InternalState.prototype.useObservableQuery = function () {
-        var obsQuery = this.observable =
-            this.renderPromises
-                && this.renderPromises.getSSRObservable(this.watchQueryOptions)
-                || this.observable
-                || this.client.watchQuery(this.getObsQueryOptions());
+        var obsQuery = (this.observable =
+            (this.renderPromises &&
+                this.renderPromises.getSSRObservable(this.watchQueryOptions)) ||
+                this.observable ||
+                this.client.watchQuery(this.getObsQueryOptions()));
         this.obsQueryFields = React__namespace.useMemo(function () { return ({
             refetch: obsQuery.refetch.bind(obsQuery),
             reobserve: obsQuery.reobserve.bind(obsQuery),
@@ -7207,8 +7217,7 @@ var InternalState = (function () {
             stopPolling: obsQuery.stopPolling.bind(obsQuery),
             subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
         }); }, [obsQuery]);
-        var ssrAllowed = !(this.queryHookOptions.ssr === false ||
-            this.queryHookOptions.skip);
+        var ssrAllowed = !(this.queryHookOptions.ssr === false || this.queryHookOptions.skip);
         if (this.renderPromises && ssrAllowed) {
             this.renderPromises.registerSSRObservable(obsQuery);
             if (obsQuery.getCurrentResult().loading) {
@@ -7230,7 +7239,8 @@ var InternalState = (function () {
         var _this = this;
         if (!result.loading) {
             var error_1 = this.toApolloError(result);
-            Promise.resolve().then(function () {
+            Promise.resolve()
+                .then(function () {
                 if (error_1) {
                     _this.onError(error_1);
                 }
@@ -7239,7 +7249,8 @@ var InternalState = (function () {
                     result.networkStatus === exports.NetworkStatus.ready) {
                     _this.onCompleted(result.data);
                 }
-            }).catch(function (error) {
+            })
+                .catch(function (error) {
                 globalThis.__DEV__ !== false && invariant.warn(error);
             });
         }
@@ -7251,7 +7262,7 @@ var InternalState = (function () {
     };
     InternalState.prototype.getCurrentResult = function () {
         if (!this.result) {
-            this.handleErrorOrCompleted(this.result = this.observable.getCurrentResult());
+            this.handleErrorOrCompleted((this.result = this.observable.getCurrentResult()));
         }
         return this.result;
     };
@@ -7260,7 +7271,7 @@ var InternalState = (function () {
         if (queryResult)
             return queryResult;
         var data = result.data; result.partial; var resultWithoutPartial = tslib.__rest(result, ["data", "partial"]);
-        this.toQueryResultCache.set(result, queryResult = tslib.__assign(tslib.__assign(tslib.__assign({ data: data }, resultWithoutPartial), this.obsQueryFields), { client: this.client, observable: this.observable, variables: this.observable.variables, called: !this.queryHookOptions.skip, previousData: this.previousData }));
+        this.toQueryResultCache.set(result, (queryResult = tslib.__assign(tslib.__assign(tslib.__assign({ data: data }, resultWithoutPartial), this.obsQueryFields), { client: this.client, observable: this.observable, variables: this.observable.variables, called: !this.queryHookOptions.skip, previousData: this.previousData })));
         if (!queryResult.error && isNonEmptyArray(result.errors)) {
             queryResult.error = new ApolloError({ graphQLErrors: result.errors });
         }
@@ -7271,7 +7282,7 @@ var InternalState = (function () {
             this.queryHookOptions.partialRefetch &&
             !result.loading &&
             (!result.data || Object.keys(result.data).length === 0) &&
-            this.observable.options.fetchPolicy !== 'cache-only') {
+            this.observable.options.fetchPolicy !== "cache-only") {
             Object.assign(result, {
                 loading: true,
                 networkStatus: exports.NetworkStatus.refetch,
@@ -7283,12 +7294,12 @@ var InternalState = (function () {
 }());
 
 var EAGER_METHODS = [
-    'refetch',
-    'reobserve',
-    'fetchMore',
-    'updateQuery',
-    'startPolling',
-    'subscribeToMore',
+    "refetch",
+    "reobserve",
+    "fetchMore",
+    "updateQuery",
+    "startPolling",
+    "subscribeToMore",
 ];
 function useLazyQuery(query, options) {
     var _a;
@@ -7313,7 +7324,7 @@ function useLazyQuery(query, options) {
             eagerMethods[key] = function () {
                 if (!execOptionsRef.current) {
                     execOptionsRef.current = Object.create(null);
-                    internalState.forceUpdate();
+                    internalState.forceUpdateState();
                 }
                 return method.apply(this, arguments);
             };
@@ -7326,7 +7337,8 @@ function useLazyQuery(query, options) {
     }, []);
     Object.assign(result, eagerMethods);
     var execute = React__namespace.useCallback(function (executeOptions) {
-        execOptionsRef.current = executeOptions ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
+        execOptionsRef.current = executeOptions
+            ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
             fetchPolicy: initialFetchPolicy,
         };
         var options = mergeOptions(optionsRef.current, tslib.__assign({ query: queryRef.current }, execOptionsRef.current));
@@ -7363,23 +7375,31 @@ function useMutation(mutation, options) {
         var _a = ref.current, options = _a.options, mutation = _a.mutation;
         var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
         var client = executeOptions.client || ref.current.client;
-        if (!ref.current.result.loading && !baseOptions.ignoreResults && ref.current.isMounted) {
-            setResult(ref.current.result = {
+        if (!ref.current.result.loading &&
+            !baseOptions.ignoreResults &&
+            ref.current.isMounted) {
+            setResult((ref.current.result = {
                 loading: true,
                 error: void 0,
                 data: void 0,
                 called: true,
                 client: client,
-            });
+            }));
         }
         var mutationId = ++ref.current.mutationId;
         var clientOptions = mergeOptions(baseOptions, executeOptions);
-        return client.mutate(clientOptions).then(function (response) {
-            var _a;
+        return client
+            .mutate(clientOptions)
+            .then(function (response) {
+            var _a, _b;
             var data = response.data, errors = response.errors;
             var error = errors && errors.length > 0
                 ? new ApolloError({ graphQLErrors: errors })
                 : void 0;
+            var onError = executeOptions.onError || ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError);
+            if (error && onError) {
+                onError(error, clientOptions);
+            }
             if (mutationId === ref.current.mutationId &&
                 !clientOptions.ignoreResults) {
                 var result_1 = {
@@ -7390,16 +7410,18 @@ function useMutation(mutation, options) {
                     client: client,
                 };
                 if (ref.current.isMounted && !equal.equal(ref.current.result, result_1)) {
-                    setResult(ref.current.result = result_1);
+                    setResult((ref.current.result = result_1));
                 }
             }
-            var onCompleted = executeOptions.onCompleted || ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onCompleted);
-            onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(response.data, clientOptions);
+            var onCompleted = executeOptions.onCompleted || ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onCompleted);
+            if (!error) {
+                onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(response.data, clientOptions);
+            }
             return response;
-        }).catch(function (error) {
+        })
+            .catch(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,
@@ -7408,7 +7430,7 @@ function useMutation(mutation, options) {
                     client: client,
                 };
                 if (!equal.equal(ref.current.result, result_2)) {
-                    setResult(ref.current.result = result_2);
+                    setResult((ref.current.result = result_2));
                 }
             }
             var onError = executeOptions.onError || ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError);
@@ -7473,11 +7495,12 @@ function useSubscription(subscription, options) {
     React__namespace.useEffect(function () {
         var _a, _b, _c, _d;
         var shouldResubscribe = options === null || options === void 0 ? void 0 : options.shouldResubscribe;
-        if (typeof shouldResubscribe === 'function') {
+        if (typeof shouldResubscribe === "function") {
             shouldResubscribe = !!shouldResubscribe(options);
         }
         if (options === null || options === void 0 ? void 0 : options.skip) {
-            if (!(options === null || options === void 0 ? void 0 : options.skip) !== !((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.skip) || canResetObservableRef.current) {
+            if (!(options === null || options === void 0 ? void 0 : options.skip) !== !((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.skip) ||
+                canResetObservableRef.current) {
                 setResult({
                     loading: false,
                     data: void 0,
@@ -7532,13 +7555,13 @@ function useSubscription(subscription, options) {
                 if ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onData) {
                     ref.current.options.onData({
                         client: client,
-                        data: result
+                        data: result,
                     });
                 }
                 else if ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onSubscriptionData) {
                     ref.current.options.onSubscriptionData({
                         client: client,
-                        subscriptionData: result
+                        subscriptionData: result,
                     });
                 }
             },
@@ -7605,12 +7628,17 @@ function useFragment(options) {
             : (resultRef.current = latestDiffToResult);
     };
     return useSyncExternalStore(function (forceUpdate) {
-        return cache.watch(tslib.__assign(tslib.__assign({}, diffOptions), { immediate: true, callback: function (diff) {
+        var lastTimeout = 0;
+        var unsubcribe = cache.watch(tslib.__assign(tslib.__assign({}, diffOptions), { immediate: true, callback: function (diff) {
                 if (!equal.equal(diff, latestDiff)) {
                     resultRef.current = diffToResult((latestDiff = diff));
-                    forceUpdate();
+                    lastTimeout = setTimeout(forceUpdate);
                 }
             } }));
+        return function () {
+            unsubcribe();
+            clearTimeout(lastTimeout);
+        };
     }, getSnapshot, getSnapshot);
 }
 function diffToResult(diff) {
@@ -7632,41 +7660,46 @@ function useDeepMemo(memoFn, deps) {
     return ref.current.value;
 }
 
-var useKey = 'use';
+var useKey = "use";
 var realHook = React__namespace[useKey];
 var __use = realHook ||
     function __use(promise) {
         var statefulPromise = wrapPromiseWithState(promise);
         switch (statefulPromise.status) {
-            case 'pending':
+            case "pending":
                 throw statefulPromise;
-            case 'rejected':
+            case "rejected":
                 throw statefulPromise.reason;
-            case 'fulfilled':
+            case "fulfilled":
                 return statefulPromise.value;
         }
     };
 
 var QUERY_REFERENCE_SYMBOL = Symbol();
+function wrapQueryRef(internalQueryRef) {
+    var _a;
+    return _a = {}, _a[QUERY_REFERENCE_SYMBOL] = internalQueryRef, _a;
+}
+function unwrapQueryRef(queryRef) {
+    return queryRef[QUERY_REFERENCE_SYMBOL];
+}
 var OBSERVED_CHANGED_OPTIONS = [
-    'canonizeResults',
-    'context',
-    'errorPolicy',
-    'fetchPolicy',
-    'refetchWritePolicy',
-    'returnPartialData',
+    "canonizeResults",
+    "context",
+    "errorPolicy",
+    "fetchPolicy",
+    "refetchWritePolicy",
+    "returnPartialData",
 ];
 var InternalQueryReference = (function () {
     function InternalQueryReference(observable, options) {
         var _this = this;
         var _a;
         this.listeners = new Set();
-        this.status = 'loading';
+        this.status = "loading";
         this.references = 0;
-        this.listen = this.listen.bind(this);
         this.handleNext = this.handleNext.bind(this);
         this.handleError = this.handleError.bind(this);
-        this.initiateFetch = this.initiateFetch.bind(this);
         this.dispose = this.dispose.bind(this);
         this.observable = observable;
         this.result = observable.getCurrentResult(false);
@@ -7678,7 +7711,7 @@ var InternalQueryReference = (function () {
             (this.result.data &&
                 (!this.result.partial || this.watchQueryOptions.returnPartialData))) {
             this.promise = createFulfilledPromise(this.result);
-            this.status = 'idle';
+            this.status = "idle";
         }
         else {
             this.promise = new Promise(function (resolve, reject) {
@@ -7730,10 +7763,9 @@ var InternalQueryReference = (function () {
     };
     InternalQueryReference.prototype.applyOptions = function (watchQueryOptions) {
         var _a = this.watchQueryOptions, currentFetchPolicy = _a.fetchPolicy, currentCanonizeResults = _a.canonizeResults;
-        if (currentFetchPolicy === 'standby' &&
+        if (currentFetchPolicy === "standby" &&
             currentFetchPolicy !== watchQueryOptions.fetchPolicy) {
-            this.observable.reobserve(watchQueryOptions);
-            this.initiateFetch();
+            this.initiateFetch(this.observable.reobserve(watchQueryOptions));
         }
         else {
             this.observable.silentSetOptions(watchQueryOptions);
@@ -7752,14 +7784,10 @@ var InternalQueryReference = (function () {
         };
     };
     InternalQueryReference.prototype.refetch = function (variables) {
-        var promise = this.observable.refetch(variables);
-        this.initiateFetch();
-        return promise;
+        return this.initiateFetch(this.observable.refetch(variables));
     };
     InternalQueryReference.prototype.fetchMore = function (options) {
-        var promise = this.observable.fetchMore(options);
-        this.initiateFetch();
-        return promise;
+        return this.initiateFetch(this.observable.fetchMore(options));
     };
     InternalQueryReference.prototype.dispose = function () {
         this.subscription.unsubscribe();
@@ -7770,16 +7798,16 @@ var InternalQueryReference = (function () {
     InternalQueryReference.prototype.handleNext = function (result) {
         var _a;
         switch (this.status) {
-            case 'loading': {
+            case "loading": {
                 if (result.data === void 0) {
                     result.data = this.result.data;
                 }
-                this.status = 'idle';
+                this.status = "idle";
                 this.result = result;
                 (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, result);
                 break;
             }
-            case 'idle': {
+            case "idle": {
                 if (result.data === this.result.data) {
                     return;
                 }
@@ -7796,12 +7824,12 @@ var InternalQueryReference = (function () {
     InternalQueryReference.prototype.handleError = function (error) {
         var _a;
         switch (this.status) {
-            case 'loading': {
-                this.status = 'idle';
+            case "loading": {
+                this.status = "idle";
                 (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, error);
                 break;
             }
-            case 'idle': {
+            case "idle": {
                 this.promise = createRejectedPromise(error);
                 this.deliver(this.promise);
             }
@@ -7810,14 +7838,25 @@ var InternalQueryReference = (function () {
     InternalQueryReference.prototype.deliver = function (promise) {
         this.listeners.forEach(function (listener) { return listener(promise); });
     };
-    InternalQueryReference.prototype.initiateFetch = function () {
+    InternalQueryReference.prototype.initiateFetch = function (returnedPromise) {
         var _this = this;
-        this.status = 'loading';
+        this.status = "loading";
         this.promise = new Promise(function (resolve, reject) {
             _this.resolve = resolve;
             _this.reject = reject;
         });
         this.promise.catch(function () { });
+        returnedPromise
+            .then(function (result) {
+            var _a;
+            if (_this.status === "loading") {
+                _this.status = "idle";
+                _this.result = result;
+                (_a = _this.resolve) === null || _a === void 0 ? void 0 : _a.call(_this, result);
+            }
+        })
+            .catch(function () { });
+        return returnedPromise;
     };
     return InternalQueryReference;
 }());
@@ -7844,7 +7883,7 @@ var SuspenseCache$1 = (function () {
     return SuspenseCache;
 }());
 
-var suspenseCacheSymbol = Symbol.for('apollo.suspenseCache');
+var suspenseCacheSymbol = Symbol.for("apollo.suspenseCache");
 function getSuspenseCache(client) {
     var _a;
     if (!client[suspenseCacheSymbol]) {
@@ -7857,13 +7896,15 @@ var SuspenseCache = (function (_super) {
     tslib.__extends(SuspenseCache, _super);
     function SuspenseCache() {
         _super.call(this) || this;
-        throw new Error('It is no longer necessary to create a `SuspenseCache` instance and pass it into the `ApolloProvider`.\n' +
-            'Please remove this code from your application. \n\n' +
-            'This export will be removed with the final 3.8 release.');
+        throw new Error("It is no longer necessary to create a `SuspenseCache` instance and pass it into the `ApolloProvider`.\n" +
+            "Please remove this code from your application. \n\n" +
+            "This export will be removed with the final 3.8 release.");
     }
     return SuspenseCache;
 }(SuspenseCache$1));
 
+var skipToken = Symbol.for('apollo.skipToken');
+
 function useSuspenseQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
@@ -7909,7 +7950,7 @@ function useSuspenseQuery(query, options) {
             error: error,
         };
     }, [queryRef.result]);
-    var result = fetchPolicy === 'standby' ? skipResult : __use(promise);
+    var result = fetchPolicy === "standby" ? skipResult : __use(promise);
     var fetchMore = React__namespace.useCallback(function (options) {
         var promise = queryRef.fetchMore(options);
         setPromiseCache(function (previousPromiseCache) {
@@ -7944,17 +7985,17 @@ function validateOptions(options) {
     validatePartialDataReturn(fetchPolicy, returnPartialData);
 }
 function validateFetchPolicy(fetchPolicy) {
-    if (fetchPolicy === void 0) { fetchPolicy = 'cache-first'; }
+    if (fetchPolicy === void 0) { fetchPolicy = "cache-first"; }
     var supportedFetchPolicies = [
-        'cache-first',
-        'network-only',
-        'no-cache',
-        'cache-and-network',
+        "cache-first",
+        "network-only",
+        "no-cache",
+        "cache-and-network",
     ];
     invariant(supportedFetchPolicies.includes(fetchPolicy), 54, fetchPolicy);
 }
 function validatePartialDataReturn(fetchPolicy, returnPartialData) {
-    if (fetchPolicy === 'no-cache' && returnPartialData) {
+    if (fetchPolicy === "no-cache" && returnPartialData) {
         globalThis.__DEV__ !== false && invariant.warn(55);
     }
 }
@@ -7967,15 +8008,18 @@ function useWatchQueryOptions(_a) {
     var client = _a.client, query = _a.query, options = _a.options;
     return useDeepMemo(function () {
         var _a;
+        if (options === skipToken) {
+            return { query: query, fetchPolicy: "standby" };
+        }
         var fetchPolicy = options.fetchPolicy ||
             ((_a = client.defaultOptions.watchQuery) === null || _a === void 0 ? void 0 : _a.fetchPolicy) ||
-            'cache-first';
+            "cache-first";
         var watchQueryOptions = tslib.__assign(tslib.__assign({}, options), { fetchPolicy: fetchPolicy, query: query, notifyOnNetworkStatusChange: false, nextFetchPolicy: void 0 });
         if (globalThis.__DEV__ !== false) {
             validateOptions(watchQueryOptions);
         }
         if (options.skip) {
-            watchQueryOptions.fetchPolicy = 'standby';
+            watchQueryOptions.fetchPolicy = "standby";
         }
         return watchQueryOptions;
     }, [client, options, query]);
@@ -7986,8 +8030,10 @@ function useBackgroundQuery(query, options) {
     var client = useApolloClient(options.client);
     var suspenseCache = getSuspenseCache(client);
     var watchQueryOptions = useWatchQueryOptions({ client: client, query: query, options: options });
-    var variables = watchQueryOptions.variables;
+    var fetchPolicy = watchQueryOptions.fetchPolicy, variables = watchQueryOptions.variables;
     var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
+    var didFetchResult = React__namespace.useRef(fetchPolicy !== "standby");
+    didFetchResult.current || (didFetchResult.current = fetchPolicy !== "standby");
     var cacheKey = tslib.__spreadArray([
         query,
         canonicalStringify(variables)
@@ -8016,45 +8062,27 @@ function useBackgroundQuery(query, options) {
         return promise;
     }, [queryRef]);
     queryRef.promiseCache = promiseCache;
-    return React__namespace.useMemo(function () {
-        var _a;
-        return [
-            (_a = {}, _a[QUERY_REFERENCE_SYMBOL] = queryRef, _a),
-            {
-                fetchMore: fetchMore,
-                refetch: refetch,
-            },
-        ];
-    }, [queryRef, fetchMore, refetch]);
+    var wrappedQueryRef = React__namespace.useMemo(function () { return wrapQueryRef(queryRef); }, [queryRef]);
+    return [
+        didFetchResult.current ? wrappedQueryRef : void 0,
+        { fetchMore: fetchMore, refetch: refetch },
+    ];
 }
 
 function useReadQuery(queryRef) {
-    var _a = React__namespace.useState(0), forceUpdate = _a[1];
-    var internalQueryRef = queryRef[QUERY_REFERENCE_SYMBOL];
-    invariant__default(internalQueryRef.promiseCache, 49);
-    var skipResult = React__namespace.useMemo(function () {
-        var error = toApolloError(internalQueryRef.result);
-        return {
-            loading: false,
-            data: internalQueryRef.result.data,
-            networkStatus: error ? exports.NetworkStatus.error : exports.NetworkStatus.ready,
-            error: error,
-        };
-    }, [internalQueryRef.result]);
-    var promise = internalQueryRef.promiseCache.get(internalQueryRef.key);
-    if (!promise) {
-        promise = internalQueryRef.promise;
-        internalQueryRef.promiseCache.set(internalQueryRef.key, promise);
+    var internalQueryRef = unwrapQueryRef(queryRef);
+    invariant(internalQueryRef.promiseCache, 49);
+    var promiseCache = internalQueryRef.promiseCache, key = internalQueryRef.key;
+    if (!promiseCache.has(key)) {
+        promiseCache.set(key, internalQueryRef.promise);
     }
-    React__namespace.useEffect(function () {
+    var promise = useSyncExternalStore(React__namespace.useCallback(function (forceUpdate) {
         return internalQueryRef.listen(function (promise) {
             internalQueryRef.promiseCache.set(internalQueryRef.key, promise);
-            forceUpdate(function (prevState) { return prevState + 1; });
+            forceUpdate();
         });
-    }, [queryRef]);
-    var result = internalQueryRef.watchQueryOptions.fetchPolicy === 'standby'
-        ? skipResult
-        : __use(promise);
+    }, [internalQueryRef]), function () { return promiseCache.get(key); }, function () { return promiseCache.get(key); });
+    var result = __use(promise);
     return React__namespace.useMemo(function () {
         return {
             data: result.data,
@@ -8064,7 +8092,7 @@ function useReadQuery(queryRef) {
     }, [result]);
 }
 
-exports.setLogVerbosity = invariant$1.setVerbosity;
+exports.setLogVerbosity = tsInvariant.setVerbosity;
 exports.Observable = zenObservableTs.Observable;
 exports.disableExperimentalFragmentVariables = graphqlTag.disableExperimentalFragmentVariables;
 exports.disableFragmentWarnings = graphqlTag.disableFragmentWarnings;
@@ -8111,6 +8139,7 @@ exports.selectHttpOptionsAndBody = selectHttpOptionsAndBody;
 exports.selectHttpOptionsAndBodyInternal = selectHttpOptionsAndBodyInternal;
 exports.selectURI = selectURI;
 exports.serializeFetchParameter = serializeFetchParameter;
+exports.skipToken = skipToken;
 exports.split = split;
 exports.throwServerError = throwServerError;
 exports.toPromise = toPromise;