@apollo/client 3.13.4 → 4.0.0-alpha.1

package/react/hooks/useQuery.js

@@ -1,4 +1,3 @@
-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:
@@ -12,27 +11,22 @@ import { __assign, __rest } from "tslib";
  * makeWatchQueryOptions
  * isSSRAllowed
  * disableNetworkFetches
- * partialRefetch
  * renderPromises
  * isSyncSSR
- * callbacks
  */
 /** */
-import { invariant } from "../../utilities/globals/index.js";
-import * as React from "rehackt";
-import { useSyncExternalStore } from "./useSyncExternalStore.js";
 import { equal } from "@wry/equality";
-import { mergeOptions } from "../../utilities/index.js";
-import { getApolloContext } from "../context/index.js";
-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 { compact, isNonEmptyArray, maybeDeepFreeze, } from "../../utilities/index.js";
+import * as React from "react";
+import { asapScheduler, observeOn } from "rxjs";
+import { NetworkStatus } from "@apollo/client/core";
+import { getApolloContext } from "@apollo/client/react/context";
+import { DocumentType, verifyDocumentType } from "@apollo/client/react/parser";
+import { compact, maybeDeepFreeze } from "@apollo/client/utilities";
+import { mergeOptions } from "@apollo/client/utilities";
 import { wrapHook } from "./internal/index.js";
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function noop() { }
-var lastWatchOptions = Symbol();
+import { useApolloClient } from "./useApolloClient.js";
+import { useSyncExternalStore } from "./useSyncExternalStore.js";
+const lastWatchOptions = Symbol();
 /**
  * A hook for executing queries in an Apollo application.
  *
@@ -67,23 +61,22 @@ var lastWatchOptions = Symbol();
  * @param options - Options to control how the query is executed.
  * @returns Query result object
  */
-export function useQuery(query, options) {
-    if (options === void 0) { options = Object.create(null); }
+export function useQuery(query, options = {}) {
     return wrapHook("useQuery", 
     // eslint-disable-next-line react-compiler/react-compiler
     useQuery_, useApolloClient(options && options.client))(query, options);
 }
 function useQuery_(query, options) {
-    var _a = useQueryInternals(query, options), result = _a.result, obsQueryFields = _a.obsQueryFields;
-    return React.useMemo(function () { return (__assign(__assign({}, result), obsQueryFields)); }, [result, obsQueryFields]);
+    const result = useQueryInternals(query, options);
+    const obsQueryFields = React.useMemo(() => bindObservableMethods(result.observable), [result.observable]);
+    return React.useMemo(() => ({ ...result, ...obsQueryFields }), [result, obsQueryFields]);
 }
 function useInternalState(client, query, options, renderPromises, makeWatchQueryOptions) {
     function createInternalState(previous) {
-        var _a;
         verifyDocumentType(query, DocumentType.Query);
-        var internalState = {
-            client: client,
-            query: query,
+        const internalState = {
+            client,
+            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
@@ -94,35 +87,12 @@ function useInternalState(client, query, options, renderPromises, makeWatchQuery
             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,
+                previousData: previous?.resultData.current?.data,
             },
         };
         return internalState;
     }
-    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,
-            }) }));
-    }
+    let [internalState, updateInternalState] = React.useState(createInternalState);
     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
@@ -130,53 +100,30 @@ function useInternalState(client, query, options, renderPromises, makeWatchQuery
         // 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.
-        var newInternalState = createInternalState(internalState);
+        const newInternalState = createInternalState(internalState);
         updateInternalState(newInternalState);
-        return [newInternalState, onQueryExecuted];
+        return newInternalState;
     }
-    return [internalState, onQueryExecuted];
+    return internalState;
 }
-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);
+function useQueryInternals(query, options) {
+    const client = useApolloClient(options.client);
+    const renderPromises = React.useContext(getApolloContext()).renderPromises;
+    const isSyncSSR = !!renderPromises;
+    const disableNetworkFetches = client.disableNetworkFetches;
+    const ssrAllowed = options.ssr !== false && !options.skip;
+    const makeWatchQueryOptions = createMakeWatchQueryOptions(client, query, options, isSyncSSR);
+    const { observable, resultData } = useInternalState(client, query, options, renderPromises, makeWatchQueryOptions);
+    const 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]);
     useRegisterSSRObservable(observable, renderPromises, ssrAllowed);
