@apollo/client 4.0.0-alpha.2 → 4.0.0-alpha.20

package/react/hooks/useQuery.js

@@ -9,20 +9,13 @@
  * options
  * watchQueryOptions
  * makeWatchQueryOptions
- * isSSRAllowed
- * disableNetworkFetches
- * renderPromises
- * isSyncSSR
  */
 /** */
 import { equal } from "@wry/equality";
 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 { NetworkStatus } from "@apollo/client";
+import { maybeDeepFreeze, mergeOptions, } from "@apollo/client/utilities/internal";
 import { wrapHook } from "./internal/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
@@ -61,97 +54,86 @@ const lastWatchOptions = Symbol();
  * @param options - Options to control how the query is executed.
  * @returns Query result object
  */
-export function useQuery(query, options = {}) {
+export function useQuery(query, ...[options]) {
+    "use no memo";
     return wrapHook("useQuery", 
     // eslint-disable-next-line react-compiler/react-compiler
     useQuery_, useApolloClient(options && options.client))(query, options);
 }
-function useQuery_(query, options) {
-    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, renderPromises, makeWatchQueryOptions) {
-    function createInternalState(previous) {
-        verifyDocumentType(query, DocumentType.Query);
-        const internalState = {
+function useQuery_(query, options = {}) {
+    const client = useApolloClient(options.client);
+    const { skip, ssr, ...opts } = options;
+    const watchQueryOptions = mergeOptions(client.defaultOptions.watchQuery, { ...opts, query });
+    if (skip) {
+        // 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.
+        watchQueryOptions.initialFetchPolicy =
+            options.initialFetchPolicy || options.fetchPolicy;
+        watchQueryOptions.fetchPolicy = "standby";
+    }
+    function createState(previous) {
+        const observable = client.watchQuery(watchQueryOptions);
+        return {
             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
-            // to fetch the result set. This is used during SSR.
-            (renderPromises &&
-                renderPromises.getSSRObservable(makeWatchQueryOptions())) ||
-                client.watchQuery(getObsQueryOptions(void 0, client, makeWatchQueryOptions())),
+            observable,
             resultData: {
+                current: observable.getCurrentResult(),
                 // Reuse previousData from previous InternalState (if any) to provide
                 // continuity of previousData even if/when the query or client changes.
-                previousData: previous?.resultData.current?.data,
+                previousData: previous?.resultData.current.data,
             },
         };
-        return internalState;
     }
-    let [internalState, updateInternalState] = React.useState(createInternalState);
-    if (client !== internalState.client || query !== internalState.query) {
+    let [state, setState] = React.useState(createState);
+    if (client !== state.client || query !== state.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.
-        const newInternalState = createInternalState(internalState);
-        updateInternalState(newInternalState);
-        return newInternalState;
+        setState((state = createState(state)));
     }
-    return internalState;
-}
-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, renderPromises, makeWatchQueryOptions);
-    const watchQueryOptions = makeWatchQueryOptions(observable);
+    const { observable, resultData } = state;
+    useInitialFetchPolicyIfNecessary(watchQueryOptions, observable);
     useResubscribeIfNecessary(resultData, // might get mutated during render
     observable, // might get mutated during render
-    client, watchQueryOptions);
-    useRegisterSSRObservable(observable, renderPromises, ssrAllowed);
-    const result = useObservableSubscriptionResult(resultData, observable, client, options, watchQueryOptions, disableNetworkFetches, isSyncSSR);
-    return result;
-}
-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
-        // on the server side, return the default loading state.
-        ssrDisabledResult
-        : 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.
-            skipStandbyResult
-            : void 0;
+    watchQueryOptions);
+    const resultOverride = useSyncExternalStore(() => () => { }, () => void 0, () => (ssr === false ? useQuery.ssrDisabledResult : void 0));
+    const result = useResultSubscription(observable, resultData, resultOverride);
+    const obsQueryFields = React.useMemo(() => ({
+        refetch: observable.refetch.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),
+    }), [observable]);
     const previousData = resultData.previousData;
-    const currentResultOverride = React.useMemo(() => resultOverride &&
-        toQueryResult(resultOverride, previousData, observable, client), [client, observable, resultOverride, previousData]);
+    return React.useMemo(() => {
+        const { data, partial, ...rest } = result;
+        return {
+            data, // Ensure always defined, even if result.data is missing.
+            ...rest,
+            client: client,
+            observable: observable,
+            variables: observable.variables,
+            previousData,
+            ...obsQueryFields,
+        };
+    }, [result, client, observable, previousData, obsQueryFields]);
+}
+function useInitialFetchPolicyIfNecessary(watchQueryOptions, observable) {
+    "use no memo";
+    if (!watchQueryOptions.fetchPolicy) {
+        watchQueryOptions.fetchPolicy = observable.options.initialFetchPolicy;
+    }
+}
+function useResultSubscription(observable, resultData, resultOverride) {
+    "use no memo";
     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 () => { };
-        }
         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
