@apollo/client 3.10.8 → 3.11.0-rc.0

package/react/hooks/useQuery.js

@@ -1,4 +1,23 @@
 import { __assign, __rest } from "tslib";
+/**
+ * Function parameters in this file try to follow a common order for the sake of
+ * readability and consistency. The order is as follows:
+ *
+ * resultData
+ * observable
+ * client
+ * query
+ * options
+ * watchQueryOptions
+ * makeWatchQueryOptions
+ * isSSRAllowed
+ * disableNetworkFetches
+ * partialRefetch
+ * renderPromises
+ * isSyncSSR
+ * callbacks
+ */
+/** */
 import { invariant } from "../../utilities/globals/index.js";
 import * as React from "rehackt";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
@@ -9,9 +28,12 @@ import { ApolloError } from "../../errors/index.js";
 import { NetworkStatus } from "../../core/index.js";
 import { DocumentType, verifyDocumentType } from "../parser/index.js";
 import { useApolloClient } from "./useApolloClient.js";
-import { canUseWeakMap, compact, isNonEmptyArray, maybeDeepFreeze, } from "../../utilities/index.js";
+import { compact, isNonEmptyArray, maybeDeepFreeze, } from "../../utilities/index.js";
 import { wrapHook } from "./internal/index.js";
 var hasOwnProperty = Object.prototype.hasOwnProperty;
+var originalResult = Symbol();
+function noop() { }
+export var lastWatchOptions = Symbol();
 /**
  * A hook for executing queries in an Apollo application.
  *
@@ -51,290 +73,262 @@ export function useQuery(query, options) {
     return wrapHook("useQuery", _useQuery, useApolloClient(options && options.client))(query, options);
 }
 function _useQuery(query, options) {
-    return useInternalState(useApolloClient(options.client), query).useQuery(options);
+    var _a = useQueryInternals(query, options), result = _a.result, obsQueryFields = _a.obsQueryFields;
+    return React.useMemo(function () { return (__assign(__assign({}, result), obsQueryFields)); }, [result, obsQueryFields]);
 }
-export function useInternalState(client, query) {
-    // By default, InternalState.prototype.forceUpdate is an empty function, but
-    // we replace it here (before anyone has had a chance to see this state yet)
-    // with a function that unconditionally forces an update, using the latest
-    // setTick function. Updating this state by calling state.forceUpdate or the
-    // uSES notification callback are the only way we trigger React component updates.
-    var forceUpdateState = React.useReducer(function (tick) { return tick + 1; }, 0)[1];
+function useInternalState(client, query, options, renderPromises, makeWatchQueryOptions) {
     function createInternalState(previous) {
-        return Object.assign(new InternalState(client, query, previous), {
-            forceUpdateState: forceUpdateState,
-        });
+        var _a;
+        verifyDocumentType(query, DocumentType.Query);
+        var internalState = {
+            client: client,
+            query: query,
+            observable: 
+            // See if there is an existing observable that was used to fetch the same
+            // data and if so, use it instead since it will contain the proper queryId
+            // to fetch the result set. This is used during SSR.
+            (renderPromises &&
+                renderPromises.getSSRObservable(makeWatchQueryOptions())) ||
+                client.watchQuery(getObsQueryOptions(void 0, client, options, makeWatchQueryOptions())),
+            resultData: {
+                // Reuse previousData from previous InternalState (if any) to provide
+                // continuity of previousData even if/when the query or client changes.
+                previousData: (_a = previous === null || previous === void 0 ? void 0 : previous.resultData.current) === null || _a === void 0 ? void 0 : _a.data,
+            },
+        };
+        return internalState;
     }
-    var _a = React.useState(createInternalState), state = _a[0], updateState = _a[1];
-    if (client !== state.client || query !== state.query) {
+    var _a = React.useState(createInternalState), internalState = _a[0], updateInternalState = _a[1];
+    /**
+     * Used by `useLazyQuery` when a new query is executed.
+     * We keep this logic here since it needs to update things in unsafe
+     * ways and here we at least can keep track of that in a single place.
+     */
+    function onQueryExecuted(watchQueryOptions) {
+        var _a;
+        var _b;
+        // this needs to be set to prevent an immediate `resubscribe` in the
+        // next rerender of the `useQuery` internals
+        Object.assign(internalState.observable, (_a = {},
+            _a[lastWatchOptions] = watchQueryOptions,
+            _a));
+        var resultData = internalState.resultData;
+        updateInternalState(__assign(__assign({}, internalState), { 
+            // might be a different query
+            query: watchQueryOptions.query, resultData: Object.assign(resultData, {
+                // We need to modify the previous `resultData` object as we rely on the
+                // object reference in other places
+                previousData: ((_b = resultData.current) === null || _b === void 0 ? void 0 : _b.data) || resultData.previousData,
+                current: undefined,
+            }) }));
+    }
+    if (client !== internalState.client || query !== internalState.query) {
         // If the client or query have changed, we need to create a new InternalState.
         // This will trigger a re-render with the new state, but it will also continue
         // to run the current render function to completion.
         // Since we sometimes trigger some side-effects in the render function, we
         // re-assign `state` to the new state to ensure that those side-effects are
         // triggered with the new state.
-        updateState((state = createInternalState(state)));
+        var newInternalState = createInternalState(internalState);
+        updateInternalState(newInternalState);
+        return [newInternalState, onQueryExecuted];
     }