-    var result = useObservableSubscriptionResult(resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, partialRefetch, isSyncSSR, {
-        onCompleted: options.onCompleted || noop,
-        onError: options.onError || noop,
-    });
-    return {
-        result: result,
-        obsQueryFields: obsQueryFields,
-        observable: observable,
-        resultData: resultData,
-        client: client,
-        onQueryExecuted: onQueryExecuted,
-    };
+    const result = useObservableSubscriptionResult(resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, isSyncSSR);
+    return result;
 }
-function useObservableSubscriptionResult(resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, partialRefetch, isSyncSSR, 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).
-        // eslint-disable-next-line react-compiler/react-compiler
-        callbackRef.current = callbacks;
-    });
-    var resultOverride = ((isSyncSSR || disableNetworkFetches) &&
+function useObservableSubscriptionResult(resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, isSyncSSR) {
+    const resultOverride = ((isSyncSSR || disableNetworkFetches) &&
         options.ssr === false &&
         !options.skip) ?
         // If SSR has been explicitly disabled, and this function has been called
@@ -195,80 +142,46 @@ function useObservableSubscriptionResult(resultData, observable, client, options
             // to address this.
             skipStandbyResult
             : void 0;
-    var previousData = resultData.previousData;
-    var currentResultOverride = React.useMemo(function () {
-        return resultOverride &&
-            toQueryResult(resultOverride, previousData, observable, client);
-    }, [client, observable, resultOverride, previousData]);
-    return useSyncExternalStore(React.useCallback(function (handleStoreChange) {
+    const previousData = resultData.previousData;
+    const currentResultOverride = React.useMemo(() => resultOverride &&
+        toQueryResult(resultOverride, previousData, observable, client), [client, observable, resultOverride, previousData]);
+    return useSyncExternalStore(React.useCallback((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 (isSyncSSR) {
-            return function () { };
+            return () => { };
         }
-        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();
+        const subscription = observable
+            // We use the asapScheduler here to prevent issues with trying to
+            // update in the middle of a render. `reobserve` is kicked off in the
+            // middle of a render and because RxJS emits values synchronously,
+            // its possible for this `handleStoreChange` to be called in that same
+            // render. This allows the render to complete before trying to emit a
+            // new value.
+            .pipe(observeOn(asapScheduler))
+            .subscribe((result) => {
+            const previousResult = resultData.current;
             // Make sure we're not attempting to re-render similar results
+            // TODO: Eventually move this check inside ObservableQuery. We should
+            // probably not emit a new result if the result is the same.
             if (previousResult &&
                 previousResult.loading === result.loading &&
                 previousResult.networkStatus === result.networkStatus &&
-                equal(previousResult.data, result.data)) {
+                equal(previousResult.data, result.data) &&
+                equal(previousResult.error, result.error)) {
                 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) };
+            setResult(result, resultData, observable, client, handleStoreChange);
+        });
         // 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(); });
+        return () => {
+            setTimeout(() => subscription.unsubscribe());
         };
-    }, [
-        disableNetworkFetches,
-        isSyncSSR,
-        observable,
-        resultData,
-        partialRefetch,
-        client,
-    ]), function () {
-        return currentResultOverride ||
-            getCurrentResult(resultData, observable, callbackRef.current, partialRefetch, client);
-    }, function () {
-        return currentResultOverride ||
-            getCurrentResult(resultData, observable, callbackRef.current, partialRefetch, client);
-    });
+    }, [disableNetworkFetches, isSyncSSR, observable, resultData, client]), () => currentResultOverride || getCurrentResult(resultData, observable, client), () => currentResultOverride || getCurrentResult(resultData, observable, client));
 }
 function useRegisterSSRObservable(observable, renderPromises, ssrAllowed) {
     if (renderPromises && ssrAllowed) {
@@ -286,7 +199,6 @@ function useResubscribeIfNecessary(
 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
@@ -302,7 +214,7 @@ observable, client, options, watchQueryOptions) {
         // 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?.data || resultData.previousData;
         resultData.current = void 0;
     }
     observable[lastWatchOptions] = watchQueryOptions;
@@ -312,17 +224,15 @@ observable, client, options, watchQueryOptions) {
  * 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) {
+function createMakeWatchQueryOptions(client, query, { skip, ssr, 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 } = {}, isSyncSSR) {
+    return (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: query });
+        const watchQueryOptions = Object.assign(otherOptions, { query });
         if (isSyncSSR &&
             (watchQueryOptions.fetchPolicy === "network-only" ||
                 watchQueryOptions.fetchPolicy === "cache-and-network")) {
@@ -345,15 +255,15 @@ export function createMakeWatchQueryOptions(client, query, _a, isSyncSSR) {
         }
         else if (!watchQueryOptions.fetchPolicy) {
             watchQueryOptions.fetchPolicy =
-                (observable === null || observable === void 0 ? void 0 : observable.options.initialFetchPolicy) ||
+                observable?.options.initialFetchPolicy ||
                     getDefaultFetchPolicy(defaultOptions, client.defaultOptions);
         }
         return watchQueryOptions;
     };
 }
-export function getObsQueryOptions(observable, client, queryHookOptions, watchQueryOptions) {
-    var toMerge = [];
-    var globalDefaults = client.defaultOptions.watchQuery;
+function getObsQueryOptions(observable, client, queryHookOptions, watchQueryOptions) {
+    const toMerge = [];
+    const globalDefaults = client.defaultOptions.watchQuery;
     if (globalDefaults)
         toMerge.push(globalDefaults);
     if (queryHookOptions.defaultOptions) {
@@ -372,96 +282,56 @@ export function getObsQueryOptions(observable, client, queryHookOptions, watchQu
     toMerge.push(compact(observable && observable.options, watchQueryOptions));
     return toMerge.reduce(mergeOptions);
 }
-function setResult(nextResult, resultData, observable, client, partialRefetch, forceUpdate, callbacks) {
-    var previousResult = resultData.current;
+function setResult(nextResult, resultData, observable, client, forceUpdate) {
+    const previousResult = resultData.current;
     if (previousResult && previousResult.data) {
         resultData.previousData = previousResult.data;
     }
-    if (!nextResult.error && isNonEmptyArray(nextResult.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?
-        nextResult.error = new ApolloError({ graphQLErrors: nextResult.errors });
-    }
-    resultData.current = toQueryResult(unsafeHandlePartialRefetch(nextResult, observable, partialRefetch), resultData.previousData, observable, client);
+    resultData.current = toQueryResult(nextResult, 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.networkStatus, callbacks);
-}
-function handleErrorOrCompleted(result, previousNetworkStatus, 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);
-            }
-            else if (result.data &&
-                previousNetworkStatus !== 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) {
+function getCurrentResult(resultData, observable, 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
-        // this could call unsafeHandlePartialRefetch
-        setResult(observable.getCurrentResult(), resultData, observable, client, partialRefetch, function () { }, callbacks);
+        setResult(observable.getCurrentResult(), resultData, observable, client, () => { });
     }
     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) ||
+function getDefaultFetchPolicy(queryHookDefaultOptions, clientDefaultOptions) {
+    return (queryHookDefaultOptions?.fetchPolicy ||
+        clientDefaultOptions?.watchQuery?.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 });
+function toQueryResult(result, previousData, observable, client) {
+    const { data, partial, ...resultWithoutPartial } = result;
+    const queryResult = {
+        data, // Ensure always defined, even if result.data is missing.
+        ...resultWithoutPartial,
+        client: client,
+        observable: observable,
+        variables: observable.variables,
+        called: result !== ssrDisabledResult && result !== skipStandbyResult,
+        previousData,
+    };
     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({
+const ssrDisabledResult = maybeDeepFreeze({
     loading: true,
     data: void 0,
     error: void 0,
     networkStatus: NetworkStatus.loading,
+    partial: true,
 });
-var skipStandbyResult = maybeDeepFreeze({
+const skipStandbyResult = maybeDeepFreeze({
     loading: false,
     data: void 0,
     error: void 0,
     networkStatus: NetworkStatus.ready,
+    partial: true,
 });
 function bindObservableMethods(observable) {
     return {
@@ -474,4 +344,4 @@ function bindObservableMethods(observable) {
         subscribeToMore: observable.subscribeToMore.bind(observable),
     };
 }
-//# sourceMappingURL=useQuery.js.map
+//# sourceMappingURL=useQuery.js.map