@apollo/client 4.0.0-alpha.6 → 4.0.0-alpha.8

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";
@@ -9,6 +10,14 @@ import { isNetworkRequestInFlight, NetworkStatus } from "./networkStatus.js";
 const { assign, hasOwnProperty } = Object;
 const newNetworkStatusSymbol = Symbol();
 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;
@@ -49,9 +58,14 @@ export class ObservableQuery {
             networkStatus: this.networkStatus,
             partial: true,
         };
+        let startedInactive = ObservableQuery.inactiveOnCreation.getValue();
         this.subject = new BehaviorSubject(this.initialResult);
         this.observable = this.subject.pipe(tap({
             subscribe: () => {
+                if (startedInactive) {
+                    queryManager["queries"].set(this.queryId, queryInfo);
+                    startedInactive = false;
+                }
                 if (!this.subject.observed) {
                     this.reobserve();
                     // TODO: See if we can rework updatePolling to better handle this.
@@ -263,7 +277,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(69, variables, queryDef.name?.value || queryDef);
+                __DEV__ && invariant.warn(67, variables, queryDef.name?.value || queryDef);
             }
         }
         if (variables && !equal(this.options.variables, variables)) {
@@ -322,7 +336,7 @@ export class ObservableQuery {
         const updateQuery = fetchMoreOptions?.updateQuery;
         const isCached = this.options.fetchPolicy !== "no-cache";
         if (!isCached) {
-            invariant(updateQuery, 70);
+            invariant(updateQuery, 68);
         }
         return this.queryManager
             .fetchQuery(qid, combinedOptions, NetworkStatus.fetchMore)
@@ -407,7 +421,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 +449,7 @@ export class ObservableQuery {
                         onError(error);
                     }
                     else {
-                        __DEV__ && invariant.error(71, error);
+                        __DEV__ && invariant.error(69, error);
                     }
                     return;
                 }
@@ -579,8 +593,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() {
@@ -599,7 +614,7 @@ export class ObservableQuery {
         if (pollingInfo && pollingInfo.interval === pollInterval) {
             return;
         }
-        invariant(pollInterval, 72);
+        invariant(pollInterval, 70);
         const info = pollingInfo || (this.pollingInfo = {});
         info.interval = pollInterval;
         const maybeFetch = () => {
@@ -835,40 +850,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(73, missing);
+        __DEV__ && invariant.debug(71, missing);
     }
 }
 function skipCacheDataFor(fetchPolicy /* `undefined` would mean `"cache-first"` */) {