@apollo/client 3.8.0-beta.6 → 3.8.0-rc.0

package/react/hooks/hooks.cjs

@@ -12,6 +12,7 @@ var errors = require('../../errors');
 var core = require('../../core');
 var parser = require('../parser');
 var cache = require('../../cache');
+var trie = require('@wry/trie');
 var invariant = require('ts-invariant');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
@@ -29,11 +30,10 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 
 function useApolloClient(override) {
-    var context$1 = React.useContext(context.getApolloContext());
+    var context$1 = React__namespace.useContext(context.getApolloContext());
     var client = override || context$1.client;
     globals.invariant(!!client, 47);
     return client;
@@ -44,11 +44,11 @@ var uSESKey = "useSyncExternalStore";
 var realHook$1 = React__namespace[uSESKey];
 var useSyncExternalStore = realHook$1 || (function (subscribe, getSnapshot, getServerSnapshot) {
     var value = getSnapshot();
-    if (globals.__DEV__ &&
+    if (globalThis.__DEV__ !== false &&
         !didWarnUncachedGetSnapshot &&
         value !== getSnapshot()) {
         didWarnUncachedGetSnapshot = true;
-        globals.__DEV__ && globals.invariant.error(57);
+        globalThis.__DEV__ !== false && globals.invariant.error(56);
     }
     var _a = React__namespace.useState({ inst: { value: value, getSnapshot: getSnapshot } }), inst = _a[0].inst, forceUpdate = _a[1];
     if (utilities.canUseLayoutEffect) {
@@ -90,14 +90,14 @@ function useQuery(query, options) {
     return useInternalState(useApolloClient(options.client), query).useQuery(options);
 }
 function useInternalState(client, query) {
-    var stateRef = React.useRef();
+    var stateRef = React__namespace.useRef();
     if (!stateRef.current ||
         client !== stateRef.current.client ||
         query !== stateRef.current.query) {
         stateRef.current = new InternalState(client, query, stateRef.current);
     }
     var state = stateRef.current;
-    var _a = React.useState(0); _a[0]; var setTick = _a[1];
+    var _a = React__namespace.useState(0); _a[0]; var setTick = _a[1];
     state.forceUpdate = function () {
         setTick(function (tick) { return tick + 1; });
     };
@@ -128,7 +128,7 @@ var InternalState = (function () {
         }
     }
     InternalState.prototype.forceUpdate = function () {
-        globals.__DEV__ && globals.invariant.warn(48);
+        globalThis.__DEV__ !== false && globals.invariant.warn(48);
     };
     InternalState.prototype.executeQuery = function (options) {
         var _this = this;
@@ -158,10 +158,10 @@ var InternalState = (function () {
     };
     InternalState.prototype.useQuery = function (options) {
         var _this = this;
-        this.renderPromises = React.useContext(context.getApolloContext()).renderPromises;
+        this.renderPromises = React__namespace.useContext(context.getApolloContext()).renderPromises;
         this.useOptions(options);
         var obsQuery = this.useObservableQuery();
-        var result = useSyncExternalStore(React.useCallback(function () {
+        var result = useSyncExternalStore(React__namespace.useCallback(function () {
             if (_this.renderPromises) {
                 return function () { };
             }
@@ -291,7 +291,7 @@ var InternalState = (function () {
                 && this.renderPromises.getSSRObservable(this.watchQueryOptions)
                 || this.observable
                 || this.client.watchQuery(this.getObsQueryOptions());
-        this.obsQueryFields = React.useMemo(function () { return ({
+        this.obsQueryFields = React__namespace.useMemo(function () { return ({
             refetch: obsQuery.refetch.bind(obsQuery),
             reobserve: obsQuery.reobserve.bind(obsQuery),
             fetchMore: obsQuery.fetchMore.bind(obsQuery),
@@ -333,7 +333,7 @@ var InternalState = (function () {
                     _this.onCompleted(result.data);
                 }
             }).catch(function (error) {
-                globals.__DEV__ && globals.invariant.warn(error);
+                globalThis.__DEV__ !== false && globals.invariant.warn(error);
             });
         }
     };
@@ -385,9 +385,9 @@ var EAGER_METHODS = [
 ];
 function useLazyQuery(query, options) {
     var _a;
-    var execOptionsRef = React.useRef();
-    var optionsRef = React.useRef();
-    var queryRef = React.useRef();
+    var execOptionsRef = React__namespace.useRef();
+    var optionsRef = React__namespace.useRef();
+    var queryRef = React__namespace.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;
@@ -399,7 +399,7 @@ function useLazyQuery(query, options) {
     var result = Object.assign(useQueryResult, {
         called: !!execOptionsRef.current,
     });
-    var eagerMethods = React.useMemo(function () {
+    var eagerMethods = React__namespace.useMemo(function () {
         var eagerMethods = {};
         var _loop_1 = function (key) {
             var method = result[key];
@@ -418,7 +418,7 @@ function useLazyQuery(query, options) {
         return eagerMethods;
     }, []);
     Object.assign(result, eagerMethods);
-    var execute = React.useCallback(function (executeOptions) {
+    var execute = React__namespace.useCallback(function (executeOptions) {
         execOptionsRef.current = executeOptions ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
             fetchPolicy: initialFetchPolicy,
         };
@@ -435,12 +435,12 @@ function useLazyQuery(query, options) {
 function useMutation(mutation, options) {
     var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
     parser.verifyDocumentType(mutation, parser.DocumentType.Mutation);
-    var _a = React.useState({
+    var _a = React__namespace.useState({
         called: false,
         loading: false,
         client: client,
     }), result = _a[0], setResult = _a[1];
-    var ref = React.useRef({
+    var ref = React__namespace.useRef({
         result: result,
         mutationId: 0,
         isMounted: true,
@@ -451,7 +451,7 @@ function useMutation(mutation, options) {
     {
         Object.assign(ref.current, { client: client, options: options, mutation: mutation });
     }
-    var execute = React.useCallback(function (executeOptions) {
+    var execute = React__namespace.useCallback(function (executeOptions) {
         if (executeOptions === void 0) { executeOptions = {}; }
         var _a = ref.current, options = _a.options, mutation = _a.mutation;
         var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
@@ -512,12 +512,12 @@ function useMutation(mutation, options) {
             throw error;
         });
     }, []);
-    var reset = React.useCallback(function () {
+    var reset = React__namespace.useCallback(function () {
         if (ref.current.isMounted) {
             setResult({ called: false, loading: false, client: client });
         }
     }, []);
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
         ref.current.isMounted = true;
         return function () {
             ref.current.isMounted = false;
@@ -527,10 +527,10 @@ function useMutation(mutation, options) {
 }
 
 function useSubscription(subscription, options) {
-    var hasIssuedDeprecationWarningRef = React.useRef(false);
+    var hasIssuedDeprecationWarningRef = React__namespace.useRef(false);
     var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
     parser.verifyDocumentType(subscription, parser.DocumentType.Subscription);
-    var _a = React.useState({
+    var _a = React__namespace.useState({
         loading: !(options === null || options === void 0 ? void 0 : options.skip),
         error: void 0,
         data: void 0,
@@ -539,13 +539,13 @@ 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 ? 50 : 51);
+            globalThis.__DEV__ !== false && globals.invariant.warn(options.onData ? 50 : 51);
         }
         if (options === null || options === void 0 ? void 0 : options.onSubscriptionComplete) {
-            globals.__DEV__ && globals.invariant.warn(options.onComplete ? 52 : 53);
+            globalThis.__DEV__ !== false && globals.invariant.warn(options.onComplete ? 52 : 53);
         }
     }
-    var _b = React.useState(function () {
+    var _b = React__namespace.useState(function () {
         if (options === null || options === void 0 ? void 0 : options.skip) {
             return null;
         }
@@ -556,14 +556,14 @@ function useSubscription(subscription, options) {
             context: options === null || options === void 0 ? void 0 : options.context,
         });
     }), observable = _b[0], setObservable = _b[1];
-    var canResetObservableRef = React.useRef(false);
-    React.useEffect(function () {
+    var canResetObservableRef = React__namespace.useRef(false);
+    React__namespace.useEffect(function () {
         return function () {
             canResetObservableRef.current = true;
         };
     }, []);
-    var ref = React.useRef({ client: client, subscription: subscription, options: options });
-    React.useEffect(function () {
+    var ref = React__namespace.useRef({ client: client, subscription: subscription, options: 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') {
@@ -604,7 +604,7 @@ function useSubscription(subscription, options) {
         }
         Object.assign(ref.current, { client: client, subscription: subscription, options: options });
     }, [client, subscription, options, canResetObservableRef.current]);
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
         if (!observable) {
             return;
         }
@@ -671,8 +671,8 @@ function useSubscription(subscription, options) {
 
 function useReactiveVar(rv) {
     var value = rv();
-    var setValue = React.useState(value)[1];
-    React.useEffect(function () {
+    var setValue = React__namespace.useState(value)[1];
+    React__namespace.useEffect(function () {
         var probablySameValue = rv();
         if (value !== probablySameValue) {
             setValue(probablySameValue);
@@ -688,7 +688,7 @@ 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), { returnPartialData: true, id: typeof from === "string" ? from : cache.identify(from), query: cache["getFragmentDoc"](fragment, fragmentName), optimistic: optimistic });
-    var resultRef = React.useRef();
+    var resultRef = React__namespace.useRef();
     var latestDiff = cache.diff(diffOptions);
     var getSnapshot = function () {
         var latestDiffToResult = diffToResult(latestDiff);
@@ -718,25 +718,15 @@ function diffToResult(diff) {
 }
 
 function useDeepMemo(memoFn, deps) {
-    var ref = React.useRef();
+    var ref = React__namespace.useRef();
     if (!ref.current || !equality.equal(ref.current.deps, deps)) {
         ref.current = { value: memoFn(), deps: deps };
     }
     return ref.current.value;
 }
 
-function useStrictModeSafeCleanupEffect(cleanup) {
-    var timeout;
-    React.useEffect(function () {
-        clearTimeout(timeout);
-        return function () {
-            timeout = setTimeout(cleanup);
-        };
-    }, []);
-}
-
 var useKey = 'use';
-var realHook = React__default[useKey];
+var realHook = React__namespace[useKey];
 var __use = realHook ||
     function __use(promise) {
         var statefulPromise = utilities.wrapPromiseWithState(promise);
@@ -750,25 +740,227 @@ var __use = realHook ||
         }
     };
 
-function useSuspenseCache(override) {
-    var context$1 = React.useContext(context.getApolloContext());
-    var suspenseCache = override || context$1.suspenseCache;
-    globals.invariant(suspenseCache, 54);
-    return suspenseCache;
+var QUERY_REFERENCE_SYMBOL = Symbol();
+var OBSERVED_CHANGED_OPTIONS = [
+    '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.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);
+        this.key = options.key;
+        if (options.onDispose) {
+            this.onDispose = options.onDispose;
+        }
+        if (core.isNetworkRequestSettled(this.result.networkStatus) ||
+            (this.result.data &&
+                (!this.result.partial || this.watchQueryOptions.returnPartialData))) {
+            this.promise = utilities.createFulfilledPromise(this.result);
+            this.status = 'idle';
+        }
+        else {
+            this.promise = new Promise(function (resolve, reject) {
+                _this.resolve = resolve;
+                _this.reject = reject;
+            });
+        }
+        this.subscription = observable
+            .filter(function (_a) {
+            var data = _a.data;
+            return !equality.equal(data, {});
+        })
+            .subscribe({
+            next: this.handleNext,
+            error: this.handleError,
+        });
+        this.autoDisposeTimeoutId = setTimeout(this.dispose, (_a = options.autoDisposeTimeoutMs) !== null && _a !== void 0 ? _a : 30000);
+    }
+    Object.defineProperty(InternalQueryReference.prototype, "watchQueryOptions", {
+        get: function () {
+            return this.observable.options;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    InternalQueryReference.prototype.retain = function () {
+        var _this = this;
+        this.references++;
+        clearTimeout(this.autoDisposeTimeoutId);
+        var disposed = false;
+        return function () {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            _this.references--;
+            setTimeout(function () {
+                if (!_this.references) {
+                    _this.dispose();
+                }
+            });
+        };
+    };
+    InternalQueryReference.prototype.didChangeOptions = function (watchQueryOptions) {
+        var _this = this;
+        return OBSERVED_CHANGED_OPTIONS.some(function (option) {
+            return !equality.equal(_this.watchQueryOptions[option], watchQueryOptions[option]);
+        });
+    };
+    InternalQueryReference.prototype.applyOptions = function (watchQueryOptions) {
+        var _a = this.watchQueryOptions, currentFetchPolicy = _a.fetchPolicy, currentCanonizeResults = _a.canonizeResults;
+        if (currentFetchPolicy === 'standby' &&
+            currentFetchPolicy !== watchQueryOptions.fetchPolicy) {
+            this.observable.reobserve(watchQueryOptions);
+            this.initiateFetch();
+        }
+        else {
+            this.observable.silentSetOptions(watchQueryOptions);
+            if (currentCanonizeResults !== watchQueryOptions.canonizeResults) {
+                this.result = tslib.__assign(tslib.__assign({}, this.result), this.observable.getCurrentResult());
+                this.promise = utilities.createFulfilledPromise(this.result);
+            }
+        }
+        return this.promise;
+    };
+    InternalQueryReference.prototype.listen = function (listener) {
+        var _this = this;
+        this.listeners.add(listener);
+        return function () {
+            _this.listeners.delete(listener);
+        };
+    };
+    InternalQueryReference.prototype.refetch = function (variables) {
+        var promise = this.observable.refetch(variables);
+        this.initiateFetch();
+        return promise;
+    };
+    InternalQueryReference.prototype.fetchMore = function (options) {
+        var promise = this.observable.fetchMore(options);
+        this.initiateFetch();
+        return promise;
+    };
+    InternalQueryReference.prototype.dispose = function () {
+        this.subscription.unsubscribe();
+        this.onDispose();
+    };
+    InternalQueryReference.prototype.onDispose = function () {
+    };
+    InternalQueryReference.prototype.handleNext = function (result) {
+        var _a;
+        switch (this.status) {
+            case 'loading': {
+                if (result.data === void 0) {
+                    result.data = this.result.data;
+                }
+                this.status = 'idle';
+                this.result = result;
+                (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, result);
+                break;
+            }
+            case 'idle': {
+                if (result.data === this.result.data) {
+                    return;
+                }
+                if (result.data === void 0) {
+                    result.data = this.result.data;
+                }
+                this.result = result;
+                this.promise = utilities.createFulfilledPromise(result);
+                this.deliver(this.promise);
+                break;
+            }
+        }
+    };
+    InternalQueryReference.prototype.handleError = function (error) {
+        var _a;
+        switch (this.status) {
+            case 'loading': {
+                this.status = 'idle';
+                (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, error);
+                break;
+            }
+            case 'idle': {
+                this.promise = utilities.createRejectedPromise(error);
+                this.deliver(this.promise);
+            }
+        }
+    };
+    InternalQueryReference.prototype.deliver = function (promise) {
+        this.listeners.forEach(function (listener) { return listener(promise); });
+    };
+    InternalQueryReference.prototype.initiateFetch = function () {
+        var _this = this;
+        this.status = 'loading';
+        this.promise = new Promise(function (resolve, reject) {
+            _this.resolve = resolve;
+            _this.reject = reject;
+        });
+        this.promise.catch(function () { });
+    };
+    return InternalQueryReference;
+}());
+
+var SuspenseCache = (function () {
+    function SuspenseCache(options) {
+        if (options === void 0) { options = Object.create(null); }
+        this.queryRefs = new trie.Trie(utilities.canUseWeakMap);
+        this.options = options;
+    }
+    SuspenseCache.prototype.getQueryRef = function (cacheKey, createObservable) {
+        var ref = this.queryRefs.lookupArray(cacheKey);
+        if (!ref.current) {
+            ref.current = new InternalQueryReference(createObservable(), {
+                key: cacheKey,
+                autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
+                onDispose: function () {
+                    delete ref.current;
+                },
+            });
+        }
+        return ref.current;
+    };
+    return SuspenseCache;
+}());
+
+var suspenseCacheSymbol = Symbol.for('apollo.suspenseCache');
+function getSuspenseCache(client) {
+    var _a;
+    if (!client[suspenseCacheSymbol]) {
+        client[suspenseCacheSymbol] = new SuspenseCache((_a = client.defaultOptions.react) === null || _a === void 0 ? void 0 : _a.suspense);
+    }
+    return client[suspenseCacheSymbol];
 }
 
 function useSuspenseQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
-    var suspenseCache = useSuspenseCache(options.suspenseCache);
+    var suspenseCache = getSuspenseCache(client);
     var watchQueryOptions = useWatchQueryOptions({ client: client, query: query, options: options });
     var fetchPolicy = watchQueryOptions.fetchPolicy, variables = watchQueryOptions.variables;
     var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
-    var cacheKey = [client, query, cache.canonicalStringify(variables)].concat(queryKey);
+    var cacheKey = tslib.__spreadArray([
+        query,
+        cache.canonicalStringify(variables)
+    ], [].concat(queryKey), true);
     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 _b = React__namespace.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
     var promise = promiseCache.get(queryRef.key);
     if (queryRef.didChangeOptions(watchQueryOptions)) {
         promise = queryRef.applyOptions(watchQueryOptions);
@@ -778,15 +970,19 @@ function useSuspenseQuery(query, options) {
         promise = queryRef.promise;
         promiseCache.set(queryRef.key, promise);
     }
-    useTrackedQueryRefs(queryRef);
-    React.useEffect(function () {
-        return queryRef.listen(function (promise) {
+    React__namespace.useEffect(function () {
+        var dispose = queryRef.retain();
+        var removeListener = queryRef.listen(function (promise) {
             setPromiseCache(function (promiseCache) {
                 return new Map(promiseCache).set(queryRef.key, promise);
             });
         });
+        return function () {
+            removeListener();
+            dispose();
+        };
     }, [queryRef]);
-    var skipResult = React.useMemo(function () {
+    var skipResult = React__namespace.useMemo(function () {
         var error = toApolloError(queryRef.result);
         return {
             loading: false,
@@ -796,22 +992,22 @@ function useSuspenseQuery(query, options) {
         };
     }, [queryRef.result]);
     var result = fetchPolicy === 'standby' ? skipResult : __use(promise);
-    var fetchMore = React.useCallback(function (options) {
+    var fetchMore = React__namespace.useCallback(function (options) {
         var promise = queryRef.fetchMore(options);
         setPromiseCache(function (previousPromiseCache) {
-            return new Map(previousPromiseCache).set(queryRef.key, promise);
+            return new Map(previousPromiseCache).set(queryRef.key, queryRef.promise);
         });
         return promise;
     }, [queryRef]);
-    var refetch = React.useCallback(function (variables) {
+    var refetch = React__namespace.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
         setPromiseCache(function (previousPromiseCache) {
-            return new Map(previousPromiseCache).set(queryRef.key, promise);
+            return new Map(previousPromiseCache).set(queryRef.key, queryRef.promise);
         });
         return promise;
     }, [queryRef]);
-    var subscribeToMore = React.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
-    return React.useMemo(function () {
+    var subscribeToMore = React__namespace.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
+    return React__namespace.useMemo(function () {
         return {
             client: client,
             data: result.data,
@@ -837,11 +1033,11 @@ function validateFetchPolicy(fetchPolicy) {
         'no-cache',
         'cache-and-network',
     ];
-    globals.invariant(supportedFetchPolicies.includes(fetchPolicy), 55, fetchPolicy);
+    globals.invariant(supportedFetchPolicies.includes(fetchPolicy), 54, fetchPolicy);
 }
 function validatePartialDataReturn(fetchPolicy, returnPartialData) {
     if (fetchPolicy === 'no-cache' && returnPartialData) {
-        globals.__DEV__ && globals.invariant.warn(56);
+        globalThis.__DEV__ !== false && globals.invariant.warn(55);
     }
 }
 function toApolloError(result) {
@@ -849,13 +1045,6 @@ function toApolloError(result) {
         ? new core.ApolloError({ graphQLErrors: result.errors })
         : result.error;
 }
-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 client = _a.client, query = _a.query, options = _a.options;
     return useDeepMemo(function () {
@@ -864,7 +1053,7 @@ function useWatchQueryOptions(_a) {
             ((_a = client.defaultOptions.watchQuery) === null || _a === void 0 ? void 0 : _a.fetchPolicy) ||
             'cache-first';
         var watchQueryOptions = tslib.__assign(tslib.__assign({}, options), { fetchPolicy: fetchPolicy, query: query, notifyOnNetworkStatusChange: false, nextFetchPolicy: void 0 });
-        if (globals.__DEV__) {
+        if (globalThis.__DEV__ !== false) {
             validateOptions(watchQueryOptions);
         }
         if (options.skip) {
@@ -874,183 +1063,42 @@ function useWatchQueryOptions(_a) {
     }, [client, options, query]);
 }
 
-var QUERY_REFERENCE_SYMBOL = Symbol();
-var OBSERVED_CHANGED_OPTIONS = [
-    'canonizeResults',
-    'context',
-    'errorPolicy',
-    'fetchPolicy',
-    'refetchWritePolicy',
-    'returnPartialData',
-];
-((function () {
-    function InternalQueryReference(observable, options) {
-        var _this = this;
-        var _a;
-        this.listeners = new Set();
-        this.initialized = false;
-        this.refetching = false;
-        this.listen = this.listen.bind(this);
-        this.handleNext = this.handleNext.bind(this);
-        this.handleError = this.handleError.bind(this);
-        this.dispose = this.dispose.bind(this);
-        this.observable = observable;
-        this.result = observable.getCurrentResult(false);
-        this.key = options.key;
-        if (options.onDispose) {
-            this.onDispose = options.onDispose;
-        }
-        if (core.isNetworkRequestSettled(this.result.networkStatus) ||
-            (this.result.data &&
-                (!this.result.partial || this.observable.options.returnPartialData))) {
-            this.promise = utilities.createFulfilledPromise(this.result);
-            this.initialized = true;
-            this.refetching = false;
-        }
-        this.subscription = observable.subscribe({
-            next: this.handleNext,
-            error: this.handleError,
-        });
-        if (!this.promise) {
-            this.promise = new Promise(function (resolve, reject) {
-                _this.resolve = resolve;
-                _this.reject = reject;
-            });
-        }
-        this.autoDisposeTimeoutId = setTimeout(this.dispose, (_a = options.autoDisposeTimeoutMs) !== null && _a !== void 0 ? _a : 30000);
-    }
-    Object.defineProperty(InternalQueryReference.prototype, "watchQueryOptions", {
-        get: function () {
-            return this.observable.options;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    InternalQueryReference.prototype.didChangeOptions = function (watchQueryOptions) {
-        var _this = this;
-        return OBSERVED_CHANGED_OPTIONS.some(function (option) {
-            return !equality.equal(_this.watchQueryOptions[option], watchQueryOptions[option]);
-        });
-    };
-    InternalQueryReference.prototype.applyOptions = function (watchQueryOptions) {
-        var currentFetchPolicy = this.watchQueryOptions.fetchPolicy;
-        if (currentFetchPolicy === 'standby' &&
-            currentFetchPolicy !== watchQueryOptions.fetchPolicy) {
-            this.promise = this.observable.reobserve(watchQueryOptions);
-        }
-        else {
-            this.observable.silentSetOptions(watchQueryOptions);
-            this.result = tslib.__assign(tslib.__assign({}, this.result), this.observable.getCurrentResult());
-            this.promise = utilities.createFulfilledPromise(this.result);
-        }
-        return this.promise;
-    };
-    InternalQueryReference.prototype.listen = function (listener) {
-        var _this = this;
-        clearTimeout(this.autoDisposeTimeoutId);
-        this.listeners.add(listener);
-        return function () {
-            _this.listeners.delete(listener);
-        };
-    };
-    InternalQueryReference.prototype.refetch = function (variables) {
-        this.refetching = true;
-        var promise = this.observable.refetch(variables);
-        this.promise = promise;
-        return promise;
-    };
-    InternalQueryReference.prototype.fetchMore = function (options) {
-        var promise = this.observable.fetchMore(options);
-        this.promise = promise;
-        return promise;
-    };
-    InternalQueryReference.prototype.reobserve = function (watchQueryOptions) {
-        var promise = this.observable.reobserve(watchQueryOptions);
-        this.promise = promise;
-        return promise;
-    };
-    InternalQueryReference.prototype.dispose = function () {
-        this.subscription.unsubscribe();
-        this.onDispose();
-    };
-    InternalQueryReference.prototype.onDispose = function () {
-    };
-    InternalQueryReference.prototype.handleNext = function (result) {
-        if (!this.initialized || this.refetching) {
-            if (!core.isNetworkRequestSettled(result.networkStatus)) {
-                return;
-            }
-            if (this.result.data && result.data === void 0) {
-                result.data = this.result.data;
-            }
-            this.initialized = true;
-            this.refetching = false;
-            this.result = result;
-            if (this.resolve) {
-                this.resolve(result);
-            }
-            return;
-        }
-        if (result.data === this.result.data) {
-            return;
-        }
-        this.result = result;
-        this.promise = utilities.createFulfilledPromise(result);
-        this.deliver(this.promise);
-    };
-    InternalQueryReference.prototype.handleError = function (error) {
-        var result = tslib.__assign(tslib.__assign({}, this.result), { error: error, networkStatus: core.NetworkStatus.error });
-        this.result = result;
-        if (!this.initialized || this.refetching) {
-            this.initialized = true;
-            this.refetching = false;
-            if (this.reject) {
-                this.reject(error);
-            }
-            return;
-        }
-        this.promise = utilities.createRejectedPromise(error);
-        this.deliver(this.promise);
-    };
-    InternalQueryReference.prototype.deliver = function (promise) {
-        this.listeners.forEach(function (listener) { return listener(promise); });
-    };
-    return InternalQueryReference;
-})());
-
 function useBackgroundQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
-    var suspenseCache = useSuspenseCache(options.suspenseCache);
     var client = useApolloClient(options.client);
+    var suspenseCache = getSuspenseCache(client);
     var watchQueryOptions = useWatchQueryOptions({ client: client, 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 cacheKey = tslib.__spreadArray([
+        query,
+        cache.canonicalStringify(variables)
+    ], [].concat(queryKey), true);
     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 _b = React__namespace.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
     if (queryRef.didChangeOptions(watchQueryOptions)) {
         var promise = queryRef.applyOptions(watchQueryOptions);
         promiseCache.set(queryRef.key, promise);
     }
-    useTrackedQueryRefs(queryRef);
-    var fetchMore = React.useCallback(function (options) {
+    React__namespace.useEffect(function () { return queryRef.retain(); }, [queryRef]);
+    var fetchMore = React__namespace.useCallback(function (options) {
         var promise = queryRef.fetchMore(options);
         setPromiseCache(function (promiseCache) {
-            return new Map(promiseCache).set(queryRef.key, promise);
+            return new Map(promiseCache).set(queryRef.key, queryRef.promise);
         });
         return promise;
     }, [queryRef]);
-    var refetch = React.useCallback(function (variables) {
+    var refetch = React__namespace.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
         setPromiseCache(function (promiseCache) {
-            return new Map(promiseCache).set(queryRef.key, promise);
+            return new Map(promiseCache).set(queryRef.key, queryRef.promise);
         });
         return promise;
     }, [queryRef]);
     queryRef.promiseCache = promiseCache;
-    return React.useMemo(function () {
+    return React__namespace.useMemo(function () {
         var _a;
         return [
             (_a = {}, _a[QUERY_REFERENCE_SYMBOL] = queryRef, _a),
@@ -1063,10 +1111,10 @@ function useBackgroundQuery(query, options) {
 }
 
 function useReadQuery(queryRef) {
-    var _a = React.useState(0), forceUpdate = _a[1];
+    var _a = React__namespace.useState(0), forceUpdate = _a[1];
     var internalQueryRef = queryRef[QUERY_REFERENCE_SYMBOL];
     invariant__default(internalQueryRef.promiseCache, 49);
-    var skipResult = React.useMemo(function () {
+    var skipResult = React__namespace.useMemo(function () {
         var error = toApolloError(internalQueryRef.result);
         return {
             loading: false,
@@ -1080,7 +1128,7 @@ function useReadQuery(queryRef) {
         promise = internalQueryRef.promise;
         internalQueryRef.promiseCache.set(internalQueryRef.key, promise);
     }
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
         return internalQueryRef.listen(function (promise) {
             internalQueryRef.promiseCache.set(internalQueryRef.key, promise);
             forceUpdate(function (prevState) { return prevState + 1; });
@@ -1089,7 +1137,7 @@ function useReadQuery(queryRef) {
     var result = internalQueryRef.watchQueryOptions.fetchPolicy === 'standby'
         ? skipResult
         : __use(promise);
-    return React.useMemo(function () {
+    return React__namespace.useMemo(function () {
         return {
             data: result.data,
             networkStatus: result.networkStatus,