@apollo/client 3.8.0-alpha.9 → 3.8.0-beta.0

package/react/hooks/hooks.cjs

@@ -8,9 +8,12 @@ var context = require('../context');
 var tslib = require('tslib');
 var utilities = require('../../utilities');
 var equality = require('@wry/equality');
-var core = require('../../core');
 var errors = require('../../errors');
+var core = require('../../core');
 var parser = require('../parser');
+var cache = require('../../cache');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -25,26 +28,25 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useApolloClient(override) {
     var context$1 = React.useContext(context.getApolloContext());
     var client = override || context$1.client;
-    globals.__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 ' +
-        'instance in via options.') : globals.invariant(!!client, 32);
+    globals.invariant(!!client, 49);
     return client;
 }
 
 var didWarnUncachedGetSnapshot = false;
 var uSESKey = "useSyncExternalStore";
-var realHook = React__namespace[uSESKey];
-var useSyncExternalStore = realHook || (function (subscribe, getSnapshot, getServerSnapshot) {
+var realHook$1 = React__namespace[uSESKey];
+var useSyncExternalStore = realHook$1 || (function (subscribe, getSnapshot, getServerSnapshot) {
     var value = getSnapshot();
     if (globals.__DEV__ &&
         !didWarnUncachedGetSnapshot &&
         value !== getSnapshot()) {
         didWarnUncachedGetSnapshot = true;
-        globals.__DEV__ && globals.invariant.error('The result of getSnapshot should be cached to avoid an infinite loop');
+        globals.__DEV__ && globals.invariant.error(59);
     }
     var _a = React__namespace.useState({ inst: { value: value, getSnapshot: getSnapshot } }), inst = _a[0].inst, forceUpdate = _a[1];
     if (utilities.canUseLayoutEffect) {
@@ -103,8 +105,6 @@ var InternalState = (function () {
     function InternalState(client, query, previous) {
         this.client = client;
         this.query = query;
-        this.asyncResolveFns = new Set();
-        this.optionsToIgnoreOnce = new (utilities.canUseWeakSet ? WeakSet : Set)();
         this.ssrDisabledResult = utilities.maybeDeepFreeze({
             loading: true,
             data: void 0,
@@ -126,22 +126,32 @@ var InternalState = (function () {
         }
     }
     InternalState.prototype.forceUpdate = function () {
-        globals.__DEV__ && globals.invariant.warn("Calling default no-op implementation of InternalState#forceUpdate");
+        globals.__DEV__ && globals.invariant.warn(51);
     };
-    InternalState.prototype.asyncUpdate = function (signal) {
+    InternalState.prototype.executeQuery = function (options) {
         var _this = this;
-        return new Promise(function (resolve, reject) {
-            var watchQueryOptions = _this.watchQueryOptions;
-            var handleAborted = function () {
-                _this.asyncResolveFns.delete(resolve);
-                _this.optionsToIgnoreOnce.delete(watchQueryOptions);
-                signal.removeEventListener('abort', handleAborted);
-                reject(signal.reason);
-            };
-            _this.asyncResolveFns.add(resolve);
-            _this.optionsToIgnoreOnce.add(watchQueryOptions);
-            signal.addEventListener('abort', handleAborted);
-            _this.forceUpdate();
+        var _a;
+        if (options.query) {
+            Object.assign(this, { query: options.query });
+        }
+        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;
+        this.forceUpdate();
+        return new Promise(function (resolve) {
+            var result;
+            concast.subscribe({
+                next: function (value) {
+                    result = value;
+                },
+                error: function () {
+                    resolve(_this.toQueryResult(_this.observable.getCurrentResult()));
+                },
+                complete: function () {
+                    resolve(_this.toQueryResult(result));
+                }
+            });
         });
     };
     InternalState.prototype.useQuery = function (options) {
@@ -197,22 +207,15 @@ var InternalState = (function () {
             this.client.disableNetworkFetches,
         ]), function () { return _this.getCurrentResult(); }, function () { return _this.getCurrentResult(); });
         this.unsafeHandlePartialRefetch(result);
-        var queryResult = this.toQueryResult(result);
-        if (!queryResult.loading && this.asyncResolveFns.size) {
-            this.asyncResolveFns.forEach(function (resolve) { return resolve(queryResult); });
-            this.asyncResolveFns.clear();
-        }
-        return queryResult;
+        return this.toQueryResult(result);
     };
     InternalState.prototype.useOptions = function (options) {
         var _a;
         var watchQueryOptions = this.createWatchQueryOptions(this.queryHookOptions = options);
         var currentWatchQueryOptions = this.watchQueryOptions;
-        if (this.optionsToIgnoreOnce.has(currentWatchQueryOptions) ||
-            !equality.equal(watchQueryOptions, currentWatchQueryOptions)) {
+        if (!equality.equal(watchQueryOptions, currentWatchQueryOptions)) {
             this.watchQueryOptions = watchQueryOptions;
             if (currentWatchQueryOptions && this.observable) {
-                this.optionsToIgnoreOnce.delete(currentWatchQueryOptions);
                 this.observable.reobserve(this.getObsQueryOptions());
                 this.previousData = ((_a = this.result) === null || _a === void 0 ? void 0 : _a.data) || this.previousData;
                 this.result = void 0;
@@ -243,7 +246,7 @@ var InternalState = (function () {
             toMerge.push(this.queryHookOptions.defaultOptions);
         }
         toMerge.push(utilities.compact(this.observable && this.observable.options, this.watchQueryOptions));
-        return toMerge.reduce(core.mergeOptions);
+        return toMerge.reduce(utilities.mergeOptions);
     };
     InternalState.prototype.createWatchQueryOptions = function (_a) {
         var _b;
@@ -379,11 +382,15 @@ var EAGER_METHODS = [
     'subscribeToMore',
 ];
 function useLazyQuery(query, options) {
-    var _a, _b;
-    var abortControllersRef = React.useRef(new Set());
+    var _a;
     var execOptionsRef = React.useRef();
-    var merged = execOptionsRef.current ? utilities.mergeOptions(options, execOptionsRef.current) : options;
-    var internalState = useInternalState(useApolloClient(options && options.client), (_b = (_a = execOptionsRef.current) === null || _a === void 0 ? void 0 : _a.query) !== null && _b !== void 0 ? _b : query);
+    var optionsRef = React.useRef();
+    var queryRef = React.useRef();
+    var merged = utilities.mergeOptions(options, execOptionsRef.current || {});
+    var document = (_a = merged === null || merged === void 0 ? void 0 : merged.query) !== null && _a !== void 0 ? _a : query;
+    optionsRef.current = merged;
+    queryRef.current = document;
+    var internalState = useInternalState(useApolloClient(options && options.client), document);
     var useQueryResult = internalState.useQuery(tslib.__assign(tslib.__assign({}, merged), { skip: !execOptionsRef.current }));
     var initialFetchPolicy = useQueryResult.observable.options.initialFetchPolicy ||
         internalState.getDefaultFetchPolicy();
@@ -409,28 +416,15 @@ function useLazyQuery(query, options) {
         return eagerMethods;
     }, []);
     Object.assign(result, eagerMethods);
-    React.useEffect(function () {
-        return function () {
-            abortControllersRef.current.forEach(function (controller) {
-                controller.abort();
-            });
-        };
-    }, []);
     var execute = React.useCallback(function (executeOptions) {
-        var controller = new AbortController();
-        abortControllersRef.current.add(controller);
         execOptionsRef.current = executeOptions ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
             fetchPolicy: initialFetchPolicy,
         };
+        var options = utilities.mergeOptions(optionsRef.current, tslib.__assign({ query: queryRef.current }, execOptionsRef.current));
         var promise = internalState
-            .asyncUpdate(controller.signal)
-            .then(function (queryResult) {
-            abortControllersRef.current.delete(controller);
-            return Object.assign(queryResult, eagerMethods);
-        });
-        promise.catch(function () {
-            abortControllersRef.current.delete(controller);
-        });
+            .executeQuery(tslib.__assign(tslib.__assign({}, options), { skip: false }))
+            .then(function (queryResult) { return Object.assign(queryResult, eagerMethods); });
+        promise.catch(function () { });
         return promise;
     }, []);
     return [execute, result];
@@ -470,7 +464,7 @@ function useMutation(mutation, options) {
             });
         }
         var mutationId = ++ref.current.mutationId;
-        var clientOptions = core.mergeOptions(baseOptions, executeOptions);
+        var clientOptions = utilities.mergeOptions(baseOptions, executeOptions);
         return client.mutate(clientOptions).then(function (response) {
             var _a;
             var data = response.data, errors$1 = response.errors;
@@ -543,14 +537,10 @@ function useSubscription(subscription, options) {
     if (!hasIssuedDeprecationWarningRef.current) {
         hasIssuedDeprecationWarningRef.current = true;
         if (options === null || options === void 0 ? void 0 : options.onSubscriptionData) {
-            globals.__DEV__ && globals.invariant.warn(options.onData
-                ? "'useSubscription' supports only the 'onSubscriptionData' or 'onData' option, but not both. Only the 'onData' option will be used."
-                : "'onSubscriptionData' is deprecated and will be removed in a future major version. Please use the 'onData' option instead.");
+            globals.__DEV__ && globals.invariant.warn(options.onData ? 52 : 53);
         }
         if (options === null || options === void 0 ? void 0 : options.onSubscriptionComplete) {
-            globals.__DEV__ && globals.invariant.warn(options.onComplete
-                ? "'useSubscription' supports only the 'onSubscriptionComplete' or 'onComplete' option, but not both. Only the 'onComplete' option will be used."
-                : "'onSubscriptionComplete' is deprecated and will be removed in a future major version. Please use the 'onComplete' option instead.");
+            globals.__DEV__ && globals.invariant.warn(options.onComplete ? 54 : 55);
         }
     }
     var _b = React.useState(function () {
@@ -616,9 +606,13 @@ function useSubscription(subscription, options) {
         if (!observable) {
             return;
         }
+        var subscriptionStopped = false;
         var subscription = observable.subscribe({
             next: function (fetchResult) {
                 var _a, _b;
+                if (subscriptionStopped) {
+                    return;
+                }
                 var result = {
                     loading: false,
                     data: fetchResult.data,
@@ -641,26 +635,33 @@ function useSubscription(subscription, options) {
             },
             error: function (error) {
                 var _a, _b;
-                setResult({
-                    loading: false,
-                    data: void 0,
-                    error: error,
-                    variables: options === null || options === void 0 ? void 0 : options.variables,
-                });
-                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+                if (!subscriptionStopped) {
+                    setResult({
+                        loading: false,
+                        data: void 0,
+                        error: error,
+                        variables: options === null || options === void 0 ? void 0 : options.variables,
+                    });
+                    (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+                }
             },
             complete: function () {
                 var _a, _b;
-                if ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onComplete) {
-                    ref.current.options.onComplete();
-                }
-                else if ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onSubscriptionComplete) {
-                    ref.current.options.onSubscriptionComplete();
+                if (!subscriptionStopped) {
+                    if ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onComplete) {
+                        ref.current.options.onComplete();
+                    }
+                    else if ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onSubscriptionComplete) {
+                        ref.current.options.onSubscriptionComplete();
+                    }
                 }
             },
         });
         return function () {
-            subscription.unsubscribe();
+            subscriptionStopped = true;
+            setTimeout(function () {
+                subscription.unsubscribe();
+            });
         };
     }, [observable]);
     return result;
@@ -681,10 +682,10 @@ function useReactiveVar(rv) {
     return value;
 }
 
-function useFragment_experimental(options) {
+function useFragment(options) {
     var cache = useApolloClient().cache;
     var fragment = options.fragment, fragmentName = options.fragmentName, from = options.from, _a = options.optimistic, optimistic = _a === void 0 ? true : _a, rest = tslib.__rest(options, ["fragment", "fragmentName", "from", "optimistic"]);
-    var diffOptions = tslib.__assign(tslib.__assign({}, rest), { id: typeof from === "string" ? from : cache.identify(from), query: cache["getFragmentDoc"](fragment, fragmentName), optimistic: optimistic });
+    var diffOptions = tslib.__assign(tslib.__assign({}, rest), { returnPartialData: true, id: typeof from === "string" ? from : cache.identify(from), query: cache["getFragmentDoc"](fragment, fragmentName), optimistic: optimistic });
     var resultRef = React.useRef();
     var latestDiff = cache.diff(diffOptions);
     var getSnapshot = function () {
@@ -722,116 +723,110 @@ function useDeepMemo(memoFn, deps) {
     return ref.current.value;
 }
 
-var useIsomorphicLayoutEffect = utilities.canUseLayoutEffect
-    ? React.useLayoutEffect
-    : React.useEffect;
+function useStrictModeSafeCleanupEffect(cleanup) {
+    var timeout;
+    React.useEffect(function () {
+        clearTimeout(timeout);
+        return function () {
+            timeout = setTimeout(cleanup);
+        };
+    }, []);
+}
+
+var useKey = 'use';
+var realHook = React__default[useKey];
+var __use = realHook ||
+    function __use(promise) {
+        var statefulPromise = utilities.wrapPromiseWithState(promise);
+        switch (statefulPromise.status) {
+            case 'pending':
+                throw statefulPromise;
+            case 'rejected':
+                throw statefulPromise.reason;
+            case 'fulfilled':
+                return statefulPromise.value;
+        }
+    };
 
 function useSuspenseCache(override) {
     var context$1 = React.useContext(context.getApolloContext());
     var suspenseCache = override || context$1.suspenseCache;
-    globals.__DEV__ ? globals.invariant(suspenseCache, 'Could not find a "suspenseCache" in the context or passed in as an option. ' +
-        'Wrap the root component in an <ApolloProvider> and provide a suspenseCache, ' +
-        'or pass a SuspenseCache instance in via options.') : globals.invariant(suspenseCache, 33);
+    globals.invariant(suspenseCache, 56);
     return suspenseCache;
 }
 
-var SUPPORTED_FETCH_POLICIES = [
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
-];
-var DEFAULT_FETCH_POLICY = 'cache-first';
-var DEFAULT_SUSPENSE_POLICY = 'always';
-var DEFAULT_ERROR_POLICY = 'none';
-function useSuspenseQuery_experimental(query, options) {
+function useSuspenseQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
-    var suspenseCache = useSuspenseCache(options.suspenseCache);
     var client = useApolloClient(options.client);
-    var watchQueryOptions = useWatchQueryOptions({ query: query, options: options, client: client });
-    var previousWatchQueryOptionsRef = React.useRef(watchQueryOptions);
-    var deferred = useIsDeferred(query);
-    var fetchPolicy = watchQueryOptions.fetchPolicy, errorPolicy = watchQueryOptions.errorPolicy, returnPartialData = watchQueryOptions.returnPartialData, variables = watchQueryOptions.variables;
-    var cacheEntry = suspenseCache.lookup(query, variables);
-    var observable = React.useState(function () {
-        return (cacheEntry === null || cacheEntry === void 0 ? void 0 : cacheEntry.observable) || client.watchQuery(watchQueryOptions);
-    })[0];
-    var result = useObservableQueryResult(observable);
-    var hasFullResult = result.data && !result.partial;
-    var hasPartialResult = result.data && result.partial;
-    var usePartialResult = returnPartialData && hasPartialResult;
-    var allowsThrownErrors = errorPolicy === 'none' && (!deferred || !hasPartialResult);
-    if (result.error &&
-        (result.error.networkError || allowsThrownErrors)) {
-        throw result.error;
-    }
-    if (result.loading) {
-        if (!cacheEntry) {
-            cacheEntry = suspenseCache.add(query, variables, {
-                promise: maybeWrapConcastWithCustomPromise(observable.reobserveAsConcast(watchQueryOptions), { deferred: deferred }),
-                observable: observable,
-            });
-        }
-        var hasUsableResult = usePartialResult ||
-            (fetchPolicy === 'cache-and-network' && hasFullResult);
-        if (!hasUsableResult && !cacheEntry.fulfilled) {
-            throw cacheEntry.promise;
-        }
+    var suspenseCache = useSuspenseCache(options.suspenseCache);
+    var watchQueryOptions = useWatchQueryOptions({ query: query, options: options });
+    var variables = watchQueryOptions.variables;
+    var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
+    var cacheKey = [client, query, cache.canonicalStringify(variables)].concat(queryKey);
+    var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
+        return client.watchQuery(watchQueryOptions);
+    });
+    var _b = React.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
+    var promise = promiseCache.get(queryRef.key);
+    if (!promise) {
+        promise = queryRef.promise;
+        promiseCache.set(queryRef.key, promise);
     }
+    useTrackedQueryRefs(queryRef);
     React.useEffect(function () {
-        var variables = watchQueryOptions.variables, query = watchQueryOptions.query;
-        var previousOpts = previousWatchQueryOptionsRef.current;
-        if (variables !== previousOpts.variables || query !== previousOpts.query) {
-            suspenseCache.remove(previousOpts.query, previousOpts.variables);
-            suspenseCache.add(query, variables, {
-                promise: observable.reobserve({ query: query, variables: variables }),
-                observable: observable,
+        return queryRef.listen(function (promise) {
+            setPromiseCache(function (promiseCache) {
+                return new Map(promiseCache).set(queryRef.key, promise);
             });
-            previousWatchQueryOptionsRef.current = watchQueryOptions;
-        }
-    }, [watchQueryOptions]);
-    React.useEffect(function () {
-        return function () {
-            suspenseCache.remove(query, variables);
-        };
-    }, []);
+        });
+    }, [queryRef]);
+    var result = __use(promise);
+    var fetchMore = React.useCallback(function (options) {
+        var promise = queryRef.fetchMore(options);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var refetch = React.useCallback(function (variables) {
+        var promise = queryRef.refetch(variables);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var subscribeToMore = React.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
     return React.useMemo(function () {
         return {
             client: client,
             data: result.data,
-            error: errorPolicy === 'ignore' ? void 0 : toApolloError(result),
-            fetchMore: function (options) {
-                var promise = observable.fetchMore(options);
-                suspenseCache.add(query, watchQueryOptions.variables, {
-                    promise: promise,
-                    observable: observable,
-                });
-                return promise;
-            },
-            refetch: function (variables) {
-                var promise = observable.refetch(variables);
-                suspenseCache.add(query, watchQueryOptions.variables, {
-                    promise: promise,
-                    observable: observable,
-                });
-                return promise;
-            },
-            subscribeToMore: function (options) { return observable.subscribeToMore(options); },
+            error: toApolloError(result),
+            networkStatus: result.networkStatus,
+            fetchMore: fetchMore,
+            refetch: refetch,
+            subscribeToMore: subscribeToMore,
         };
-    }, [client, result, observable, errorPolicy]);
+    }, [client, fetchMore, refetch, result, subscribeToMore]);
 }
 function validateOptions(options) {
-    var query = options.query, _a = options.fetchPolicy, fetchPolicy = _a === void 0 ? DEFAULT_FETCH_POLICY : _a, returnPartialData = options.returnPartialData;
+    var query = options.query, fetchPolicy = options.fetchPolicy, returnPartialData = options.returnPartialData;
     parser.verifyDocumentType(query, parser.DocumentType.Query);
     validateFetchPolicy(fetchPolicy);
     validatePartialDataReturn(fetchPolicy, returnPartialData);
 }
 function validateFetchPolicy(fetchPolicy) {
-    globals.__DEV__ ? globals.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : globals.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), 34);
+    if (fetchPolicy === void 0) { fetchPolicy = 'cache-first'; }
+    var supportedFetchPolicies = [
+        'cache-first',
+        'network-only',
+        'no-cache',
+        'cache-and-network',
+    ];
+    globals.invariant(supportedFetchPolicies.includes(fetchPolicy), 57, fetchPolicy);
 }
 function validatePartialDataReturn(fetchPolicy, returnPartialData) {
     if (fetchPolicy === 'no-cache' && returnPartialData) {
-        globals.__DEV__ && globals.invariant.warn('Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.');
+        globals.__DEV__ && globals.invariant.warn(58);
     }
 }
 function toApolloError(result) {
@@ -839,83 +834,92 @@ function toApolloError(result) {
         ? new core.ApolloError({ graphQLErrors: result.errors })
         : result.error;
 }
-function maybeWrapConcastWithCustomPromise(concast, _a) {
-    var deferred = _a.deferred;
-    if (deferred) {
-        return new Promise(function (resolve, reject) {
-            var subscription = concast.subscribe({
-                next: function (value) {
-                    resolve(value);
-                    subscription.unsubscribe();
-                },
-                error: reject,
-            });
-        });
-    }
-    return concast.promise;
+function useTrackedQueryRefs(queryRef) {
+    var trackedQueryRefs = React.useRef(new Set());
+    trackedQueryRefs.current.add(queryRef);
+    useStrictModeSafeCleanupEffect(function () {
+        trackedQueryRefs.current.forEach(function (sub) { return sub.dispose(); });
+    });
 }
 function useWatchQueryOptions(_a) {
-    var query = _a.query, options = _a.options, client = _a.client;
-    var defaultOptions = client.defaultOptions.watchQuery;
-    var watchQueryOptions = useDeepMemo(function () {
-        var errorPolicy = options.errorPolicy, fetchPolicy = options.fetchPolicy, _a = options.suspensePolicy, suspensePolicy = _a === void 0 ? DEFAULT_SUSPENSE_POLICY : _a, variables = options.variables, watchQueryOptions = tslib.__rest(options, ["errorPolicy", "fetchPolicy", "suspensePolicy", "variables"]);
-        return tslib.__assign(tslib.__assign({}, watchQueryOptions), { query: query, errorPolicy: errorPolicy || (defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.errorPolicy) || DEFAULT_ERROR_POLICY, fetchPolicy: fetchPolicy || (defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.fetchPolicy) || DEFAULT_FETCH_POLICY, notifyOnNetworkStatusChange: suspensePolicy === 'always', fetchOnFirstSubscribe: false, variables: utilities.compact(tslib.__assign(tslib.__assign({}, defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.variables), variables)) });
-    }, [options, query, defaultOptions]);
+    var query = _a.query, options = _a.options;
+    var watchQueryOptions = useDeepMemo(function () { return (tslib.__assign(tslib.__assign({}, options), { query: query, notifyOnNetworkStatusChange: false, nextFetchPolicy: void 0 })); }, [options, query]);
     if (globals.__DEV__) {
         validateOptions(watchQueryOptions);
     }
     return watchQueryOptions;
 }
-function useIsDeferred(query) {
-    return React.useMemo(function () { return utilities.hasDirectives(['defer'], query); }, [query]);
+
+function useBackgroundQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    var suspenseCache = useSuspenseCache(options.suspenseCache);
+    var client = useApolloClient(options.client);
+    var watchQueryOptions = useWatchQueryOptions({ query: query, options: options });
+    var variables = watchQueryOptions.variables;
+    var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
+    var cacheKey = [client, query, cache.canonicalStringify(variables)].concat(queryKey);
+    var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
+        return client.watchQuery(watchQueryOptions);
+    });
+    var _b = React.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
+    useTrackedQueryRefs(queryRef);
+    var fetchMore = React.useCallback(function (options) {
+        var promise = queryRef.fetchMore(options);
+        setPromiseCache(function (promiseCache) {
+            return new Map(promiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var refetch = React.useCallback(function (variables) {
+        var promise = queryRef.refetch(variables);
+        setPromiseCache(function (promiseCache) {
+            return new Map(promiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    queryRef.promiseCache = promiseCache;
+    return React.useMemo(function () {
+        return [
+            queryRef,
+            {
+                fetchMore: fetchMore,
+                refetch: refetch,
+            },
+        ];
+    }, [queryRef, fetchMore, refetch]);
 }
-function useObservableQueryResult(observable) {
-    var resultRef = React.useRef();
-    var isMountedRef = React.useRef(false);
-    var subscribeTimeoutRef = React.useRef();
-    if (!resultRef.current) {
-        resultRef.current = observable.getCurrentResult();
+function useReadQuery(queryRef) {
+    var _a = React.useState(0), forceUpdate = _a[1];
+    globals.invariant(queryRef.promiseCache, 50);
+    var promise = queryRef.promiseCache.get(queryRef.key);
+    if (!promise) {
+        promise = queryRef.promise;
+        queryRef.promiseCache.set(queryRef.key, promise);
     }
-    useIsomorphicLayoutEffect(function () {
-        isMountedRef.current = true;
-        return function () {
-            isMountedRef.current = false;
-        };
-    }, []);
-    return useSyncExternalStore(React.useCallback(function (forceUpdate) {
-        clearTimeout(subscribeTimeoutRef.current);
-        function handleUpdate() {
-            var previousResult = resultRef.current;
-            var result = observable.getCurrentResult();
-            if (previousResult.loading === result.loading &&
-                previousResult.networkStatus === result.networkStatus &&
-                equality.equal(previousResult.data, result.data)) {
-                return;
-            }
-            resultRef.current = result;
-            if (isMountedRef.current) {
-                forceUpdate();
-            }
-        }
-        var subscription;
-        subscribeTimeoutRef.current = setTimeout(function () {
-            subscription = observable.subscribe({
-                next: handleUpdate,
-                error: handleUpdate,
-            });
+    React.useEffect(function () {
+        return queryRef.listen(function (promise) {
+            queryRef.promiseCache.set(queryRef.key, promise);
+            forceUpdate(function (prevState) { return prevState + 1; });
         });
-        return function () {
-            subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
+    }, [queryRef]);
+    var result = __use(promise);
+    return React.useMemo(function () {
+        return {
+            data: result.data,
+            networkStatus: result.networkStatus,
+            error: toApolloError(result),
         };
-    }, [observable]), function () { return resultRef.current; }, function () { return resultRef.current; });
+    }, [result]);
 }
 
 exports.useApolloClient = useApolloClient;
-exports.useFragment_experimental = useFragment_experimental;
+exports.useBackgroundQuery = useBackgroundQuery;
+exports.useFragment = useFragment;
 exports.useLazyQuery = useLazyQuery;
 exports.useMutation = useMutation;
 exports.useQuery = useQuery;
 exports.useReactiveVar = useReactiveVar;
+exports.useReadQuery = useReadQuery;
 exports.useSubscription = useSubscription;
-exports.useSuspenseQuery_experimental = useSuspenseQuery_experimental;
+exports.useSuspenseQuery = useSuspenseQuery;
 //# sourceMappingURL=hooks.cjs.map