@@ -172,7 +154,14 @@ function useObservableSubscriptionResult(resultData, observable, client, options
                 equal(previousResult.error, result.error)) {
                 return;
             }
-            setResult(result, resultData, observable, client, handleStoreChange);
+            if (previousResult &&
+                previousResult.data &&
+                !equal(previousResult.data, result.data)) {
+                // eslint-disable-next-line react-compiler/react-compiler
+                resultData.previousData = previousResult.data;
+            }
+            resultData.current = result;
+            handleStoreChange();
         });
         // Do the "unsubscribe" with a short delay.
         // This way, an existing subscription can be reused without an additional
@@ -181,16 +170,7 @@ function useObservableSubscriptionResult(resultData, observable, client, options
         return () => {
             setTimeout(() => subscription.unsubscribe());
         };
-    }, [disableNetworkFetches, isSyncSSR, observable, resultData, client]), () => currentResultOverride || getCurrentResult(resultData, observable, client), () => currentResultOverride || getCurrentResult(resultData, observable, 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);
-        }
-    }
+    }, [observable, resultData]), () => resultOverride || resultData.current, () => resultOverride || resultData.current);
 }
 // 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
@@ -198,7 +178,8 @@ function useResubscribeIfNecessary(
 /** this hook will mutate properties on `resultData` */
 resultData, 
 /** this hook will mutate properties on `observable` */
-observable, client, watchQueryOptions) {
+observable, watchQueryOptions) {
+    "use no memo";
     if (observable[lastWatchOptions] &&
         !equal(observable[lastWatchOptions], watchQueryOptions)) {
         // Though it might be tempting to postpone this reobserve call to the
@@ -209,130 +190,25 @@ observable, client, watchQueryOptions) {
         // 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, watchQueryOptions));
+        observable.reobserve(watchQueryOptions);
         // Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
         // but save the current data as this.previousData, just like setResult
         // usually does.
-        resultData.previousData =
-            resultData.current?.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`.
- */
-function createMakeWatchQueryOptions(client, query, { skip, ssr, 
-// 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.
-        const watchQueryOptions = Object.assign(otherOptions, { query });
-        if (isSyncSSR &&
-            (watchQueryOptions.fetchPolicy === "network-only" ||
-                watchQueryOptions.fetchPolicy === "cache-and-network")) {
-            // this behavior was added to react-apollo without explanation in this PR
-            // https://github.com/apollographql/react-apollo/pull/1579
-            watchQueryOptions.fetchPolicy = "cache-first";
-        }
-        if (!watchQueryOptions.variables) {
-            watchQueryOptions.variables = {};
-        }
-        if (skip) {
-            // 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.
-            watchQueryOptions.initialFetchPolicy =
-                watchQueryOptions.initialFetchPolicy ||
-                    watchQueryOptions.fetchPolicy ||
-                    client.defaultOptions?.watchQuery?.fetchPolicy ||
-                    "cache-first";
-            watchQueryOptions.fetchPolicy = "standby";
-        }
-        else if (!watchQueryOptions.fetchPolicy) {
-            watchQueryOptions.fetchPolicy = observable?.options.initialFetchPolicy;
+        const result = observable.getCurrentResult();
+        if (!equal(result.data, resultData.current.data)) {
+            resultData.previousData = (resultData.current.data ||
+                resultData.previousData);
         }
-        return watchQueryOptions;
-    };
-}
-function getObsQueryOptions(observable, client, watchQueryOptions) {
-    const toMerge = [];
-    const globalDefaults = client.defaultOptions.watchQuery;
-    if (globalDefaults)
-        toMerge.push(globalDefaults);
-    // 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, forceUpdate) {
-    const previousResult = resultData.current;
-    if (previousResult && previousResult.data) {
-        resultData.previousData = previousResult.data;
-    }
-    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();
-}
-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) {
-        setResult(observable.getCurrentResult(), resultData, observable, client, () => { });
+        resultData.current = result;
     }
-    return resultData.current;
-}
-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;
+    observable[lastWatchOptions] = watchQueryOptions;
 }
-const ssrDisabledResult = maybeDeepFreeze({
+useQuery.ssrDisabledResult = maybeDeepFreeze({
     loading: true,
     data: void 0,
+    dataState: "empty",
     error: void 0,
     networkStatus: NetworkStatus.loading,
     partial: true,
 });
-const skipStandbyResult = maybeDeepFreeze({
-    loading: false,
-    data: void 0,
-    error: void 0,
-    networkStatus: NetworkStatus.ready,
-    partial: true,
-});
-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),
-    };
-}
 //# sourceMappingURL=useQuery.js.map