@apollo/client 3.6.0-beta.3 → 3.6.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client",
-  "version": "3.6.0-beta.3",
+  "version": "3.6.0-beta.4",
   "description": "A fully-featured caching GraphQL client.",
   "private": false,
   "keywords": [
@@ -30,18 +30,18 @@
   "homepage": "https://www.apollographql.com/docs/react/",
   "peerDependencies": {
     "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0-beta",
-    "subscriptions-transport-ws": "^0.9.0 || ^0.11.0",
-    "use-sync-external-store": "^1.0.0-beta-4ff5f5719-20211115"
+    "graphql-ws": "^5.5.5",
+    "react": "^16.8.0 || ^17.0.0",
+    "subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
   },
   "peerDependenciesMeta": {
-    "react": {
+    "graphql-ws": {
       "optional": true
     },
-    "subscriptions-transport-ws": {
+    "react": {
       "optional": true
     },
-    "use-sync-external-store": {
+    "subscriptions-transport-ws": {
       "optional": true
     }
   },
@@ -55,12 +55,12 @@
     "optimism": "^0.16.1",
     "prop-types": "^15.7.2",
     "symbol-observable": "^4.0.0",
-    "ts-invariant": "^0.9.0",
+    "ts-invariant": "^0.9.4",
     "tslib": "^2.3.0",
     "zen-observable-ts": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/parser": "7.16.4",
+    "@babel/parser": "7.16.12",
     "@graphql-tools/schema": "8.3.1",
     "@rollup/plugin-node-resolve": "11.2.1",
     "@testing-library/react": "12.1.2",
@@ -69,33 +69,34 @@
     "@types/fetch-mock": "7.3.5",
     "@types/glob": "7.2.0",
     "@types/hoist-non-react-statics": "3.3.1",
-    "@types/jest": "27.0.3",
-    "@types/lodash": "4.14.177",
-    "@types/node": "16.11.9",
+    "@types/jest": "27.4.0",
+    "@types/lodash": "4.14.178",
+    "@types/node": "16.11.21",
     "@types/react": "17.0.34",
     "@types/react-dom": "17.0.2",
-    "@types/use-sync-external-store": "^0.0.3",
+    "acorn": "8.6.0",
     "bundlesize": "0.18.1",
-    "cross-fetch": "3.1.4",
+    "cross-fetch": "3.1.5",
     "crypto-hash": "1.3.0",
     "fetch-mock": "9.11.0",
     "glob": "7.2.0",
     "graphql": "16.0.1",
-    "jest": "27.3.1",
+    "graphql-ws": "5.5.5",
+    "jest": "27.4.7",
     "jest-fetch-mock": "3.0.3",
     "jest-junit": "13.0.0",
     "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "recast": "0.20.5",
-    "resolve": "1.20.0",
+    "recast": "0.21.0",
+    "resolve": "1.22.0",
     "rimraf": "3.0.2",
-    "rollup": "2.60.0",
+    "rollup": "2.66.1",
     "rollup-plugin-terser": "7.0.2",
     "rxjs": "6.6.7",
     "subscriptions-transport-ws": "0.11.0",
     "terser": "5.10.0",
-    "ts-jest": "27.0.7",
+    "ts-jest": "27.1.3",
     "ts-node": "10.4.0",
     "typescript": "4.5.2",
     "wait-for-observables": "1.0.3",

package/react/hooks/hooks.cjs

@@ -6,18 +6,17 @@ var globals = require('../../utilities/globals');
 var react = require('react');
 var context = require('../context');
 var tslib = require('tslib');
-var shim = require('use-sync-external-store/shim');
 var equality = require('@wry/equality');
-var errors = require('../../errors');
 var core = require('../../core');
+var errors = require('../../errors');
 var parser = require('../parser');
 
 function useApolloClient(override) {
     var context$1 = react.useContext(context.getApolloContext());
     var client = override || context$1.client;
     __DEV__ ? globals.invariant(!!client, 'Could not find "client" in the context or passed in as an option. ' +
-        'Wrap the root component in an <ApolloProvider>, or pass an ApolloClient' +
-        'ApolloClient instance in via options.') : globals.invariant(!!client, 29);
+        'Wrap the root component in an <ApolloProvider>, or pass an ApolloClient ' +
+        'instance in via options.') : globals.invariant(!!client, 29);
     return client;
 }
 
@@ -25,15 +24,10 @@ function useQuery(query, options) {
     var _a;
     var context$1 = react.useContext(context.getApolloContext());
     var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
+    var defaultWatchQueryOptions = client.defaultOptions.watchQuery;
     parser.verifyDocumentType(query, parser.DocumentType.Query);
-    var ref = react.useRef({
-        client: client,
-        query: query,
-        options: options,
-        watchQueryOptions: createWatchQueryOptions(query, options),
-    });
     var _b = react.useState(function () {
-        var watchQueryOptions = createWatchQueryOptions(query, options);
+        var watchQueryOptions = createWatchQueryOptions(query, options, defaultWatchQueryOptions);
         var obsQuery = null;
         if (context$1.renderPromises) {
             obsQuery = context$1.renderPromises.getSSRObservable(watchQueryOptions);
@@ -49,7 +43,7 @@ function useQuery(query, options) {
             !(options === null || options === void 0 ? void 0 : options.skip) &&
             obsQuery.getCurrentResult().loading) {
             context$1.renderPromises.addQueryPromise({
-                getOptions: function () { return createWatchQueryOptions(query, options); },
+                getOptions: function () { return createWatchQueryOptions(query, options, defaultWatchQueryOptions); },
                 fetchData: function () { return new Promise(function (resolve) {
                     var sub = obsQuery.subscribe({
                         next: function (result) {
@@ -71,96 +65,112 @@ function useQuery(query, options) {
         }
         return obsQuery;
     }), obsQuery = _b[0], setObsQuery = _b[1];
+    var _c = react.useState(function () {
+        var _a, _b;
+        var result = obsQuery.getCurrentResult();
+        if (!result.loading && options) {
+            if (result.error) {
+                (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, result.error);
+            }
+            else if (result.data) {
+                (_b = options.onCompleted) === null || _b === void 0 ? void 0 : _b.call(options, result.data);
+            }
+        }
+        return result;
+    }), result = _c[0], setResult = _c[1];
+    var ref = react.useRef({
+        client: client,
+        query: query,
+        options: options,
+        result: result,
+        previousData: void 0,
+        watchQueryOptions: createWatchQueryOptions(query, options, defaultWatchQueryOptions),
+    });
     react.useEffect(function () {
-        var watchQueryOptions = createWatchQueryOptions(query, options);
+        var _a, _b;
+        var watchQueryOptions = createWatchQueryOptions(query, options, defaultWatchQueryOptions);
+        var nextResult;
         if (ref.current.client !== client || !equality.equal(ref.current.query, query)) {
             var obsQuery_1 = client.watchQuery(watchQueryOptions);
             setObsQuery(obsQuery_1);
+            nextResult = obsQuery_1.getCurrentResult();
         }
         else if (!equality.equal(ref.current.watchQueryOptions, watchQueryOptions)) {
-            obsQuery.setOptions(watchQueryOptions);
-            setObsQuery(obsQuery);
+            obsQuery.setOptions(watchQueryOptions).catch(function () { });
+            nextResult = obsQuery.getCurrentResult();
+            ref.current.watchQueryOptions = watchQueryOptions;
         }
-        Object.assign(ref.current, {
-            client: client,
-            query: query,
-            options: options,
-            watchQueryOptions: watchQueryOptions,
-        });
-    }, [obsQuery, client, query, options]);
-    var _c = react.useMemo(function () {
-        var previousResult;
-        var subscribe = function (forceUpdate) {
-            var subscription = obsQuery.subscribe(forceUpdate, onError);
-            function onError(error) {
-                forceUpdate();
-                subscription.unsubscribe();
-                var last = obsQuery["last"];
-                obsQuery.resetLastResults();
-                obsQuery.subscribe(forceUpdate, onError);
-                obsQuery["last"] = last;
-                if (!error.hasOwnProperty('graphQLErrors')) {
-                    throw error;
-                }
+        if (nextResult) {
+            var previousResult = ref.current.result;
+            if (previousResult.data) {
+                ref.current.previousData = previousResult.data;
             }
-            return function () {
-                subscription.unsubscribe();
-            };
-        };
-        var getSnapshot = function () {
-            var result = obsQuery.getCurrentResult();
-            if (result.errors && result.errors.length) {
-                result = tslib.__assign(tslib.__assign({}, result), { error: result.error || new errors.ApolloError({ graphQLErrors: result.errors }) });
-            }
-            if (!previousResult ||
-                previousResult.loading !== result.loading ||
-                previousResult.networkStatus !== result.networkStatus ||
-                !equality.equal(previousResult.data, result.data) ||
-                !equality.equal(previousResult.error, result.error)) {
-                if (previousResult) {
-                    result = tslib.__assign(tslib.__assign({}, result), { previousData: previousResult.data || previousResult.previousData });
+            setResult(ref.current.result = nextResult);
+            if (!nextResult.loading && options) {
+                if (nextResult.error) {
+                    (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, nextResult.error);
+                }
+                else if (nextResult.data) {
+                    (_b = options.onCompleted) === null || _b === void 0 ? void 0 : _b.call(options, nextResult.data);
                 }
-                previousResult = result;
             }
-            return previousResult;
-        };
-        return [subscribe, getSnapshot];
-    }, [obsQuery]), subscribe = _c[0], getSnapshot = _c[1];
-    var obsQueryMethods = react.useMemo(function () { return ({
-        refetch: obsQuery.refetch.bind(obsQuery),
-        fetchMore: obsQuery.fetchMore.bind(obsQuery),
-        updateQuery: obsQuery.updateQuery.bind(obsQuery),
-        startPolling: obsQuery.startPolling.bind(obsQuery),
-        stopPolling: obsQuery.stopPolling.bind(obsQuery),
-        subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
-    }); }, [obsQuery]);
-    var result = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+        }
+        Object.assign(ref.current, { client: client, query: query });
+    }, [obsQuery, client, query, options]);
     react.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.skip) ||
-            ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.fetchPolicy) === 'standby') {
+        if (context$1.renderPromises) {
             return;
         }
-        if (!result.loading) {
-            if (result.error) {
-                (_d = (_c = ref.current.options) === null || _c === void 0 ? void 0 : _c.onError) === null || _d === void 0 ? void 0 : _d.call(_c, result.error);
+        var subscription = obsQuery.subscribe(onNext, onError);
+        function onNext() {
+            var _a, _b;
+            var previousResult = ref.current.result;
+            var result = obsQuery.getCurrentResult();
+            if (previousResult &&
+                previousResult.loading === result.loading &&
+                previousResult.networkStatus === result.networkStatus &&
+                equality.equal(previousResult.data, result.data)) {
+                return;
             }
-            else if (result.data) {
-                (_f = (_e = ref.current.options) === null || _e === void 0 ? void 0 : _e.onCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, result.data);
+            if (previousResult.data) {
+                ref.current.previousData = previousResult.data;
+            }
+            setResult(ref.current.result = result);
+            if (!result.loading) {
+                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onCompleted) === null || _b === void 0 ? void 0 : _b.call(_a, result.data);
+            }
+        }
+        function onError(error) {
+            var _a, _b;
+            var last = obsQuery["last"];
+            subscription.unsubscribe();
+            try {
+                obsQuery.resetLastResults();
+                subscription = obsQuery.subscribe(onNext, onError);
+            }
+            finally {
+                obsQuery["last"] = last;
+            }
+            if (!error.hasOwnProperty('graphQLErrors')) {
+                throw error;
+            }
+            var previousResult = ref.current.result;
+            if ((previousResult && previousResult.loading) ||
+                !equality.equal(error, previousResult.error)) {
+                setResult(ref.current.result = {
+                    data: previousResult.data,
+                    error: error,
+                    loading: false,
+                    networkStatus: core.NetworkStatus.error,
+                });
+                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
             }
         }
-    }, [result]);
+        return function () { return subscription.unsubscribe(); };
+    }, [obsQuery, context$1.renderPromises, client.disableNetworkFetches]);
     var partial;
     (_a = result, partial = _a.partial, result = tslib.__rest(_a, ["partial"]));
-    if ((options === null || options === void 0 ? void 0 : options.skip) || (options === null || options === void 0 ? void 0 : options.fetchPolicy) === 'standby') {
-        result = {
-            loading: false,
-            data: void 0,
-            error: void 0,
-            networkStatus: core.NetworkStatus.ready,
-        };
-    }
-    else {
+    {
         if (partial &&
             (options === null || options === void 0 ? void 0 : options.partialRefetch) &&
             !result.loading &&
@@ -169,17 +179,52 @@ function useQuery(query, options) {
             result = tslib.__assign(tslib.__assign({}, result), { loading: true, networkStatus: core.NetworkStatus.refetch });
             obsQuery.refetch();
         }
-        if (context$1.renderPromises && (options === null || options === void 0 ? void 0 : options.ssr) !== false && result.loading) {
-            obsQuery.setOptions(createWatchQueryOptions(query, options))
-                .catch(function () { });
+        if (context$1.renderPromises &&
+            (options === null || options === void 0 ? void 0 : options.ssr) !== false &&
+            !(options === null || options === void 0 ? void 0 : options.skip) &&
+            result.loading) {
+            obsQuery.setOptions(createWatchQueryOptions(query, options, defaultWatchQueryOptions)).catch(function () { });
         }
+        Object.assign(ref.current, { options: options });
+    }
+    if ((context$1.renderPromises || client.disableNetworkFetches) &&
+        (options === null || options === void 0 ? void 0 : options.ssr) === false) {
+        result = ref.current.result = {
+            loading: true,
+            data: void 0,
+            error: void 0,
+            networkStatus: core.NetworkStatus.loading,
+        };
+    }
+    else if ((options === null || options === void 0 ? void 0 : options.skip) || (options === null || options === void 0 ? void 0 : options.fetchPolicy) === 'standby') {
+        result = {
+            loading: false,
+            data: void 0,
+            error: void 0,
+            networkStatus: core.NetworkStatus.ready,
+        };
     }
-    return tslib.__assign(tslib.__assign(tslib.__assign({}, obsQueryMethods), { variables: obsQuery.variables, client: client, called: true }), result);
+    if (result.errors && result.errors.length) {
+        result = tslib.__assign(tslib.__assign({}, result), { error: result.error || new errors.ApolloError({ graphQLErrors: result.errors }) });
+    }
+    var obsQueryFields = react.useMemo(function () { return ({
+        refetch: obsQuery.refetch.bind(obsQuery),
+        fetchMore: obsQuery.fetchMore.bind(obsQuery),
+        updateQuery: obsQuery.updateQuery.bind(obsQuery),
+        startPolling: obsQuery.startPolling.bind(obsQuery),
+        stopPolling: obsQuery.stopPolling.bind(obsQuery),
+        subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
+    }); }, [obsQuery]);
+    return tslib.__assign(tslib.__assign(tslib.__assign({}, obsQueryFields), { variables: createWatchQueryOptions(query, options, defaultWatchQueryOptions).variables, client: client, called: true, previousData: ref.current.previousData }), result);
 }
-function createWatchQueryOptions(query, options) {
+function createWatchQueryOptions(query, options, defaultOptions) {
     var _a;
     if (options === void 0) { options = {}; }
-    var skip = options.skip; options.ssr; options.onCompleted; options.onError; options.displayName; var watchQueryOptions = tslib.__rest(options, ["skip", "ssr", "onCompleted", "onError", "displayName"]);
+    var skip = options.skip; options.ssr; options.onCompleted; options.onError; options.displayName; var otherOptions = tslib.__rest(options, ["skip", "ssr", "onCompleted", "onError", "displayName"]);
+    var watchQueryOptions = tslib.__assign({ query: query }, otherOptions);
+    if (defaultOptions) {
+        watchQueryOptions = core.mergeOptions(defaultOptions, watchQueryOptions);
+    }
     if (skip) {
         watchQueryOptions.fetchPolicy = 'standby';
     }
@@ -191,7 +236,10 @@ function createWatchQueryOptions(query, options) {
     else if (!watchQueryOptions.fetchPolicy) {
         watchQueryOptions.fetchPolicy = 'cache-first';
     }
-    return tslib.__assign({ query: query }, watchQueryOptions);
+    if (!watchQueryOptions.variables) {
+        watchQueryOptions.variables = {};
+    }
+    return watchQueryOptions;
 }
 
 var EAGER_METHODS = [
@@ -204,36 +252,16 @@ var EAGER_METHODS = [
 function useLazyQuery(query, options) {
     var _a = react.useState({
         called: false,
-        resolves: [],
     }), execution = _a[0], setExecution = _a[1];
-    var execute = react.useCallback(function (executeOptions) {
-        var resolve;
-        var promise = new Promise(function (resolve1) { return (resolve = resolve1); });
-        setExecution(function (execution) {
-            if (execution.called) {
-                result && result.refetch(executeOptions === null || executeOptions === void 0 ? void 0 : executeOptions.variables);
-            }
-            return {
-                called: true,
-                resolves: tslib.__spreadArray(tslib.__spreadArray([], execution.resolves, true), [resolve], false),
-                options: executeOptions,
-            };
-        });
-        return promise;
-    }, []);
     var result = useQuery(query, tslib.__assign(tslib.__assign(tslib.__assign({}, options), execution.options), { fetchPolicy: execution.called ? options === null || options === void 0 ? void 0 : options.fetchPolicy : 'standby', skip: undefined }));
-    react.useEffect(function () {
-        var resolves = execution.resolves;
-        if (!result.loading && resolves.length) {
-            setExecution(function (execution) { return (tslib.__assign(tslib.__assign({}, execution), { resolves: [] })); });
-            resolves.forEach(function (resolve) { return resolve(result); });
-        }
-    }, [result, execution]);
     if (!execution.called) {
         result = tslib.__assign(tslib.__assign({}, result), { loading: false, data: void 0, error: void 0, called: false });
+    }
+    var eagerMethods = react.useMemo(function () {
+        var eagerMethods = {};
         var _loop_1 = function (key) {
             var method = result[key];
-            result[key] = function () {
+            eagerMethods[key] = function () {
                 var args = [];
                 for (var _i = 0; _i < arguments.length; _i++) {
                     args[_i] = arguments[_i];
@@ -246,7 +274,20 @@ function useLazyQuery(query, options) {
             var key = EAGER_METHODS_1[_i];
             _loop_1(key);
         }
-    }
+        return eagerMethods;
+    }, []);
+    result.error = result.error || void 0;
+    Object.assign(result, eagerMethods);
+    var execute = react.useCallback(function (executeOptions) {
+        setExecution({ called: true, options: executeOptions });
+        var promise = result.refetch(executeOptions === null || executeOptions === void 0 ? void 0 : executeOptions.variables).then(function (result1) {
+            var result2 = tslib.__assign(tslib.__assign({}, result), { data: result1.data, error: result1.error, called: true, loading: false });
+            Object.assign(result2, eagerMethods);
+            return result2;
+        });
+        promise.catch(function () { });
+        return promise;
+    }, []);
     return [execute, result];
 }
 
@@ -262,82 +303,73 @@ function useMutation(mutation, options) {
         result: result,
         mutationId: 0,
         isMounted: true,
-        execute: null,
         client: client,
         mutation: mutation,
         options: options,
     });
-    var execute = react.useMemo(function () {
-        if (ref.current.execute != null &&
-            ref.current.client === client &&
-            equality.equal(options, ref.current.options) &&
-            equality.equal(mutation, ref.current.mutation)) {
-            return ref.current.execute;
+    {
+        Object.assign(ref.current, { client: client, options: options, mutation: mutation });
+    }
+    var execute = react.useCallback(function (executeOptions) {
+        if (executeOptions === void 0) { executeOptions = {}; }
+        var _a = ref.current, client = _a.client, options = _a.options, mutation = _a.mutation;
+        var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
+        if (!ref.current.result.loading && !baseOptions.ignoreResults) {
+            setResult(ref.current.result = {
+                loading: true,
+                error: void 0,
+                data: void 0,
+                called: true,
+                client: client,
+            });
         }
-        ref.current.client = client;
-        ref.current.options = options;
-        ref.current.mutation = mutation;
-        ref.current.execute = function (executeOptions) {
-            if (executeOptions === void 0) { executeOptions = {}; }
-            var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
-            if (!ref.current.result.loading && !baseOptions.ignoreResults) {
-                setResult(ref.current.result = {
-                    loading: true,
-                    error: void 0,
-                    data: void 0,
+        var mutationId = ++ref.current.mutationId;
+        var clientOptions = core.mergeOptions(baseOptions, executeOptions);
+        return client.mutate(clientOptions).then(function (response) {
+            var _a, _b;
+            var data = response.data, errors$1 = response.errors;
+            var error = errors$1 && errors$1.length > 0
+                ? new errors.ApolloError({ graphQLErrors: errors$1 })
+                : void 0;
+            if (mutationId === ref.current.mutationId &&
+                !clientOptions.ignoreResults) {
+                var result_1 = {
                     called: true,
+                    loading: false,
+                    data: data,
+                    error: error,
                     client: client,
-                });
-            }
-            var mutationId = ++ref.current.mutationId;
-            var clientOptions = core.mergeOptions(baseOptions, executeOptions);
-            return client.mutate(clientOptions).then(function (response) {
-                var _a, _b;
-                var data = response.data, errors$1 = response.errors;
-                var error = errors$1 && errors$1.length > 0
-                    ? new errors.ApolloError({ graphQLErrors: errors$1 })
-                    : void 0;
-                if (mutationId === ref.current.mutationId &&
-                    !clientOptions.ignoreResults) {
-                    var result_1 = {
-                        called: true,
-                        loading: false,
-                        data: data,
-                        error: error,
-                        client: client,
-                    };
-                    if (ref.current.isMounted && !equality.equal(ref.current.result, result_1)) {
-                        setResult(ref.current.result = result_1);
-                    }
-                }
-                (_a = baseOptions.onCompleted) === null || _a === void 0 ? void 0 : _a.call(baseOptions, response.data);
-                (_b = executeOptions.onCompleted) === null || _b === void 0 ? void 0 : _b.call(executeOptions, response.data);
-                return response;
-            }).catch(function (error) {
-                var _a, _b;
-                if (mutationId === ref.current.mutationId &&
-                    ref.current.isMounted) {
-                    var result_2 = {
-                        loading: false,
-                        error: error,
-                        data: void 0,
-                        called: true,
-                        client: client,
-                    };
-                    if (!equality.equal(ref.current.result, result_2)) {
-                        setResult(ref.current.result = result_2);
-                    }
+                };
+                if (ref.current.isMounted && !equality.equal(ref.current.result, result_1)) {
+                    setResult(ref.current.result = result_1);
                 }
-                if (baseOptions.onError || clientOptions.onError) {
-                    (_a = baseOptions.onError) === null || _a === void 0 ? void 0 : _a.call(baseOptions, error);
-                    (_b = executeOptions.onError) === null || _b === void 0 ? void 0 : _b.call(executeOptions, error);
-                    return { data: void 0, errors: error };
+            }
+            (_a = baseOptions.onCompleted) === null || _a === void 0 ? void 0 : _a.call(baseOptions, response.data);
+            (_b = executeOptions.onCompleted) === null || _b === void 0 ? void 0 : _b.call(executeOptions, response.data);
+            return response;
+        }).catch(function (error) {
+            var _a, _b;
+            if (mutationId === ref.current.mutationId &&
+                ref.current.isMounted) {
+                var result_2 = {
+                    loading: false,
+                    error: error,
+                    data: void 0,
+                    called: true,
+                    client: client,
+                };
+                if (!equality.equal(ref.current.result, result_2)) {
+                    setResult(ref.current.result = result_2);
                 }
-                throw error;
-            });
-        };
-        return ref.current.execute;
-    }, [client, mutation, options]);
+            }
+            if (baseOptions.onError || clientOptions.onError) {
+                (_a = baseOptions.onError) === null || _a === void 0 ? void 0 : _a.call(baseOptions, error);
+                (_b = executeOptions.onError) === null || _b === void 0 ? void 0 : _b.call(executeOptions, error);
+                return { data: void 0, errors: error };
+            }
+            throw error;
+        });
+    }, []);
     var reset = react.useCallback(function () {
         setResult({ called: false, loading: false, client: client });
     }, []);
@@ -374,14 +406,16 @@ function useSubscription(subscription, options) {
         if (typeof shouldResubscribe === 'function') {
             shouldResubscribe = !!shouldResubscribe(options);
         }
-        if ((options === null || options === void 0 ? void 0 : options.skip) && !(options === null || options === void 0 ? void 0 : options.skip) !== !((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.skip)) {
-            setResult({
-                loading: false,
-                data: void 0,
-                error: void 0,
-                variables: options === null || options === void 0 ? void 0 : options.variables,
-            });
-            setObservable(null);
+        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)) {
+                setResult({
+                    loading: false,
+                    data: void 0,
+                    error: void 0,
+                    variables: options === null || options === void 0 ? void 0 : options.variables,
+                });
+                setObservable(null);
+            }
         }
         else if (shouldResubscribe !== false && (client !== ref.current.client ||
             subscription !== ref.current.subscription ||