@apollo/client 4.0.0-alpha.7 → 4.0.0-alpha.9

package/core/ObservableQuery.js

@@ -1,4 +1,5 @@
 import { equal } from "@wry/equality";
+import { Slot } from "optimism";
 import { BehaviorSubject, filter, lastValueFrom, tap } from "rxjs";
 import { cloneDeep, compact, getOperationDefinition, getQueryDefinition, preventUnhandledRejection, } from "@apollo/client/utilities";
 import { __DEV__ } from "@apollo/client/utilities/environment";
@@ -8,7 +9,16 @@ import { equalByQuery } from "./equalByQuery.js";
 import { isNetworkRequestInFlight, NetworkStatus } from "./networkStatus.js";
 const { assign, hasOwnProperty } = Object;
 const newNetworkStatusSymbol = Symbol();
+const uninitialized = {};
 export class ObservableQuery {
+    /**
+     * @internal
+     * A slot used by the `useQuery` hook to indicate that `client.watchQuery`
+     * should not register the query immediately, but instead wait for the query to
+     * be started registered with the `QueryManager` when `useSyncExternalStore`
+     * actively subscribes to it.
+     */
+    static inactiveOnCreation = new Slot();
     options;
     queryId;
     queryName;
@@ -29,7 +39,6 @@ export class ObservableQuery {
     }
     subject;
     observable;
-    initialResult;
     isTornDown;
     queryManager;
     subscriptions = new Set();
@@ -43,16 +52,31 @@ export class ObservableQuery {
     networkStatus;
     constructor({ queryManager, queryInfo, options, }) {
         this.networkStatus = NetworkStatus.loading;
-        this.initialResult = {
-            data: undefined,
-            loading: true,
-            networkStatus: this.networkStatus,
-            partial: true,
-        };
-        this.subject = new BehaviorSubject(this.initialResult);
+        let startedInactive = ObservableQuery.inactiveOnCreation.getValue();
+        this.subject = new BehaviorSubject(uninitialized);
         this.observable = this.subject.pipe(tap({
             subscribe: () => {
+                if (startedInactive) {
+                    queryManager["queries"].set(this.queryId, queryInfo);
+                    startedInactive = false;
+                }
                 if (!this.subject.observed) {
+                    if (this.subject.value === uninitialized) {
+                        // Emitting a value in the `subscribe` callback of `tap` gives
+                        // the subject a chance to save this initial result without
+                        // emitting the placeholder value since this callback is executed
+                        // before `tap` subscribes to the source observable (the subject).
+                        // `reobserve` also has the chance to update this value if it
+                        // synchronously emits one (usually due to reporting a cache
+                        // value).
+                        //
+                        // We don't initialize the `BehaviorSubject` with
+                        // `getInitialResult` because its possible the cache might have
+                        // updated between when the `ObservableQuery` was instantiated and
+                        // when it is subscribed to. Updating the value here ensures we
+                        // report the most up-to-date result from the cache.
+                        this.subject.next(this.getInitialResult());
+                    }
                     this.reobserve();
                     // TODO: See if we can rework updatePolling to better handle this.
                     // reobserve calls updatePolling but this `subscribe` callback is
@@ -67,19 +91,14 @@ export class ObservableQuery {
                     this.tearDownQuery();
                 }
             },
-        }), 
-        // TODO: Conditionally filter when notifyOnNetworkStatusChange is true or
-        // not. We want to emit the loading result if notifyOnNetworkStatusChange
-        // is true.
-        filter((result) => 
-        // TODO: Remove this behavior when unifying loading state for notifyOnNetworkStatusChange
-        (this.options.fetchPolicy === "no-cache" &&
-            this.options.notifyOnNetworkStatusChange) ||
-            // TODO: Remove this behavior when unifying loading state for notifyOnNetworkStatusChange
-            (this.options.fetchPolicy === "network-only" &&
-                !this.queryManager.prioritizeCacheValues &&
-                this.queryInfo.getDiff().complete) ||
-            result !== this.initialResult));
+        }), filter((result) => {
+            return (this.options.fetchPolicy !== "standby" &&
+                (this.options.notifyOnNetworkStatusChange ||
+                    !result.loading ||
+                    // data could be defined for cache-and-network fetch policies
+                    // when emitting the cache result while loading the network result
+                    !!result.data));
+        }));
         this["@@observable"] = () => this;
         if (Symbol.observable) {
             this[Symbol.observable] = () => this;
@@ -124,6 +143,50 @@ export class ObservableQuery {
     resetDiff() {
         this.queryInfo.resetDiff();
     }
+    getInitialResult() {
+        const fetchPolicy = this.queryManager.prioritizeCacheValues ?
+            "cache-first"
+            : this.options.fetchPolicy;
+        const defaultResult = {
+            data: undefined,
+            loading: true,
+            networkStatus: NetworkStatus.loading,
+            partial: true,
+        };
+        const cacheResult = () => {
+            const diff = this.queryInfo.getDiff();
+            return this.maskResult({
+                data: 
+                // TODO: queryInfo.getDiff should handle this since cache.diff returns a
+                // null when returnPartialData is false
+                this.options.returnPartialData || diff.complete ?
+                    diff.result ?? undefined
+                    : undefined,
+                loading: !diff.complete,
+                networkStatus: diff.complete ? NetworkStatus.ready : NetworkStatus.loading,
+                partial: !diff.complete,
+            });
+        };
+        switch (fetchPolicy) {
+            case "cache-only":
+            case "cache-first":
+                return cacheResult();
+            case "cache-and-network":
+                return {
+                    ...cacheResult(),
+                    loading: true,
+                    networkStatus: NetworkStatus.loading,
+                };
+            case "standby":
+                return {
+                    ...defaultResult,
+                    loading: false,
+                    networkStatus: NetworkStatus.ready,
+                };
+            default:
+                return defaultResult;
+        }
+    }
     getCurrentFullResult(saveAsLastResult = true) {
         // Use the last result as long as the variables match this.variables.
         const lastResult = this.getLastResult(true);
@@ -263,7 +326,7 @@ export class ObservableQuery {
             const queryDef = getQueryDefinition(this.query);
             const vars = queryDef.variableDefinitions;
             if (!vars || !vars.some((v) => v.variable.name.value === "variables")) {
-                __DEV__ && invariant.warn(65, variables, queryDef.name?.value || queryDef);
+                __DEV__ && invariant.warn(67, variables, queryDef.name?.value || queryDef);
             }
         }
         if (variables && !equal(this.options.variables, variables)) {
@@ -299,6 +362,7 @@ export class ObservableQuery {
             // fetchMore to provide an updateQuery callback that determines how
             // the data gets written to the cache.
             fetchPolicy: "no-cache",
+            notifyOnNetworkStatusChange: this.options.notifyOnNetworkStatusChange,
         };
         combinedOptions.query = this.transformDocument(combinedOptions.query);
         const qid = this.queryManager.generateQueryId();
@@ -322,7 +386,7 @@ export class ObservableQuery {
         const updateQuery = fetchMoreOptions?.updateQuery;
         const isCached = this.options.fetchPolicy !== "no-cache";
         if (!isCached) {
-            invariant(updateQuery, 66);
+            invariant(updateQuery, 68);
         }
         return this.queryManager
             .fetchQuery(qid, combinedOptions, NetworkStatus.fetchMore)
@@ -407,7 +471,7 @@ export class ObservableQuery {
             // the cache, we still want fetchMore to deliver its final loading:false
             // result with the unchanged data.
             if (isCached && !updatedQuerySet.has(this.query)) {
-                reobserveCacheFirst(this);
+                this.reobserveCacheFirst();
             }
         });
     }
@@ -435,7 +499,7 @@ export class ObservableQuery {
                         onError(error);
                     }
                     else {
-                        __DEV__ && invariant.error(67, error);
+                        __DEV__ && invariant.error(69, error);
                     }
                     return;
                 }
@@ -579,8 +643,9 @@ export class ObservableQuery {
     fetch(options, newNetworkStatus, emitLoadingState, query) {
         // TODO Make sure we update the networkStatus (and infer fetchVariables)
         // before actually committing to the fetch.
-        this.queryManager.setObservableQuery(this);
-        return this.queryManager.fetchObservableWithInfo(this.queryId, options, newNetworkStatus, query, emitLoadingState);
+        const queryInfo = this.queryManager.getOrCreateQuery(this.queryId);
+        queryInfo.setObservableQuery(this);
+        return this.queryManager.fetchObservableWithInfo(queryInfo, options, newNetworkStatus, query, emitLoadingState);
     }
     // Turns polling on or off based on this.options.pollInterval.
     updatePolling() {
@@ -590,16 +655,13 @@ export class ObservableQuery {
         }
         const { pollingInfo, options: { pollInterval }, } = this;
         if (!pollInterval || !this.hasObservers()) {
-            if (pollingInfo) {
-                clearTimeout(pollingInfo.timeout);
-                delete this.pollingInfo;
-            }
+            this.cancelPolling();
             return;
         }
         if (pollingInfo && pollingInfo.interval === pollInterval) {
             return;
         }
-        invariant(pollInterval, 68);
+        invariant(pollInterval, 70);
         const info = pollingInfo || (this.pollingInfo = {});
         info.interval = pollInterval;
         const maybeFetch = () => {
@@ -631,6 +693,13 @@ export class ObservableQuery {
         };
         poll();
     }
+    // This differs from stopPolling in that it does not set pollInterval to 0
+    cancelPolling() {
+        if (this.pollingInfo) {
+            clearTimeout(this.pollingInfo.timeout);
+            delete this.pollingInfo;
+        }
+    }
     updateLastResult(newResult, variables = this.variables) {
         let error = this.getLastError();
         // Preserve this.last.error unless the variables have changed.
@@ -682,6 +751,7 @@ export class ObservableQuery {
         // We want to ensure we can re-run the custom document transforms the next
         // time a request is made against the original query.
         const query = this.transformDocument(options.query);
+        const { fetchPolicy } = options;
         this.lastQuery = query;
         if (!useDisposableObservable) {
             // We can skip calling updatePolling if we're not changing this.options.
@@ -692,10 +762,10 @@ export class ObservableQuery {
                 newOptions.variables &&
                 !equal(newOptions.variables, oldVariables) &&
                 // Don't mess with the fetchPolicy if it's currently "standby".
-                options.fetchPolicy !== "standby" &&
+                fetchPolicy !== "standby" &&
                 // If we're changing the fetchPolicy anyway, don't try to change it here
                 // using applyNextFetchPolicy. The explicit options.fetchPolicy wins.
-                (options.fetchPolicy === oldFetchPolicy ||
+                (fetchPolicy === oldFetchPolicy ||
                     // A `nextFetchPolicy` function has even higher priority, though,
                     // so in that case `applyNextFetchPolicy` must be called.
                     typeof options.nextFetchPolicy === "function")) {
@@ -713,6 +783,14 @@ export class ObservableQuery {
                 !equal(newOptions.variables, oldVariables)) {
                 newNetworkStatus = NetworkStatus.setVariables;
             }
+            // QueryManager does not emit any values for standby fetch policies so we
+            // want ensure that the networkStatus remains ready.
+            if (fetchPolicy === "standby") {
+                newNetworkStatus = NetworkStatus.ready;
+            }
+        }
+        if (fetchPolicy === "standby") {
+            this.cancelPolling();
         }
         this.networkStatus = newNetworkStatus;
         this.waitForOwnResult &&= skipCacheDataFor(options.fetchPolicy);
@@ -722,7 +800,7 @@ export class ObservableQuery {
             }
         };
         const variables = options.variables && { ...options.variables };
-        const { notifyOnNetworkStatusChange = false } = options;
+        const { notifyOnNetworkStatusChange = true } = options;
         const { observable, fromLink } = this.fetch(options, newNetworkStatus, notifyOnNetworkStatusChange &&
             oldNetworkStatus !== newNetworkStatus &&
             isNetworkRequestInFlight(newNetworkStatus), query);
@@ -835,40 +913,93 @@ export class ObservableQuery {
             }
             : result;
     }
-}
-// Reobserve with fetchPolicy effectively set to "cache-first", triggering
-// delivery of any new data from the cache, possibly falling back to the network
-// if any cache data are missing. This allows _complete_ cache results to be
-// delivered without also kicking off unnecessary network requests when
-// this.options.fetchPolicy is "cache-and-network" or "network-only". When
-// this.options.fetchPolicy is any other policy ("cache-first", "cache-only",
-// "standby", or "no-cache"), we call this.reobserve() as usual.
-export function reobserveCacheFirst(obsQuery) {
-    const { fetchPolicy, nextFetchPolicy } = obsQuery.options;
-    if (fetchPolicy === "cache-and-network" || fetchPolicy === "network-only") {
-        return obsQuery.reobserve({
-            fetchPolicy: "cache-first",
-            // Use a temporary nextFetchPolicy function that replaces itself with the
-            // previous nextFetchPolicy value and returns the original fetchPolicy.
-            nextFetchPolicy(currentFetchPolicy, context) {
-                // Replace this nextFetchPolicy function in the options object with the
-                // original this.options.nextFetchPolicy value.
-                this.nextFetchPolicy = nextFetchPolicy;
-                // If the original nextFetchPolicy value was a function, give it a
-                // chance to decide what happens here.
-                if (typeof this.nextFetchPolicy === "function") {
-                    return this.nextFetchPolicy(currentFetchPolicy, context);
+    dirty = false;
+    notifyTimeout;
+    /** @internal */
+    resetNotifications() {
+        this.cancelNotifyTimeout();
+        this.dirty = false;
+    }
+    cancelNotifyTimeout() {
+        if (this.notifyTimeout) {
+            clearTimeout(this.notifyTimeout);
+            this.notifyTimeout = void 0;
+        }
+    }
+    /** @internal */
+    scheduleNotify() {
+        if (this.dirty)
+            return;
+        this.dirty = true;
+        if (!this.notifyTimeout) {
+            this.notifyTimeout = setTimeout(() => this.notify(), 0);
+        }
+    }
+    /** @internal */
+    notify() {
+        this.cancelNotifyTimeout();
+        if (this.dirty) {
+            if (this.options.fetchPolicy == "cache-only" ||
+                this.options.fetchPolicy == "cache-and-network" ||
+                !isNetworkRequestInFlight(this.networkStatus)) {
+                const diff = this.queryInfo.getDiff();
+                if (diff.fromOptimisticTransaction) {
+                    // If this diff came from an optimistic transaction, deliver the
+                    // current cache data to the ObservableQuery, but don't perform a
+                    // reobservation, since oq.reobserveCacheFirst might make a network
+                    // request, and we never want to trigger network requests in the
+                    // middle of optimistic updates.
+                    this.observe();
                 }
-                // Otherwise go back to the original this.options.fetchPolicy.
-                return fetchPolicy;
-            },
-        });
+                else {
+                    // Otherwise, make the ObservableQuery "reobserve" the latest data
+                    // using a temporary fetch policy of "cache-first", so complete cache
+                    // results have a chance to be delivered without triggering additional
+                    // network requests, even when options.fetchPolicy is "network-only"
+                    // or "cache-and-network". All other fetch policies are preserved by
+                    // this method, and are handled by calling oq.reobserve(). If this
+                    // reobservation is spurious, isDifferentFromLastResult still has a
+                    // chance to catch it before delivery to ObservableQuery subscribers.
+                    this.reobserveCacheFirst();
+                }
+            }
+        }
+        this.dirty = false;
+    }
+    // Reobserve with fetchPolicy effectively set to "cache-first", triggering
+    // delivery of any new data from the cache, possibly falling back to the network
+    // if any cache data are missing. This allows _complete_ cache results to be
+    // delivered without also kicking off unnecessary network requests when
+    // this.options.fetchPolicy is "cache-and-network" or "network-only". When
+    // this.options.fetchPolicy is any other policy ("cache-first", "cache-only",
+    // "standby", or "no-cache"), we call this.reobserve() as usual.
+    reobserveCacheFirst() {
+        const { fetchPolicy, nextFetchPolicy } = this.options;
+        if (fetchPolicy === "cache-and-network" || fetchPolicy === "network-only") {
+            return this.reobserve({
+                fetchPolicy: "cache-first",
+                // Use a temporary nextFetchPolicy function that replaces itself with the
+                // previous nextFetchPolicy value and returns the original fetchPolicy.
+                nextFetchPolicy(currentFetchPolicy, context) {
+                    // Replace this nextFetchPolicy function in the options object with the
+                    // original this.options.nextFetchPolicy value.
+                    this.nextFetchPolicy = nextFetchPolicy;
+                    // If the original nextFetchPolicy value was a function, give it a
+                    // chance to decide what happens here.
+                    if (typeof this.nextFetchPolicy === "function") {
+                        return this.nextFetchPolicy(currentFetchPolicy, context);
+                    }
+                    // Otherwise go back to the original this.options.fetchPolicy.
+                    return fetchPolicy;
+                },
+            });
+        }
+        return this.reobserve();
     }
-    return obsQuery.reobserve();
 }
 export function logMissingFieldErrors(missing) {
     if (__DEV__ && missing) {
-        __DEV__ && invariant.debug(69, missing);
+        __DEV__ && invariant.debug(71, missing);
     }
 }
 function skipCacheDataFor(fetchPolicy /* `undefined` would mean `"cache-first"` */) {