-    return state;
+    return [internalState, onQueryExecuted];
 }
-var InternalState = /** @class */ (function () {
-    function InternalState(client, query, previous) {
-        var _this = this;
-        this.client = client;
-        this.query = query;
-        /**
-         * Will be overwritten by the `useSyncExternalStore` "force update" method
-         * whenever it is available and reset to `forceUpdateState` when it isn't.
-         */
-        this.forceUpdate = function () { return _this.forceUpdateState(); };
-        this.ssrDisabledResult = maybeDeepFreeze({
-            loading: true,
-            data: void 0,
-            error: void 0,
-            networkStatus: NetworkStatus.loading,
-        });
-        this.skipStandbyResult = maybeDeepFreeze({
-            loading: false,
-            data: void 0,
-            error: void 0,
-            networkStatus: NetworkStatus.ready,
-        });
-        // This cache allows the referential stability of this.result (as returned by
-        // getCurrentResult) to translate into referential stability of the resulting
-        // QueryResult object returned by toQueryResult.
-        this.toQueryResultCache = new (canUseWeakMap ? WeakMap : Map)();
-        verifyDocumentType(query, DocumentType.Query);
-        // Reuse previousData from previous InternalState (if any) to provide
-        // continuity of previousData even if/when the query or client changes.
-        var previousResult = previous && previous.result;
-        var previousData = previousResult && previousResult.data;
-        if (previousData) {
-            this.previousData = previousData;
-        }
-    }
-    /**
-     * Forces an update using local component state.
-     * As this is not batched with `useSyncExternalStore` updates,
-     * this is only used as a fallback if the `useSyncExternalStore` "force update"
-     * method is not registered at the moment.
-     * See https://github.com/facebook/react/issues/25191
-     *  */
-    InternalState.prototype.forceUpdateState = function () {
-        // Replaced (in useInternalState) with a method that triggers an update.
-        globalThis.__DEV__ !== false && invariant.warn(51);
-    };
-    InternalState.prototype.executeQuery = function (options) {
-        var _this = this;
-        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());
-        // Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
-        // but save the current data as this.previousData, just like setResult
-        // usually does.
-        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;
-            // Subscribe to the concast independently of the ObservableQuery in case
-            // the component gets unmounted before the promise resolves. This prevents
-            // the concast from terminating early and resolving with `undefined` when
-            // there are no more subscribers for the concast.
-            concast.subscribe({
-                next: function (value) {
-                    result = value;
-                },
-                error: function () {
-                    resolve(_this.toQueryResult(_this.observable.getCurrentResult()));
-                },
-                complete: function () {
-                    resolve(_this.toQueryResult(result));
-                },
-            });
-        });
-    };
-    // Methods beginning with use- should be called according to the standard
-    // rules of React hooks: only at the top level of the calling function, and
-    // without any dynamic conditional logic.
-    InternalState.prototype.useQuery = function (options) {
-        var _this = this;
-        // The renderPromises field gets initialized here in the useQuery method, at
-        // the beginning of everything (for a given component rendering, at least),
-        // so we can safely use this.renderPromises in other/later InternalState
-        // methods without worrying it might be uninitialized. Even after
-        // initialization, this.renderPromises is usually undefined (unless SSR is
-        // happening), but that's fine as long as it has been initialized that way,
-        // rather than left uninitialized.
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        this.renderPromises = React.useContext(getApolloContext()).renderPromises;
-        this.useOptions(options);
-        var obsQuery = this.useObservableQuery();
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        var result = useSyncExternalStore(
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useCallback(function (handleStoreChange) {
-            if (_this.renderPromises) {
-                return function () { };
-            }
-            _this.forceUpdate = handleStoreChange;
-            var onNext = function () {
-                var previousResult = _this.result;
-                // We use `getCurrentResult()` instead of the onNext argument because
-                // the values differ slightly. Specifically, loading results will have
-                // an empty object for data instead of `undefined` for some reason.
-                var result = obsQuery.getCurrentResult();
-                // Make sure we're not attempting to re-render similar results
-                if (previousResult &&
-                    previousResult.loading === result.loading &&
-                    previousResult.networkStatus === result.networkStatus &&
-                    equal(previousResult.data, result.data)) {
-                    return;
-                }
-                _this.setResult(result);
-            };
-            var onError = function (error) {
-                subscription.unsubscribe();
-                subscription = obsQuery.resubscribeAfterError(onNext, onError);
-                if (!hasOwnProperty.call(error, "graphQLErrors")) {
-                    // The error is not a GraphQL error
-                    throw error;
-                }
-                var previousResult = _this.result;
-                if (!previousResult ||
-                    (previousResult && previousResult.loading) ||
-                    !equal(error, previousResult.error)) {
-                    _this.setResult({
-                        data: (previousResult && previousResult.data),
-                        error: error,
-                        loading: false,
-                        networkStatus: NetworkStatus.error,
-                    });
-                }
-            };
-            var subscription = obsQuery.subscribe(onNext, onError);
-            // Do the "unsubscribe" with a short delay.
-            // This way, an existing subscription can be reused without an additional
-            // request if "unsubscribe"  and "resubscribe" to the same ObservableQuery
-            // happen in very fast succession.
-            return function () {
-                setTimeout(function () { return subscription.unsubscribe(); });
-                _this.forceUpdate = function () { return _this.forceUpdateState(); };
-            };
-        }, [
-            // We memoize the subscribe function using useCallback and the following
-            // dependency keys, because the subscribe function reference is all that
-            // useSyncExternalStore uses internally as a dependency key for the
-            // useEffect ultimately responsible for the subscription, so we are
-            // effectively passing this dependency array to that useEffect buried
-            // inside useSyncExternalStore, as desired.
-            obsQuery,
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            this.renderPromises,
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            this.client.disableNetworkFetches,
-        ]), function () { return _this.getCurrentResult(); }, function () { return _this.getCurrentResult(); });
-        // TODO Remove this method when we remove support for options.partialRefetch.
-        this.unsafeHandlePartialRefetch(result);
-        return this.toQueryResult(result);
+export function useQueryInternals(query, options) {
+    var client = useApolloClient(options.client);
+    var renderPromises = React.useContext(getApolloContext()).renderPromises;
+    var isSyncSSR = !!renderPromises;
+    var disableNetworkFetches = client.disableNetworkFetches;
+    var ssrAllowed = options.ssr !== false && !options.skip;
+    var partialRefetch = options.partialRefetch;
+    var makeWatchQueryOptions = createMakeWatchQueryOptions(client, query, options, isSyncSSR);
+    var _a = useInternalState(client, query, options, renderPromises, makeWatchQueryOptions), _b = _a[0], observable = _b.observable, resultData = _b.resultData, onQueryExecuted = _a[1];
+    var watchQueryOptions = makeWatchQueryOptions(observable);
+    useResubscribeIfNecessary(resultData, // might get mutated during render
+    observable, // might get mutated during render
+    client, options, watchQueryOptions);
+    var obsQueryFields = React.useMemo(function () { return bindObservableMethods(observable); }, [observable]);
+    useHandleSkip(resultData, // might get mutated during render
+    observable, client, options, watchQueryOptions, disableNetworkFetches, isSyncSSR);
+    useRegisterSSRObservable(observable, renderPromises, ssrAllowed);
+    var result = useObservableSubscriptionResult(resultData, observable, client, disableNetworkFetches, partialRefetch, isSyncSSR, {
+        onCompleted: options.onCompleted || noop,
+        onError: options.onError || noop,
+    });
+    return {
+        result: result,
+        obsQueryFields: obsQueryFields,
+        observable: observable,
+        resultData: resultData,
+        client: client,
+        onQueryExecuted: onQueryExecuted,
     };
-    InternalState.prototype.useOptions = function (options) {
-        var _a;
-        var watchQueryOptions = this.createWatchQueryOptions((this.queryHookOptions = options));
-        // Update this.watchQueryOptions, but only when they have changed, which
-        // allows us to depend on the referential stability of
-        // this.watchQueryOptions elsewhere.
-        var currentWatchQueryOptions = this.watchQueryOptions;
-        if (!equal(watchQueryOptions, currentWatchQueryOptions)) {
-            this.watchQueryOptions = watchQueryOptions;
-            if (currentWatchQueryOptions && this.observable) {
-                // Though it might be tempting to postpone this reobserve call to the
-                // useEffect block, we need getCurrentResult to return an appropriate
-                // loading:true result synchronously (later within the same call to
-                // useQuery). Since we already have this.observable here (not true for
-                // the very first call to useQuery), we are not initiating any new
-                // subscriptions, though it does feel less than ideal that reobserve
-                // (potentially) kicks off a network request (for example, when the
-                // variables have changed), which is technically a side-effect.
-                this.observable.reobserve(this.getObsQueryOptions());
-                // Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
-                // but save the current data as this.previousData, just like setResult
-                // usually does.
-                this.previousData = ((_a = this.result) === null || _a === void 0 ? void 0 : _a.data) || this.previousData;
-                this.result = void 0;
-            }
-        }
+}
+function useObservableSubscriptionResult(resultData, observable, client, disableNetworkFetches, partialRefetch, skipSubscribing, callbacks) {
+    var callbackRef = React.useRef(callbacks);
+    React.useEffect(function () {
         // Make sure state.onCompleted and state.onError always reflect the latest
         // options.onCompleted and options.onError callbacks provided to useQuery,
         // since those functions are often recreated every time useQuery is called.
         // Like the forceUpdate method, the versions of these methods inherited from
         // InternalState.prototype are empty no-ops, but we can override them on the
         // base state object (without modifying the prototype).
-        this.onCompleted =
-            options.onCompleted || InternalState.prototype.onCompleted;
-        this.onError = options.onError || InternalState.prototype.onError;
-        if ((this.renderPromises || this.client.disableNetworkFetches) &&
-            this.queryHookOptions.ssr === false &&
-            !this.queryHookOptions.skip) {
-            // If SSR has been explicitly disabled, and this function has been called
-            // on the server side, return the default loading state.
-            this.result = this.ssrDisabledResult;
-        }
-        else if (this.queryHookOptions.skip ||
-            this.watchQueryOptions.fetchPolicy === "standby") {
-            // When skipping a query (ie. we're not querying for data but still want to
-            // render children), make sure the `data` is cleared out and `loading` is
-            // set to `false` (since we aren't loading anything).
-            //
-            // NOTE: We no longer think this is the correct behavior. Skipping should
-            // not automatically set `data` to `undefined`, but instead leave the
-            // previous data in place. In other words, skipping should not mandate that
-            // previously received data is all of a sudden removed. Unfortunately,
-            // changing this is breaking, so we'll have to wait until Apollo Client 4.0
-            // to address this.
-            this.result = this.skipStandbyResult;
+        callbackRef.current = callbacks;
+    });
+    return useSyncExternalStore(React.useCallback(function (handleStoreChange) {
+        // reference `disableNetworkFetches` here to ensure that the rules of hooks
+        // keep it as a dependency of this effect, even though it's not used
+        disableNetworkFetches;
+        if (skipSubscribing) {
+            return function () { };
         }
-        else if (this.result === this.ssrDisabledResult ||
-            this.result === this.skipStandbyResult) {
-            this.result = void 0;
-        }
-    };
-    InternalState.prototype.getObsQueryOptions = function () {
-        var toMerge = [];
-        var globalDefaults = this.client.defaultOptions.watchQuery;
-        if (globalDefaults)
-            toMerge.push(globalDefaults);
-        if (this.queryHookOptions.defaultOptions) {
-            toMerge.push(this.queryHookOptions.defaultOptions);
+        var onNext = function () {
+            var previousResult = resultData.current;
+            // We use `getCurrentResult()` instead of the onNext argument because
+            // the values differ slightly. Specifically, loading results will have
+            // an empty object for data instead of `undefined` for some reason.
+            var result = observable.getCurrentResult();
+            // Make sure we're not attempting to re-render similar results
+            if (previousResult &&
+                previousResult.loading === result.loading &&
+                previousResult.networkStatus === result.networkStatus &&
+                equal(previousResult.data, result.data)) {
+                return;
+            }
+            setResult(result, resultData, observable, client, partialRefetch, handleStoreChange, callbackRef.current);
+        };
+        var onError = function (error) {
+            subscription.current.unsubscribe();
+            subscription.current = observable.resubscribeAfterError(onNext, onError);
+            if (!hasOwnProperty.call(error, "graphQLErrors")) {
+                // The error is not a GraphQL error
+                throw error;
+            }
+            var previousResult = resultData.current;
+            if (!previousResult ||
+                (previousResult && previousResult.loading) ||
+                !equal(error, previousResult.error)) {
+                setResult({
+                    data: (previousResult && previousResult.data),
+                    error: error,
+                    loading: false,
+                    networkStatus: NetworkStatus.error,
+                }, resultData, observable, client, partialRefetch, handleStoreChange, callbackRef.current);
+            }
+        };
+        // TODO evaluate if we keep this in
+        // React Compiler cannot handle scoped `let` access, but a mutable object
+        // like this is fine.
+        // was:
+        // let subscription = observable.subscribe(onNext, onError);
+        var subscription = { current: observable.subscribe(onNext, onError) };
+        // Do the "unsubscribe" with a short delay.
+        // This way, an existing subscription can be reused without an additional
+        // request if "unsubscribe"  and "resubscribe" to the same ObservableQuery
+        // happen in very fast succession.
+        return function () {
+            setTimeout(function () { return subscription.current.unsubscribe(); });
+        };
+    }, [
+        disableNetworkFetches,
+        skipSubscribing,
+        observable,
+        resultData,
+        partialRefetch,
+        client,
+    ]), function () {
+        return getCurrentResult(resultData, observable, callbackRef.current, partialRefetch, client);
+    }, function () {
+        return getCurrentResult(resultData, observable, callbackRef.current, partialRefetch, client);
+    });
+}
+function useRegisterSSRObservable(observable, renderPromises, ssrAllowed) {
+    if (renderPromises && ssrAllowed) {
+        renderPromises.registerSSRObservable(observable);
+        if (observable.getCurrentResult().loading) {
+            // TODO: This is a legacy API which could probably be cleaned up
+            renderPromises.addObservableQueryPromise(observable);
         }
-        // We use compact rather than mergeOptions for this part of the merge,
-        // because we want watchQueryOptions.variables (if defined) to replace
-        // this.observable.options.variables whole. This replacement allows
-        // removing variables by removing them from the variables input to
-        // useQuery. If the variables were always merged together (rather than
-        // replaced), there would be no way to remove existing variables.
-        // However, the variables from options.defaultOptions and globalDefaults
-        // (if provided) should be merged, to ensure individual defaulted
-        // variables always have values, if not otherwise defined in
-        // observable.options or watchQueryOptions.
-        toMerge.push(compact(this.observable && this.observable.options, this.watchQueryOptions));
-        return toMerge.reduce(mergeOptions);
-    };
-    // A function to massage options before passing them to ObservableQuery.
-    InternalState.prototype.createWatchQueryOptions = function (_a) {
-        var _b;
-        if (_a === void 0) { _a = {}; }
-        var skip = _a.skip, ssr = _a.ssr, onCompleted = _a.onCompleted, onError = _a.onError, defaultOptions = _a.defaultOptions, 
-        // The above options are useQuery-specific, so this ...otherOptions spread
-        // makes otherOptions almost a WatchQueryOptions object, except for the
-        // query property that we add below.
-        otherOptions = __rest(_a, ["skip", "ssr", "onCompleted", "onError", "defaultOptions"]);
+    }
+}
+function useHandleSkip(
+/** this hook will mutate properties on `resultData` */
+resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, isSyncSSR) {
+    if ((isSyncSSR || disableNetworkFetches) &&
+        options.ssr === false &&
+        !options.skip) {
+        // If SSR has been explicitly disabled, and this function has been called
+        // on the server side, return the default loading state.
+        resultData.current = toQueryResult(ssrDisabledResult, resultData.previousData, observable, client);
+    }
+    else if (options.skip || watchQueryOptions.fetchPolicy === "standby") {
+        // When skipping a query (ie. we're not querying for data but still want to
+        // render children), make sure the `data` is cleared out and `loading` is
+        // set to `false` (since we aren't loading anything).
+        //
+        // NOTE: We no longer think this is the correct behavior. Skipping should
+        // not automatically set `data` to `undefined`, but instead leave the
+        // previous data in place. In other words, skipping should not mandate that
+        // previously received data is all of a sudden removed. Unfortunately,
+        // changing this is breaking, so we'll have to wait until Apollo Client 4.0
+        // to address this.
+        resultData.current = toQueryResult(skipStandbyResult, resultData.previousData, observable, client);
+    }
+    else if (
+    // reset result if the last render was skipping for some reason,
+    // but this render isn't skipping anymore
+    resultData.current &&
+        (resultData.current[originalResult] === ssrDisabledResult ||
+            resultData.current[originalResult] === skipStandbyResult)) {
+        resultData.current = void 0;
+    }
+}
+// this hook is not compatible with any rules of React, and there's no good way to rewrite it.
+// it should stay a separate hook that will not be optimized by the compiler
+function useResubscribeIfNecessary(
+/** this hook will mutate properties on `resultData` */
+resultData, 
+/** this hook will mutate properties on `observable` */
+observable, client, options, watchQueryOptions) {
+    var _a;
+    if (observable[lastWatchOptions] &&
+        !equal(observable[lastWatchOptions], watchQueryOptions)) {
+        // Though it might be tempting to postpone this reobserve call to the
+        // useEffect block, we need getCurrentResult to return an appropriate
+        // loading:true result synchronously (later within the same call to
+        // useQuery). Since we already have this.observable here (not true for
+        // the very first call to useQuery), we are not initiating any new
+        // subscriptions, though it does feel less than ideal that reobserve
+        // (potentially) kicks off a network request (for example, when the
+        // variables have changed), which is technically a side-effect.
+        observable.reobserve(getObsQueryOptions(observable, client, options, watchQueryOptions));
+        // Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
+        // but save the current data as this.previousData, just like setResult
+        // usually does.
+        resultData.previousData =
+            ((_a = resultData.current) === null || _a === void 0 ? void 0 : _a.data) || resultData.previousData;
+        resultData.current = void 0;
+    }
+    observable[lastWatchOptions] = watchQueryOptions;
+}
+/*
+ * A function to massage options before passing them to ObservableQuery.
+ * This is two-step curried because we want to reuse the `make` function,
+ * but the `observable` might differ between calls to `make`.
+ */
+export function createMakeWatchQueryOptions(client, query, _a, isSyncSSR) {
+    if (_a === void 0) { _a = {}; }
+    var skip = _a.skip, ssr = _a.ssr, onCompleted = _a.onCompleted, onError = _a.onError, defaultOptions = _a.defaultOptions, 
+    // The above options are useQuery-specific, so this ...otherOptions spread
+    // makes otherOptions almost a WatchQueryOptions object, except for the
+    // query property that we add below.
+    otherOptions = __rest(_a, ["skip", "ssr", "onCompleted", "onError", "defaultOptions"]);
+    return function (observable) {
         // This Object.assign is safe because otherOptions is a fresh ...rest object
         // that did not exist until just now, so modifications are still allowed.
-        var watchQueryOptions = Object.assign(otherOptions, { query: this.query });
-        if (this.renderPromises &&
+        var watchQueryOptions = Object.assign(otherOptions, { query: query });
+        if (isSyncSSR &&
             (watchQueryOptions.fetchPolicy === "network-only" ||
                 watchQueryOptions.fetchPolicy === "cache-and-network")) {
             // this behavior was added to react-apollo without explanation in this PR
@@ -345,141 +339,146 @@ var InternalState = /** @class */ (function () {
             watchQueryOptions.variables = {};
         }
         if (skip) {
-            var _c = watchQueryOptions.fetchPolicy, fetchPolicy = _c === void 0 ? this.getDefaultFetchPolicy() : _c, _d = watchQueryOptions.initialFetchPolicy, initialFetchPolicy = _d === void 0 ? fetchPolicy : _d;
             // When skipping, we set watchQueryOptions.fetchPolicy initially to
             // "standby", but we also need/want to preserve the initial non-standby
             // fetchPolicy that would have been used if not skipping.
-            Object.assign(watchQueryOptions, {
-                initialFetchPolicy: initialFetchPolicy,
-                fetchPolicy: "standby",
-            });
+            watchQueryOptions.initialFetchPolicy =
+                watchQueryOptions.initialFetchPolicy ||
+                    watchQueryOptions.fetchPolicy ||
+                    getDefaultFetchPolicy(defaultOptions, client.defaultOptions);
+            watchQueryOptions.fetchPolicy = "standby";
         }
         else if (!watchQueryOptions.fetchPolicy) {
             watchQueryOptions.fetchPolicy =
-                ((_b = this.observable) === null || _b === void 0 ? void 0 : _b.options.initialFetchPolicy) ||
-                    this.getDefaultFetchPolicy();
+                (observable === null || observable === void 0 ? void 0 : observable.options.initialFetchPolicy) ||
+                    getDefaultFetchPolicy(defaultOptions, client.defaultOptions);
         }
         return watchQueryOptions;
     };
-    InternalState.prototype.getDefaultFetchPolicy = function () {
-        var _a, _b;
-        return (((_a = this.queryHookOptions.defaultOptions) === null || _a === void 0 ? void 0 : _a.fetchPolicy) ||
-            ((_b = this.client.defaultOptions.watchQuery) === null || _b === void 0 ? void 0 : _b.fetchPolicy) ||
-            "cache-first");
-    };
-    // Defining these methods as no-ops on the prototype allows us to call
-    // state.onCompleted and/or state.onError without worrying about whether a
-    // callback was provided.
-    InternalState.prototype.onCompleted = function (data) { };
-    InternalState.prototype.onError = function (error) { };
-    InternalState.prototype.useObservableQuery = function () {
-        // See if there is an existing observable that was used to fetch the same
-        // data and if so, use it instead since it will contain the proper queryId
-        // to fetch the result set. This is used during SSR.
-        var obsQuery = (this.observable =
-            (this.renderPromises &&
-                this.renderPromises.getSSRObservable(this.watchQueryOptions)) ||
-                this.observable || // Reuse this.observable if possible (and not SSR)
-                this.client.watchQuery(this.getObsQueryOptions()));
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        this.obsQueryFields = React.useMemo(function () { return ({
-            refetch: obsQuery.refetch.bind(obsQuery),
-            reobserve: obsQuery.reobserve.bind(obsQuery),
-            fetchMore: obsQuery.fetchMore.bind(obsQuery),
-            updateQuery: obsQuery.updateQuery.bind(obsQuery),
-            startPolling: obsQuery.startPolling.bind(obsQuery),
-            stopPolling: obsQuery.stopPolling.bind(obsQuery),
-            subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
-        }); }, [obsQuery]);
-        var ssrAllowed = !(this.queryHookOptions.ssr === false || this.queryHookOptions.skip);
-        if (this.renderPromises && ssrAllowed) {
-            this.renderPromises.registerSSRObservable(obsQuery);
-            if (obsQuery.getCurrentResult().loading) {
-                // TODO: This is a legacy API which could probably be cleaned up
-                this.renderPromises.addObservableQueryPromise(obsQuery);
+}
+export function getObsQueryOptions(observable, client, queryHookOptions, watchQueryOptions) {
+    var toMerge = [];
+    var globalDefaults = client.defaultOptions.watchQuery;
+    if (globalDefaults)
+        toMerge.push(globalDefaults);
+    if (queryHookOptions.defaultOptions) {
+        toMerge.push(queryHookOptions.defaultOptions);
+    }
+    // We use compact rather than mergeOptions for this part of the merge,
+    // because we want watchQueryOptions.variables (if defined) to replace
+    // this.observable.options.variables whole. This replacement allows
+    // removing variables by removing them from the variables input to
+    // useQuery. If the variables were always merged together (rather than
+    // replaced), there would be no way to remove existing variables.
+    // However, the variables from options.defaultOptions and globalDefaults
+    // (if provided) should be merged, to ensure individual defaulted
+    // variables always have values, if not otherwise defined in
+    // observable.options or watchQueryOptions.
+    toMerge.push(compact(observable && observable.options, watchQueryOptions));
+    return toMerge.reduce(mergeOptions);
+}
+function setResult(nextResult, resultData, observable, client, partialRefetch, forceUpdate, callbacks) {
+    var previousResult = resultData.current;
+    if (previousResult && previousResult.data) {
+        resultData.previousData = previousResult.data;
+    }
+    resultData.current = toQueryResult(unsafeHandlePartialRefetch(nextResult, observable, partialRefetch), resultData.previousData, observable, client);
+    // Calling state.setResult always triggers an update, though some call sites
+    // perform additional equality checks before committing to an update.
+    forceUpdate();
+    handleErrorOrCompleted(nextResult, previousResult === null || previousResult === void 0 ? void 0 : previousResult[originalResult], callbacks);
+}
+function handleErrorOrCompleted(result, previousResult, callbacks) {
+    if (!result.loading) {
+        var error_1 = toApolloError(result);
+        // wait a tick in case we are in the middle of rendering a component
+        Promise.resolve()
+            .then(function () {
+            if (error_1) {
+                callbacks.onError(error_1);
             }
-        }
-        return obsQuery;
-    };
-    InternalState.prototype.setResult = function (nextResult) {
-        var previousResult = this.result;
-        if (previousResult && previousResult.data) {
-            this.previousData = previousResult.data;
-        }
-        this.result = nextResult;
-        // Calling state.setResult always triggers an update, though some call sites
-        // perform additional equality checks before committing to an update.
-        this.forceUpdate();
-        this.handleErrorOrCompleted(nextResult, previousResult);
-    };
-    InternalState.prototype.handleErrorOrCompleted = function (result, previousResult) {
-        var _this = this;
-        if (!result.loading) {
-            var error_1 = this.toApolloError(result);
-            // wait a tick in case we are in the middle of rendering a component
-            Promise.resolve()
-                .then(function () {
-                if (error_1) {
-                    _this.onError(error_1);
-                }
-                else if (result.data &&
-                    (previousResult === null || previousResult === void 0 ? void 0 : previousResult.networkStatus) !== result.networkStatus &&
-                    result.networkStatus === NetworkStatus.ready) {
-                    _this.onCompleted(result.data);
-                }
-            })
-                .catch(function (error) {
-                globalThis.__DEV__ !== false && invariant.warn(error);
-            });
-        }
-    };
-    InternalState.prototype.toApolloError = function (result) {
-        return isNonEmptyArray(result.errors) ?
-            new ApolloError({ graphQLErrors: result.errors })
-            : result.error;
-    };
-    InternalState.prototype.getCurrentResult = function () {
-        // Using this.result as a cache ensures getCurrentResult continues returning
-        // the same (===) result object, unless state.setResult has been called, or
-        // we're doing server rendering and therefore override the result below.
-        if (!this.result) {
-            this.handleErrorOrCompleted((this.result = this.observable.getCurrentResult()));
-        }
-        return this.result;
-    };
-    InternalState.prototype.toQueryResult = function (result) {
-        var queryResult = this.toQueryResultCache.get(result);
-        if (queryResult)
-            return queryResult;
-        var data = result.data, partial = result.partial, resultWithoutPartial = __rest(result, ["data", "partial"]);
-        this.toQueryResultCache.set(result, (queryResult = __assign(__assign(__assign({ data: data }, resultWithoutPartial), this.obsQueryFields), { client: this.client, observable: this.observable, variables: this.observable.variables, called: !this.queryHookOptions.skip, previousData: this.previousData })));
-        if (!queryResult.error && isNonEmptyArray(result.errors)) {
-            // Until a set naming convention for networkError and graphQLErrors is
-            // decided upon, we map errors (graphQLErrors) to the error options.
-            // TODO: Is it possible for both result.error and result.errors to be
-            // defined here?
-            queryResult.error = new ApolloError({ graphQLErrors: result.errors });
-        }
-        return queryResult;
-    };
-    InternalState.prototype.unsafeHandlePartialRefetch = function (result) {
+            else if (result.data &&
+                (previousResult === null || previousResult === void 0 ? void 0 : previousResult.networkStatus) !== result.networkStatus &&
+                result.networkStatus === NetworkStatus.ready) {
+                callbacks.onCompleted(result.data);
+            }
+        })
+            .catch(function (error) {
+            globalThis.__DEV__ !== false && invariant.warn(error);
+        });
+    }
+}
+function getCurrentResult(resultData, observable, callbacks, partialRefetch, client) {
+    // Using this.result as a cache ensures getCurrentResult continues returning
+    // the same (===) result object, unless state.setResult has been called, or
+    // we're doing server rendering and therefore override the result below.
+    if (!resultData.current) {
         // WARNING: SIDE-EFFECTS IN THE RENDER FUNCTION
-        //
-        // TODO: This code should be removed when the partialRefetch option is
-        // removed. I was unable to get this hook to behave reasonably in certain
-        // edge cases when this block was put in an effect.
-        if (result.partial &&
-            this.queryHookOptions.partialRefetch &&
-            !result.loading &&
-            (!result.data || Object.keys(result.data).length === 0) &&
-            this.observable.options.fetchPolicy !== "cache-only") {
-            Object.assign(result, {
-                loading: true,
-                networkStatus: NetworkStatus.refetch,
-            });
-            this.observable.refetch();
-        }
+        // this could call unsafeHandlePartialRefetch
+        setResult(observable.getCurrentResult(), resultData, observable, client, partialRefetch, function () { }, callbacks);
+    }
+    return resultData.current;
+}
+export function getDefaultFetchPolicy(queryHookDefaultOptions, clientDefaultOptions) {
+    var _a;
+    return ((queryHookDefaultOptions === null || queryHookDefaultOptions === void 0 ? void 0 : queryHookDefaultOptions.fetchPolicy) ||
+        ((_a = clientDefaultOptions === null || clientDefaultOptions === void 0 ? void 0 : clientDefaultOptions.watchQuery) === null || _a === void 0 ? void 0 : _a.fetchPolicy) ||
+        "cache-first");
+}
+export function toApolloError(result) {
+    return isNonEmptyArray(result.errors) ?
+        new ApolloError({ graphQLErrors: result.errors })
+        : result.error;
+}
+export function toQueryResult(result, previousData, observable, client) {
+    var data = result.data, partial = result.partial, resultWithoutPartial = __rest(result, ["data", "partial"]);
+    var queryResult = __assign(__assign({ data: data }, resultWithoutPartial), { client: client, observable: observable, variables: observable.variables, called: result !== ssrDisabledResult && result !== skipStandbyResult, previousData: previousData });
+    // non-enumerable property to hold the original result, for referential equality checks
+    Object.defineProperty(queryResult, originalResult, { value: result });
+    if (!queryResult.error && isNonEmptyArray(result.errors)) {
+        // Until a set naming convention for networkError and graphQLErrors is
+        // decided upon, we map errors (graphQLErrors) to the error options.
+        // TODO: Is it possible for both result.error and result.errors to be
+        // defined here?
+        queryResult.error = new ApolloError({ graphQLErrors: result.errors });
+    }
+    return queryResult;
+}
+function unsafeHandlePartialRefetch(result, observable, partialRefetch) {
+    // TODO: This code should be removed when the partialRefetch option is
+    // removed. I was unable to get this hook to behave reasonably in certain
+    // edge cases when this block was put in an effect.
+    if (result.partial &&
+        partialRefetch &&
+        !result.loading &&
+        (!result.data || Object.keys(result.data).length === 0) &&
+        observable.options.fetchPolicy !== "cache-only") {
+        observable.refetch();
+        return __assign(__assign({}, result), { loading: true, networkStatus: NetworkStatus.refetch });
+    }
+    return result;
+}
+var ssrDisabledResult = maybeDeepFreeze({
+    loading: true,
+    data: void 0,
+    error: void 0,
+    networkStatus: NetworkStatus.loading,
+});
+var skipStandbyResult = maybeDeepFreeze({
+    loading: false,
+    data: void 0,
+    error: void 0,
+    networkStatus: NetworkStatus.ready,
+});
+function bindObservableMethods(observable) {
+    return {
+        refetch: observable.refetch.bind(observable),
+        reobserve: observable.reobserve.bind(observable),
+        fetchMore: observable.fetchMore.bind(observable),
+        updateQuery: observable.updateQuery.bind(observable),
+        startPolling: observable.startPolling.bind(observable),
+        stopPolling: observable.stopPolling.bind(observable),
+        subscribeToMore: observable.subscribeToMore.bind(observable),
     };
-    return InternalState;
-}());
+}
 //# sourceMappingURL=useQuery.js.map