@apollo/client 3.9.0-alpha.3 → 3.9.0-alpha.5

package/react/hooks/hooks.cjs.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var globals = require('../../utilities/globals');
-var React = require('react');
+var React = require('rehackt');
 var context = require('../context');
 var tslib = require('tslib');
 var utilities = require('../../utilities');
@@ -41,7 +41,8 @@ var realHook$1 = React__namespace[uSESKey];
 var useSyncExternalStore = realHook$1 ||
     (function (subscribe, getSnapshot, getServerSnapshot) {
         var value = getSnapshot();
-        if (globalThis.__DEV__ !== false &&
+        if (
+        globalThis.__DEV__ !== false &&
             !didWarnUncachedGetSnapshot &&
             value !== getSnapshot()) {
             didWarnUncachedGetSnapshot = true;
@@ -99,7 +100,7 @@ function useInternalState(client, query) {
     state.forceUpdateState = React__namespace.useReducer(function (tick) { return tick + 1; }, 0)[1];
     return state;
 }
-var InternalState = (function () {
+var InternalState =  (function () {
     function InternalState(client, query, previous) {
         var _this = this;
         this.client = client;
@@ -126,7 +127,7 @@ var InternalState = (function () {
         }
     }
     InternalState.prototype.forceUpdateState = function () {
-        globalThis.__DEV__ !== false && globals.invariant.warn(50);
+        globalThis.__DEV__ !== false && globals.invariant.warn(51);
     };
     InternalState.prototype.executeQuery = function (options) {
         var _this = this;
@@ -249,7 +250,8 @@ var InternalState = (function () {
     InternalState.prototype.createWatchQueryOptions = function (_a) {
         var _b;
         if (_a === void 0) { _a = {}; }
-        var skip = _a.skip; _a.ssr; _a.onCompleted; _a.onError; _a.defaultOptions; var otherOptions = tslib.__rest(_a, ["skip", "ssr", "onCompleted", "onError", "defaultOptions"]);
+        var skip = _a.skip; _a.ssr; _a.onCompleted; _a.onError; _a.defaultOptions;
+        var otherOptions = tslib.__rest(_a, ["skip", "ssr", "onCompleted", "onError", "defaultOptions"]);
         var watchQueryOptions = Object.assign(otherOptions, { query: this.query });
         if (this.renderPromises &&
             (watchQueryOptions.fetchPolicy === "network-only" ||
@@ -335,8 +337,8 @@ var InternalState = (function () {
         }
     };
     InternalState.prototype.toApolloError = function (result) {
-        return utilities.isNonEmptyArray(result.errors)
-            ? new errors.ApolloError({ graphQLErrors: result.errors })
+        return utilities.isNonEmptyArray(result.errors) ?
+            new errors.ApolloError({ graphQLErrors: result.errors })
             : result.error;
     };
     InternalState.prototype.getCurrentResult = function () {
@@ -416,10 +418,10 @@ function useLazyQuery(query, options) {
     }, []);
     Object.assign(result, eagerMethods);
     var execute = React__namespace.useCallback(function (executeOptions) {
-        execOptionsRef.current = executeOptions
-            ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
-            fetchPolicy: initialFetchPolicy,
-        };
+        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
             .executeQuery(tslib.__assign(tslib.__assign({}, options), { skip: false }))
@@ -472,8 +474,8 @@ function useMutation(mutation, options) {
             .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 })
+            var error = errors$1 && errors$1.length > 0 ?
+                new errors.ApolloError({ graphQLErrors: errors$1 })
                 : void 0;
             var onError = executeOptions.onError || ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError);
             if (error && onError) {
@@ -522,7 +524,9 @@ function useMutation(mutation, options) {
     }, []);
     var reset = React__namespace.useCallback(function () {
         if (ref.current.isMounted) {
-            setResult({ called: false, loading: false, client: client });
+            var result_3 = { called: false, loading: false, client: client };
+            Object.assign(ref.current, { mutationId: 0, result: result_3 });
+            setResult(result_3);
         }
     }, []);
     React__namespace.useEffect(function () {
@@ -695,9 +699,9 @@ function useFragment(options) {
     var latestDiff = cache.diff(diffOptions);
     var getSnapshot = function () {
         var latestDiffToResult = diffToResult(latestDiff);
-        return resultRef.current &&
-            equality.equal(resultRef.current.data, latestDiffToResult.data)
-            ? resultRef.current
+        return (resultRef.current &&
+            equality.equal(resultRef.current.data, latestDiffToResult.data)) ?
+            resultRef.current
             : (resultRef.current = latestDiffToResult);
     };
     return useSyncExternalStore(function (forceUpdate) {
@@ -733,6 +737,18 @@ function useDeepMemo(memoFn, deps) {
     return ref.current.value;
 }
 
+function getRenderDispatcher() {
+    var _a, _b;
+    return (_b = (_a = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _a === void 0 ? void 0 : _a.ReactCurrentDispatcher) === null || _b === void 0 ? void 0 : _b.current;
+}
+var RenderDispatcher = null;
+function useRenderGuard() {
+    RenderDispatcher = getRenderDispatcher();
+    return React__namespace.useCallback(function () {
+        return (RenderDispatcher !== null && RenderDispatcher === getRenderDispatcher());
+    }, []);
+}
+
 var useKey = "use";
 var realHook = React__namespace[useKey];
 var __use = realHook ||
@@ -749,12 +765,27 @@ var __use = realHook ||
     };
 
 var QUERY_REFERENCE_SYMBOL = Symbol();
+var PROMISE_SYMBOL = Symbol();
 function wrapQueryRef(internalQueryRef) {
     var _a;
-    return _a = {}, _a[QUERY_REFERENCE_SYMBOL] = internalQueryRef, _a;
+    return _a = {},
+        _a[QUERY_REFERENCE_SYMBOL] = internalQueryRef,
+        _a[PROMISE_SYMBOL] = internalQueryRef.promise,
+        _a;
 }
 function unwrapQueryRef(queryRef) {
-    return queryRef[QUERY_REFERENCE_SYMBOL];
+    var internalQueryRef = queryRef[QUERY_REFERENCE_SYMBOL];
+    return [
+        internalQueryRef,
+        function () {
+            return internalQueryRef.promise.status === "fulfilled" ?
+                internalQueryRef.promise
+                : queryRef[PROMISE_SYMBOL];
+        },
+    ];
+}
+function updateWrappedQueryRef(queryRef, promise) {
+    queryRef[PROMISE_SYMBOL] = promise;
 }
 var OBSERVED_CHANGED_OPTIONS = [
     "canonizeResults",
@@ -764,9 +795,10 @@ var OBSERVED_CHANGED_OPTIONS = [
     "refetchWritePolicy",
     "returnPartialData",
 ];
-var InternalQueryReference = (function () {
+var InternalQueryReference =  (function () {
     function InternalQueryReference(observable, options) {
         var _this = this;
+        this.key = {};
         this.listeners = new Set();
         this.status = "loading";
         this.references = 0;
@@ -775,7 +807,6 @@ var InternalQueryReference = (function () {
         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;
         }
@@ -786,10 +817,10 @@ var InternalQueryReference = (function () {
             this.status = "idle";
         }
         else {
-            this.promise = new Promise(function (resolve, reject) {
+            this.promise = utilities.wrapPromiseWithState(new Promise(function (resolve, reject) {
                 _this.resolve = resolve;
                 _this.reject = reject;
-            });
+            }));
         }
         this.subscription = observable
             .filter(function (_a) {
@@ -921,10 +952,10 @@ var InternalQueryReference = (function () {
     InternalQueryReference.prototype.initiateFetch = function (returnedPromise) {
         var _this = this;
         this.status = "loading";
-        this.promise = new Promise(function (resolve, reject) {
+        this.promise = utilities.wrapPromiseWithState(new Promise(function (resolve, reject) {
             _this.resolve = resolve;
             _this.reject = reject;
-        });
+        }));
         this.promise.catch(function () { });
         returnedPromise
             .then(function (result) {
@@ -941,7 +972,7 @@ var InternalQueryReference = (function () {
     return InternalQueryReference;
 }());
 
-var SuspenseCache = (function () {
+var SuspenseCache =  (function () {
     function SuspenseCache(options) {
         if (options === void 0) { options = Object.create(null); }
         this.queryRefs = new trie.Trie(utilities.canUseWeakMap);
@@ -951,7 +982,6 @@ var SuspenseCache = (function () {
         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;
@@ -978,7 +1008,11 @@ function useSuspenseQuery(query, options) {
     if (options === void 0) { options = Object.create(null); }
     var client = useApolloClient(options.client);
     var suspenseCache = getSuspenseCache(client);
-    var watchQueryOptions = useWatchQueryOptions({ client: client, query: query, options: options });
+    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 = tslib.__spreadArray([
@@ -988,22 +1022,19 @@ function useSuspenseQuery(query, options) {
     var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
         return client.watchQuery(watchQueryOptions);
     });
-    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);
-        promiseCache.set(queryRef.key, promise);
+    var _b = React__namespace.useState([queryRef.key, queryRef.promise]), current = _b[0], setPromise = _b[1];
+    if (current[0] !== queryRef.key) {
+        current[0] = queryRef.key;
+        current[1] = queryRef.promise;
     }
-    if (!promise) {
-        promise = queryRef.promise;
-        promiseCache.set(queryRef.key, promise);
+    var promise = current[1];
+    if (queryRef.didChangeOptions(watchQueryOptions)) {
+        current[1] = promise = queryRef.applyOptions(watchQueryOptions);
     }
     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);
-            });
+            setPromise([queryRef.key, promise]);
         });
         return function () {
             removeListener();
@@ -1020,18 +1051,14 @@ function useSuspenseQuery(query, options) {
         };
     }, [queryRef.result]);
     var result = fetchPolicy === "standby" ? skipResult : __use(promise);
-    var fetchMore = React__namespace.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, queryRef.promise);
-        });
+        setPromise([queryRef.key, queryRef.promise]);
         return promise;
-    }, [queryRef]);
+    }), [queryRef]);
     var refetch = React__namespace.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
-        setPromiseCache(function (previousPromiseCache) {
-            return new Map(previousPromiseCache).set(queryRef.key, queryRef.promise);
-        });
+        setPromise([queryRef.key, queryRef.promise]);
         return promise;
     }, [queryRef]);
     var subscribeToMore = React__namespace.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
@@ -1069,8 +1096,8 @@ function validatePartialDataReturn(fetchPolicy, returnPartialData) {
     }
 }
 function toApolloError(result) {
-    return utilities.isNonEmptyArray(result.errors)
-        ? new core.ApolloError({ graphQLErrors: result.errors })
+    return utilities.isNonEmptyArray(result.errors) ?
+        new core.ApolloError({ graphQLErrors: result.errors })
         : result.error;
 }
 function useWatchQueryOptions(_a) {
@@ -1110,47 +1137,91 @@ function useBackgroundQuery(query, options) {
     var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
         return client.watchQuery(watchQueryOptions);
     });
-    var _b = React__namespace.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
+    var _b = React__namespace.useState(wrapQueryRef(queryRef)), wrappedQueryRef = _b[0], setWrappedQueryRef = _b[1];
+    if (unwrapQueryRef(wrappedQueryRef)[0] !== queryRef) {
+        setWrappedQueryRef(wrapQueryRef(queryRef));
+    }
     if (queryRef.didChangeOptions(watchQueryOptions)) {
         var promise = queryRef.applyOptions(watchQueryOptions);
-        promiseCache.set(queryRef.key, promise);
+        updateWrappedQueryRef(wrappedQueryRef, promise);
     }
     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, queryRef.promise);
-        });
+        setWrappedQueryRef(wrapQueryRef(queryRef));
         return promise;
     }, [queryRef]);
     var refetch = React__namespace.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
-        setPromiseCache(function (promiseCache) {
-            return new Map(promiseCache).set(queryRef.key, queryRef.promise);
-        });
+        setWrappedQueryRef(wrapQueryRef(queryRef));
         return promise;
     }, [queryRef]);
-    queryRef.promiseCache = promiseCache;
-    var wrappedQueryRef = React__namespace.useMemo(function () { return wrapQueryRef(queryRef); }, [queryRef]);
     return [
         didFetchResult.current ? wrappedQueryRef : void 0,
         { fetchMore: fetchMore, refetch: refetch },
     ];
 }
 
-function useReadQuery(queryRef) {
-    var internalQueryRef = unwrapQueryRef(queryRef);
-    globals.invariant(internalQueryRef.promiseCache, 51);
-    var promiseCache = internalQueryRef.promiseCache, key = internalQueryRef.key;
-    if (!promiseCache.has(key)) {
-        promiseCache.set(key, internalQueryRef.promise);
+function useLoadableQuery(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    var client = useApolloClient(options.client);
+    var suspenseCache = getSuspenseCache(client);
+    var watchQueryOptions = useWatchQueryOptions({ client: client, query: query, options: options });
+    var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
+    var _b = React__namespace.useState(null), queryRef = _b[0], setQueryRef = _b[1];
+    var internalQueryRef = queryRef && unwrapQueryRef(queryRef)[0];
+    if (queryRef && (internalQueryRef === null || internalQueryRef === void 0 ? void 0 : internalQueryRef.didChangeOptions(watchQueryOptions))) {
+        var promise = internalQueryRef.applyOptions(watchQueryOptions);
+        updateWrappedQueryRef(queryRef, promise);
     }
+    var calledDuringRender = useRenderGuard();
+    React__namespace.useEffect(function () { return internalQueryRef === null || internalQueryRef === void 0 ? void 0 : internalQueryRef.retain(); }, [internalQueryRef]);
+    var fetchMore = React__namespace.useCallback(function (options) {
+        if (!internalQueryRef) {
+            throw new Error("The query has not been loaded. Please load the query.");
+        }
+        var promise = internalQueryRef.fetchMore(options);
+        setQueryRef(wrapQueryRef(internalQueryRef));
+        return promise;
+    }, [internalQueryRef]);
+    var refetch = React__namespace.useCallback(function (options) {
+        if (!internalQueryRef) {
+            throw new Error("The query has not been loaded. Please load the query.");
+        }
+        var promise = internalQueryRef.refetch(options);
+        setQueryRef(wrapQueryRef(internalQueryRef));
+        return promise;
+    }, [internalQueryRef]);
+    var loadQuery = React__namespace.useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        globals.invariant(!calledDuringRender(), 50);
+        var variables = args[0];
+        var cacheKey = tslib.__spreadArray([
+            query,
+            cache.canonicalStringify(variables)
+        ], [].concat(queryKey), true);
+        var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
+            return client.watchQuery(tslib.__assign(tslib.__assign({}, watchQueryOptions), { variables: variables }));
+        });
+        setQueryRef(wrapQueryRef(queryRef));
+    }, [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]);
+    var reset = React__namespace.useCallback(function () {
+        setQueryRef(null);
+    }, [queryRef]);
+    return [loadQuery, queryRef, { fetchMore: fetchMore, refetch: refetch, reset: reset }];
+}
+
+function useReadQuery(queryRef) {
+    var _a = React__namespace.useMemo(function () { return unwrapQueryRef(queryRef); }, [queryRef]), internalQueryRef = _a[0], getPromise = _a[1];
     var promise = useSyncExternalStore(React__namespace.useCallback(function (forceUpdate) {
         return internalQueryRef.listen(function (promise) {
-            internalQueryRef.promiseCache.set(internalQueryRef.key, promise);
+            updateWrappedQueryRef(queryRef, promise);
             forceUpdate();
         });
-    }, [internalQueryRef]), function () { return promiseCache.get(key); }, function () { return promiseCache.get(key); });
+    }, [internalQueryRef]), getPromise, getPromise);
     var result = __use(promise);
     return React__namespace.useMemo(function () {
         return {
@@ -1166,6 +1237,7 @@ exports.useApolloClient = useApolloClient;
 exports.useBackgroundQuery = useBackgroundQuery;
 exports.useFragment = useFragment;
 exports.useLazyQuery = useLazyQuery;
+exports.useLoadableQuery = useLoadableQuery;
 exports.useMutation = useMutation;
 exports.useQuery = useQuery;
 exports.useReactiveVar = useReactiveVar;

package/react/hooks/index.d.ts

@@ -10,6 +10,8 @@ export type { UseSuspenseQueryResult } from "./useSuspenseQuery.js";
 export { useSuspenseQuery } from "./useSuspenseQuery.js";
 export type { UseBackgroundQueryResult } from "./useBackgroundQuery.js";
 export { useBackgroundQuery } from "./useBackgroundQuery.js";
+export type { LoadQueryFunction, UseLoadableQueryResult, } from "./useLoadableQuery.js";
+export { useLoadableQuery } from "./useLoadableQuery.js";
 export type { UseReadQueryResult } from "./useReadQuery.js";
 export { useReadQuery } from "./useReadQuery.js";
 export { skipToken } from "./constants.js";

package/react/hooks/index.js

@@ -8,6 +8,7 @@ export * from "./useReactiveVar.js";
 export * from "./useFragment.js";
 export { useSuspenseQuery } from "./useSuspenseQuery.js";
 export { useBackgroundQuery } from "./useBackgroundQuery.js";
+export { useLoadableQuery } from "./useLoadableQuery.js";
 export { useReadQuery } from "./useReadQuery.js";
 export { skipToken } from "./constants.js";
 //# sourceMappingURL=index.js.map

package/react/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAE1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["import \"../../utilities/globals/index.js\";\n\nexport * from \"./useApolloClient.js\";\nexport * from \"./useLazyQuery.js\";\nexport * from \"./useMutation.js\";\nexport { useQuery } from \"./useQuery.js\";\nexport * from \"./useSubscription.js\";\nexport * from \"./useReactiveVar.js\";\nexport * from \"./useFragment.js\";\nexport type { UseSuspenseQueryResult } from \"./useSuspenseQuery.js\";\nexport { useSuspenseQuery } from \"./useSuspenseQuery.js\";\nexport type { UseBackgroundQueryResult } from \"./useBackgroundQuery.js\";\nexport { useBackgroundQuery } from \"./useBackgroundQuery.js\";\nexport type { UseReadQueryResult } from \"./useReadQuery.js\";\nexport { useReadQuery } from \"./useReadQuery.js\";\nexport { skipToken } from \"./constants.js\";\nexport type { SkipToken } from \"./constants.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAE1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAK7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["import \"../../utilities/globals/index.js\";\n\nexport * from \"./useApolloClient.js\";\nexport * from \"./useLazyQuery.js\";\nexport * from \"./useMutation.js\";\nexport { useQuery } from \"./useQuery.js\";\nexport * from \"./useSubscription.js\";\nexport * from \"./useReactiveVar.js\";\nexport * from \"./useFragment.js\";\nexport type { UseSuspenseQueryResult } from \"./useSuspenseQuery.js\";\nexport { useSuspenseQuery } from \"./useSuspenseQuery.js\";\nexport type { UseBackgroundQueryResult } from \"./useBackgroundQuery.js\";\nexport { useBackgroundQuery } from \"./useBackgroundQuery.js\";\nexport type {\n  LoadQueryFunction,\n  UseLoadableQueryResult,\n} from \"./useLoadableQuery.js\";\nexport { useLoadableQuery } from \"./useLoadableQuery.js\";\nexport type { UseReadQueryResult } from \"./useReadQuery.js\";\nexport { useReadQuery } from \"./useReadQuery.js\";\nexport { skipToken } from \"./constants.js\";\nexport type { SkipToken } from \"./constants.js\";\n"]}

package/react/hooks/internal/__use.js

@@ -1,7 +1,12 @@
 import { wrapPromiseWithState } from "../../../utilities/index.js";
-import * as React from "react";
+import * as React from "rehackt";
+// Prevent webpack from complaining about our feature detection of the
+// use property of the React namespace, which is expected not
+// to exist when using current stable versions, and that's fine.
 var useKey = "use";
 var realHook = React[useKey];
+// This is named with two underscores to allow this hook to evade typical rules of
+// hooks (i.e. it can be used conditionally)
 export var __use = realHook ||
     function __use(promise) {
         var statefulPromise = wrapPromiseWithState(promise);

package/react/hooks/internal/__use.js.map

@@ -1 +1 @@
-{"version":3,"file":"__use.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/__use.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,IAAM,MAAM,GAAG,KAA2B,CAAC;AAC3C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAoB,CAAC;AAIlD,MAAM,CAAC,IAAM,KAAK,GAChB,QAAQ;IACR,SAAS,KAAK,CAAS,OAAwB;QAC7C,IAAM,eAAe,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAEtD,QAAQ,eAAe,CAAC,MAAM,EAAE;YAC9B,KAAK,SAAS;gBACZ,MAAM,eAAe,CAAC;YACxB,KAAK,UAAU;gBACb,MAAM,eAAe,CAAC,MAAM,CAAC;YAC/B,KAAK,WAAW;gBACd,OAAO,eAAe,CAAC,KAAK,CAAC;SAChC;IACH,CAAC,CAAC","sourcesContent":["import { wrapPromiseWithState } from \"../../../utilities/index.js\";\nimport * as React from \"react\";\n\ntype Use = <T>(promise: Promise<T>) => T;\n// Prevent webpack from complaining about our feature detection of the\n// use property of the React namespace, which is expected not\n// to exist when using current stable versions, and that's fine.\nconst useKey = \"use\" as keyof typeof React;\nconst realHook = React[useKey] as Use | undefined;\n\n// This is named with two underscores to allow this hook to evade typical rules of\n// hooks (i.e. it can be used conditionally)\nexport const __use =\n  realHook ||\n  function __use<TValue>(promise: Promise<TValue>) {\n    const statefulPromise = wrapPromiseWithState(promise);\n\n    switch (statefulPromise.status) {\n      case \"pending\":\n        throw statefulPromise;\n      case \"rejected\":\n        throw statefulPromise.reason;\n      case \"fulfilled\":\n        return statefulPromise.value;\n    }\n  };\n"]}
+{"version":3,"file":"__use.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/__use.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAGjC,sEAAsE;AACtE,6DAA6D;AAC7D,gEAAgE;AAChE,IAAM,MAAM,GAAG,KAA2B,CAAC;AAC3C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAoB,CAAC;AAElD,kFAAkF;AAClF,4CAA4C;AAC5C,MAAM,CAAC,IAAM,KAAK,GAChB,QAAQ;IACR,SAAS,KAAK,CAAS,OAAwB;QAC7C,IAAM,eAAe,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAEtD,QAAQ,eAAe,CAAC,MAAM,EAAE,CAAC;YAC/B,KAAK,SAAS;gBACZ,MAAM,eAAe,CAAC;YACxB,KAAK,UAAU;gBACb,MAAM,eAAe,CAAC,MAAM,CAAC;YAC/B,KAAK,WAAW;gBACd,OAAO,eAAe,CAAC,KAAK,CAAC;QACjC,CAAC;IACH,CAAC,CAAC","sourcesContent":["import { wrapPromiseWithState } from \"../../../utilities/index.js\";\nimport * as React from \"rehackt\";\n\ntype Use = <T>(promise: Promise<T>) => T;\n// Prevent webpack from complaining about our feature detection of the\n// use property of the React namespace, which is expected not\n// to exist when using current stable versions, and that's fine.\nconst useKey = \"use\" as keyof typeof React;\nconst realHook = React[useKey] as Use | undefined;\n\n// This is named with two underscores to allow this hook to evade typical rules of\n// hooks (i.e. it can be used conditionally)\nexport const __use =\n  realHook ||\n  function __use<TValue>(promise: Promise<TValue>) {\n    const statefulPromise = wrapPromiseWithState(promise);\n\n    switch (statefulPromise.status) {\n      case \"pending\":\n        throw statefulPromise;\n      case \"rejected\":\n        throw statefulPromise.reason;\n      case \"fulfilled\":\n        return statefulPromise.value;\n    }\n  };\n"]}

package/react/hooks/internal/index.d.ts

@@ -1,4 +1,5 @@
 export { useDeepMemo } from "./useDeepMemo.js";
 export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useRenderGuard } from "./useRenderGuard.js";
 export { __use } from "./__use.js";
 //# sourceMappingURL=index.d.ts.map

package/react/hooks/internal/index.js

@@ -1,4 +1,6 @@
+// These hooks are used internally and are not exported publicly by the library
 export { useDeepMemo } from "./useDeepMemo.js";
 export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useRenderGuard } from "./useRenderGuard.js";
 export { __use } from "./__use.js";
 //# sourceMappingURL=index.js.map

package/react/hooks/internal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC","sourcesContent":["// These hooks are used internally and are not exported publicly by the library\nexport { useDeepMemo } from \"./useDeepMemo.js\";\nexport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nexport { __use } from \"./__use.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC","sourcesContent":["// These hooks are used internally and are not exported publicly by the library\nexport { useDeepMemo } from \"./useDeepMemo.js\";\nexport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\nexport { useRenderGuard } from \"./useRenderGuard.js\";\nexport { __use } from \"./__use.js\";\n"]}

package/react/hooks/internal/useDeepMemo.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "rehackt";
 import { equal } from "@wry/equality";
 export function useDeepMemo(memoFn, deps) {
     var ref = React.useRef();

package/react/hooks/internal/useDeepMemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDeepMemo.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useDeepMemo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,UAAU,WAAW,CACzB,MAAoB,EACpB,IAAoB;IAEpB,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAA2C,CAAC;IAEpE,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE;QAClD,GAAG,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC;KACzC;IAED,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;AAC3B,CAAC","sourcesContent":["import type { DependencyList } from \"react\";\nimport * as React from \"react\";\nimport { equal } from \"@wry/equality\";\n\nexport function useDeepMemo<TValue>(\n  memoFn: () => TValue,\n  deps: DependencyList\n) {\n  const ref = React.useRef<{ deps: DependencyList; value: TValue }>();\n\n  if (!ref.current || !equal(ref.current.deps, deps)) {\n    ref.current = { value: memoFn(), deps };\n  }\n\n  return ref.current.value;\n}\n"]}
+{"version":3,"file":"useDeepMemo.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useDeepMemo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,UAAU,WAAW,CACzB,MAAoB,EACpB,IAAoB;IAEpB,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAA2C,CAAC;IAEpE,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;QACnD,GAAG,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC;IAC1C,CAAC;IAED,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;AAC3B,CAAC","sourcesContent":["import type { DependencyList } from \"react\";\nimport * as React from \"rehackt\";\nimport { equal } from \"@wry/equality\";\n\nexport function useDeepMemo<TValue>(\n  memoFn: () => TValue,\n  deps: DependencyList\n) {\n  const ref = React.useRef<{ deps: DependencyList; value: TValue }>();\n\n  if (!ref.current || !equal(ref.current.deps, deps)) {\n    ref.current = { value: memoFn(), deps };\n  }\n\n  return ref.current.value;\n}\n"]}

package/react/hooks/internal/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
+import * as React from "rehackt";
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 //# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/react/hooks/internal/useIsomorphicLayoutEffect.js

@@ -1,6 +1,9 @@
-import * as React from "react";
+import * as React from "rehackt";
 import { canUseDOM } from "../../../utilities/index.js";
-export var useIsomorphicLayoutEffect = canUseDOM
-    ? React.useLayoutEffect
-    : React.useEffect;
+// use canUseDOM here instead of canUseLayoutEffect because we want to be able
+// to use useLayoutEffect in our jest tests. useLayoutEffect seems to work fine
+// in useSuspenseQuery tests, but to honor the original comment about the
+// warnings for useSyncExternalStore implementation, canUseLayoutEffect is left
+// alone.
+export var useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
 //# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/react/hooks/internal/useIsomorphicLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,CAAC,IAAM,yBAAyB,GAAG,SAAS;IAChD,CAAC,CAAC,KAAK,CAAC,eAAe;IACvB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC","sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"../../../utilities/index.js\";\n\n// use canUseDOM here instead of canUseLayoutEffect because we want to be able\n// to use useLayoutEffect in our jest tests. useLayoutEffect seems to work fine\n// in useSuspenseQuery tests, but to honor the original comment about the\n// warnings for useSyncExternalStore implementation, canUseLayoutEffect is left\n// alone.\nexport const useIsomorphicLayoutEffect = canUseDOM\n  ? React.useLayoutEffect\n  : React.useEffect;\n"]}
+{"version":3,"file":"useIsomorphicLayoutEffect.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,8EAA8E;AAC9E,+EAA+E;AAC/E,yEAAyE;AACzE,+EAA+E;AAC/E,SAAS;AACT,MAAM,CAAC,IAAM,yBAAyB,GACpC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC","sourcesContent":["import * as React from \"rehackt\";\nimport { canUseDOM } from \"../../../utilities/index.js\";\n\n// use canUseDOM here instead of canUseLayoutEffect because we want to be able\n// to use useLayoutEffect in our jest tests. useLayoutEffect seems to work fine\n// in useSuspenseQuery tests, but to honor the original comment about the\n// warnings for useSyncExternalStore implementation, canUseLayoutEffect is left\n// alone.\nexport const useIsomorphicLayoutEffect =\n  canUseDOM ? React.useLayoutEffect : React.useEffect;\n"]}

package/react/hooks/internal/useRenderGuard.d.ts

@@ -0,0 +1,2 @@
+export declare function useRenderGuard(): () => boolean;
+//# sourceMappingURL=useRenderGuard.d.ts.map

package/react/hooks/internal/useRenderGuard.js

@@ -0,0 +1,17 @@
+import * as React from "rehackt";
+function getRenderDispatcher() {
+    var _a, _b;
+    return (_b = (_a = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _a === void 0 ? void 0 : _a.ReactCurrentDispatcher) === null || _b === void 0 ? void 0 : _b.current;
+}
+var RenderDispatcher = null;
+/*
+Relay does this too, so we hope this is safe.
+https://github.com/facebook/relay/blob/8651fbca19adbfbb79af7a3bc40834d105fd7747/packages/react-relay/relay-hooks/loadQuery.js#L90-L98
+*/
+export function useRenderGuard() {
+    RenderDispatcher = getRenderDispatcher();
+    return React.useCallback(function () {
+        return (RenderDispatcher !== null && RenderDispatcher === getRenderDispatcher());
+    }, []);
+}
+//# sourceMappingURL=useRenderGuard.js.map

package/react/hooks/internal/useRenderGuard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderGuard.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useRenderGuard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,SAAS,mBAAmB;;IAC1B,OAAO,MAAA,MAAC,KAAa,CAAC,kDAAkD,0CACpE,sBAAsB,0CAAE,OAAO,CAAC;AACtC,CAAC;AAED,IAAI,gBAAgB,GAAY,IAAI,CAAC;AAErC;;;EAGE;AACF,MAAM,UAAU,cAAc;IAC5B,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAEzC,OAAO,KAAK,CAAC,WAAW,CAAC;QACvB,OAAO,CACL,gBAAgB,KAAK,IAAI,IAAI,gBAAgB,KAAK,mBAAmB,EAAE,CACxE,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["import * as React from \"rehackt\";\n\nfunction getRenderDispatcher() {\n  return (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n    ?.ReactCurrentDispatcher?.current;\n}\n\nlet RenderDispatcher: unknown = null;\n\n/*\nRelay does this too, so we hope this is safe.\nhttps://github.com/facebook/relay/blob/8651fbca19adbfbb79af7a3bc40834d105fd7747/packages/react-relay/relay-hooks/loadQuery.js#L90-L98\n*/\nexport function useRenderGuard() {\n  RenderDispatcher = getRenderDispatcher();\n\n  return React.useCallback(() => {\n    return (\n      RenderDispatcher !== null && RenderDispatcher === getRenderDispatcher()\n    );\n  }, []);\n}\n"]}

package/react/hooks/useApolloClient.js

@@ -1,5 +1,5 @@
 import { invariant } from "../../utilities/globals/index.js";
-import * as React from "react";
+import * as React from "rehackt";
 import { getApolloContext } from "../context/index.js";
 export function useApolloClient(override) {
     var context = React.useContext(getApolloContext());

package/react/hooks/useApolloClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"useApolloClient.js","sourceRoot":"","sources":["../../../src/react/hooks/useApolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,UAAU,eAAe,CAC7B,QAA+B;IAE/B,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACrD,IAAM,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;IAC1C,SAAS,CACP,CAAC,CAAC,MAAM,EACR,oEAAoE;QAClE,0EAA0E;QAC1E,0BAA0B,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { invariant } from \"../../utilities/globals/index.js\";\nimport * as React from \"react\";\nimport type { ApolloClient } from \"../../core/index.js\";\nimport { getApolloContext } from \"../context/index.js\";\n\nexport function useApolloClient(\n  override?: ApolloClient<object>\n): ApolloClient<object> {\n  const context = React.useContext(getApolloContext());\n  const client = override || context.client;\n  invariant(\n    !!client,\n    'Could not find \"client\" in the context or passed in as an option. ' +\n      \"Wrap the root component in an <ApolloProvider>, or pass an ApolloClient \" +\n      \"instance in via options.\"\n  );\n\n  return client;\n}\n"]}
+{"version":3,"file":"useApolloClient.js","sourceRoot":"","sources":["../../../src/react/hooks/useApolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,UAAU,eAAe,CAC7B,QAA+B;IAE/B,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACrD,IAAM,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;IAC1C,SAAS,CACP,CAAC,CAAC,MAAM,EACR,oEAAoE;QAClE,0EAA0E;QAC1E,0BAA0B,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { invariant } from \"../../utilities/globals/index.js\";\nimport * as React from \"rehackt\";\nimport type { ApolloClient } from \"../../core/index.js\";\nimport { getApolloContext } from \"../context/index.js\";\n\nexport function useApolloClient(\n  override?: ApolloClient<object>\n): ApolloClient<object> {\n  const context = React.useContext(getApolloContext());\n  const client = override || context.client;\n  invariant(\n    !!client,\n    'Could not find \"client\" in the context or passed in as an option. ' +\n      \"Wrap the root component in an <ApolloProvider>, or pass an ApolloClient \" +\n      \"instance in via options.\"\n  );\n\n  return client;\n}\n"]}

package/react/hooks/useBackgroundQuery.js

@@ -1,7 +1,7 @@
 import { __spreadArray } from "tslib";
-import * as React from "react";
+import * as React from "rehackt";
 import { useApolloClient } from "./useApolloClient.js";
-import { wrapQueryRef } from "../cache/QueryReference.js";
+import { unwrapQueryRef, updateWrappedQueryRef, wrapQueryRef, } from "../cache/QueryReference.js";
 import { getSuspenseCache } from "../cache/index.js";
 import { useWatchQueryOptions } from "./useSuspenseQuery.js";
 import { canonicalStringify } from "../../cache/index.js";
@@ -12,6 +12,12 @@ export function useBackgroundQuery(query, options) {
     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;
+    // This ref tracks the first time query execution is enabled to determine
+    // whether to return a query ref or `undefined`. When initialized
+    // in a skipped state (either via `skip: true` or `skipToken`) we return
+    // `undefined` for the `queryRef` until the query has been enabled. Once
+    // enabled, a query ref is always returned regardless of whether the query is
+    // skipped again later.
     var didFetchResult = React.useRef(fetchPolicy !== "standby");
     didFetchResult.current || (didFetchResult.current = fetchPolicy !== "standby");
     var cacheKey = __spreadArray([
@@ -21,28 +27,25 @@ export function useBackgroundQuery(query, options) {
     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.useState(wrapQueryRef(queryRef)), wrappedQueryRef = _b[0], setWrappedQueryRef = _b[1];
+    if (unwrapQueryRef(wrappedQueryRef)[0] !== queryRef) {
+        setWrappedQueryRef(wrapQueryRef(queryRef));
+    }
     if (queryRef.didChangeOptions(watchQueryOptions)) {
         var promise = queryRef.applyOptions(watchQueryOptions);
-        promiseCache.set(queryRef.key, promise);
+        updateWrappedQueryRef(wrappedQueryRef, promise);
     }
     React.useEffect(function () { return queryRef.retain(); }, [queryRef]);
     var fetchMore = React.useCallback(function (options) {
         var promise = queryRef.fetchMore(options);
-        setPromiseCache(function (promiseCache) {
-            return new Map(promiseCache).set(queryRef.key, queryRef.promise);
-        });
+        setWrappedQueryRef(wrapQueryRef(queryRef));
         return promise;
     }, [queryRef]);
     var refetch = React.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
-        setPromiseCache(function (promiseCache) {
-            return new Map(promiseCache).set(queryRef.key, queryRef.promise);
-        });
+        setWrappedQueryRef(wrapQueryRef(queryRef));
         return promise;
     }, [queryRef]);
-    queryRef.promiseCache = promiseCache;
-    var wrappedQueryRef = React.useMemo(function () { return wrapQueryRef(queryRef); }, [queryRef]);
     return [
         didFetchResult.current ? wrappedQueryRef : void 0,
         { fetchMore: fetchMore, refetch: refetch },