@apollo/client 3.5.3 → 3.6.0-beta.2

package/invariantErrorCodes.js

@@ -5,7 +5,7 @@
 // consult the @apollo/client/invariantErrorCodes.js file specific to
 // your @apollo/client version. This file is not meant to be imported.
 {
-  "@apollo/client version": "3.5.3",
+  "@apollo/client version": "3.6.0-beta.2",
 
   1: {
     file: "@apollo/client/cache/inmemory/entityStore.js",

package/main.cjs

@@ -7,10 +7,10 @@ var react = require('./react');
 
 
 
-Object.keys(core).forEach(function (k) {
+for (var k in core) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = core[k];
-});
-Object.keys(react).forEach(function (k) {
+}
+for (var k in react) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = react[k];
-});
+}
 //# sourceMappingURL=main.cjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client",
-  "version": "3.5.3",
+  "version": "3.6.0-beta.2",
   "description": "A fully-featured caching GraphQL client.",
   "private": false,
   "keywords": [
@@ -30,8 +30,9 @@
   "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",
-    "subscriptions-transport-ws": "^0.9.0 || ^0.11.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"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -39,6 +40,9 @@
     },
     "subscriptions-transport-ws": {
       "optional": true
+    },
+    "use-sync-external-store": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -56,20 +60,21 @@
     "zen-observable-ts": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/parser": "7.16.3",
+    "@babel/parser": "7.16.4",
     "@graphql-tools/schema": "8.3.1",
     "@rollup/plugin-node-resolve": "11.2.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@types/fast-json-stable-stringify": "2.0.0",
     "@types/fetch-mock": "7.3.5",
     "@types/glob": "7.2.0",
     "@types/hoist-non-react-statics": "3.3.1",
-    "@types/jest": "27.0.2",
-    "@types/lodash": "4.14.176",
-    "@types/node": "16.11.7",
+    "@types/jest": "27.0.3",
+    "@types/lodash": "4.14.177",
+    "@types/node": "16.11.9",
     "@types/react": "17.0.34",
     "@types/react-dom": "17.0.2",
+    "@types/use-sync-external-store": "^0.0.3",
     "bundlesize": "0.18.1",
     "cross-fetch": "3.1.4",
     "crypto-hash": "1.3.0",
@@ -85,11 +90,11 @@
     "recast": "0.20.5",
     "resolve": "1.20.0",
     "rimraf": "3.0.2",
-    "rollup": "2.50.5",
+    "rollup": "2.60.0",
     "rollup-plugin-terser": "7.0.2",
     "rxjs": "6.6.7",
     "subscriptions-transport-ws": "0.11.0",
-    "terser": "5.9.0",
+    "terser": "5.10.0",
     "ts-jest": "27.0.7",
     "ts-node": "10.4.0",
     "typescript": "4.4.4",

package/react/components/components.cjs

@@ -10,11 +10,11 @@ function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
-        Object.keys(e).forEach(function (k) {
+        for (var k in e) {
             n[k] = e[k];
-        });
+        }
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 

package/react/context/context.cjs

@@ -10,11 +10,11 @@ function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
-        Object.keys(e).forEach(function (k) {
+        for (var k in e) {
             n[k] = e[k];
-        });
+        }
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 

package/react/hoc/hoc.cjs

@@ -10,17 +10,17 @@ var hoistNonReactStatics = require('hoist-non-react-statics');
 var components = require('../components');
 var context = require('../context');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
-        Object.keys(e).forEach(function (k) {
+        for (var k in e) {
             n[k] = e[k];
-        });
+        }
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 

package/react/hooks/hooks.cjs

@@ -6,6 +6,7 @@ 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');
@@ -25,6 +26,12 @@ function useQuery(query, options) {
     var context$1 = react.useContext(context.getApolloContext());
     var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
     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 obsQuery = null;
@@ -64,114 +71,96 @@ 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),
-    });
     react.useEffect(function () {
-        var _a, _b;
         var watchQueryOptions = createWatchQueryOptions(query, options);
-        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).catch(function () { });
-            nextResult = obsQuery.getCurrentResult();
-            ref.current.watchQueryOptions = watchQueryOptions;
+            obsQuery.setOptions(watchQueryOptions);
+            setObsQuery(obsQuery);
         }
-        if (nextResult) {
-            var previousResult = ref.current.result;
-            if (previousResult.data) {
-                ref.current.previousData = previousResult.data;
-            }
-            setResult(ref.current.result = nextResult);
-            if (!nextResult.loading && options) {
-                if (!result.loading) {
-                    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);
-                    }
+        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;
                 }
             }
-        }
-        Object.assign(ref.current, { client: client, query: query, options: options });
-    }, [obsQuery, client, query, options]);
-    react.useEffect(function () {
-        if (context$1.renderPromises) {
-            return;
-        }
-        var subscription = obsQuery.subscribe(onNext, onError);
-        function onNext() {
-            var _a, _b;
-            var previousResult = ref.current.result;
+            return function () {
+                subscription.unsubscribe();
+            };
+        };
+        var getSnapshot = function () {
             var result = obsQuery.getCurrentResult();
-            if (previousResult &&
-                previousResult.loading === result.loading &&
-                previousResult.networkStatus === result.networkStatus &&
-                equality.equal(previousResult.data, result.data)) {
-                return;
+            if (result.errors && result.errors.length) {
+                result = tslib.__assign(tslib.__assign({}, result), { error: result.error || new errors.ApolloError({ graphQLErrors: result.errors }) });
             }
-            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);
+            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 });
+                }
+                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);
+    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') {
+            return;
         }
-        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;
+        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 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);
+            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);
             }
         }
-        return function () { return subscription.unsubscribe(); };
-    }, [obsQuery, context$1.renderPromises, client.disableNetworkFetches]);
+    }, [result]);
     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 &&
@@ -180,42 +169,12 @@ 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 &&
-            !(options === null || options === void 0 ? void 0 : options.skip) &&
-            result.loading) {
-            obsQuery.setOptions(createWatchQueryOptions(query, options)).catch(function () { });
+        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 || 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,
-        };
-    }
-    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: obsQuery.variables, client: client, called: true, previousData: ref.current.previousData }), result);
+    return tslib.__assign(tslib.__assign(tslib.__assign({}, obsQueryMethods), { variables: obsQuery.variables, client: client, called: true }), result);
 }
 function createWatchQueryOptions(query, options) {
     var _a;
@@ -333,13 +292,13 @@ function useMutation(mutation, options) {
             var mutationId = ++ref.current.mutationId;
             var clientOptions = core.mergeOptions(baseOptions, executeOptions);
             return client.mutate(clientOptions).then(function (response) {
-                var _a;
+                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 &&
-                    !baseOptions.ignoreResults) {
+                    !clientOptions.ignoreResults) {
                     var result_1 = {
                         called: true,
                         loading: false,
@@ -352,8 +311,10 @@ function useMutation(mutation, options) {
                     }
                 }
                 (_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 = {
@@ -367,8 +328,9 @@ function useMutation(mutation, options) {
                         setResult(ref.current.result = result_2);
                     }
                 }
-                if (baseOptions.onError) {
-                    baseOptions.onError(error);
+                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;