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

package/core/ObservableQuery.js

@@ -1,11 +1,11 @@
 import { equal } from "@wry/equality";
-import { Slot } from "optimism";
 import { BehaviorSubject, Observable, share, Subject, tap } from "rxjs";
 import { __DEV__ } from "@apollo/client/utilities/environment";
 import { compact, filterMap, getOperationDefinition, getQueryDefinition, preventUnhandledRejection, toQueryResult, } from "@apollo/client/utilities/internal";
 import { invariant } from "@apollo/client/utilities/invariant";
 import { equalByQuery } from "./equalByQuery.js";
 import { isNetworkRequestInFlight, NetworkStatus } from "./networkStatus.js";
+import { QueryInfo } from "./QueryInfo.js";
 const { assign, hasOwnProperty } = Object;
 const uninitialized = {
     loading: true,
@@ -22,19 +22,14 @@ const empty = {
     partial: true,
 };
 export class ObservableQuery {
+    options;
+    queryName;
     /**
-    * @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.
+    * @internal will be read and written from `QueryInfo`
     * 
     * @deprecated This is an internal API and should not be used directly. This can be removed or changed at any time.
     */
-    static inactiveOnCreation = new Slot();
-    options;
-    queryId;
-    queryName;
+    _lastWrite;
     // The `query` computed property will always reflect the document transformed
     // by the last run query. `this.options.query` will always reflect the raw
     // untransformed query to ensure document transforms with runtime conditionals
@@ -51,7 +46,6 @@ export class ObservableQuery {
     unsubscribeFromCache;
     input;
     subject;
-    observable;
     isTornDown;
     queryManager;
     subscriptions = new Set();
@@ -62,16 +56,12 @@ export class ObservableQuery {
      */
     waitForNetworkResult;
     lastQuery;
-    queryInfo;
     linkSubscription;
     pollingInfo;
     get networkStatus() {
         return this.subject.getValue().result.networkStatus;
     }
-    constructor({ queryManager, queryInfo, options, }) {
-        let startedInactive = ObservableQuery.inactiveOnCreation.getValue();
-        // related classes
-        this.queryInfo = queryInfo;
+    constructor({ queryManager, options, transformedQuery = queryManager.transform(options.query), }) {
         this.queryManager = queryManager;
         // active state
         this.waitForNetworkResult = options.fetchPolicy === "network-only";
@@ -82,7 +72,7 @@ export class ObservableQuery {
         const { fetchPolicy = defaultFetchPolicy, 
         // Make sure we don't store "standby" as the initialFetchPolicy.
         initialFetchPolicy = fetchPolicy === "standby" ? defaultFetchPolicy : (fetchPolicy), } = options;
-        this.lastQuery = options.query;
+        this.lastQuery = transformedQuery;
         this.options = {
             ...options,
             // Remember the initial options.fetchPolicy so we can revert back to this
@@ -94,18 +84,23 @@ export class ObservableQuery {
             fetchPolicy,
             variables: this.getVariablesWithDefaults(options.variables),
         };
+        this.initializeObservablesQueue();
+        this["@@observable"] = () => this;
+        if (Symbol.observable) {
+            this[Symbol.observable] = () => this;
+        }
+        const opDef = getOperationDefinition(this.query);
+        this.queryName = opDef && opDef.name && opDef.name.value;
+    }
+    initializeObservablesQueue() {
         this.subject = new BehaviorSubject({
             query: this.query,
             variables: this.variables,
             result: uninitialized,
             meta: {},
         });
-        this.observable = this.subject.pipe(tap({
+        const 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.
@@ -157,20 +152,13 @@ export class ObservableQuery {
                 return current;
             }
         }, () => ({})));
-        this["@@observable"] = () => this;
-        if (Symbol.observable) {
-            this[Symbol.observable] = () => this;
-        }
-        this.pipe = this.observable.pipe.bind(this.observable);
-        this.subscribe = this.observable.subscribe.bind(this.observable);
+        this.pipe = observable.pipe.bind(observable);
+        this.subscribe = observable.subscribe.bind(observable);
         this.input = new Subject();
         // we want to feed many streams into `this.subject`, but none of them should
         // be able to close `this.input`
         this.input.complete = () => { };
         this.input.pipe(this.operator).subscribe(this.subject);
-        this.queryId = queryInfo.queryId || queryManager.generateQueryId();
-        const opDef = getOperationDefinition(this.query);
-        this.queryName = opDef && opDef.name && opDef.name.value;
     }
     // We can't use Observable['subscribe'] here as the type as it conflicts with
     // the ability to infer T from Subscribable<T>. This limits the surface area
@@ -184,9 +172,6 @@ export class ObservableQuery {
     * 
     * @deprecated This is an internal API and should not be used directly. This can be removed or changed at any time.
     */
-    resetDiff() {
-        this.queryInfo.resetDiff();
-    }
     getCacheDiff({ optimistic = true } = {}) {
         return this.queryManager.cache.diff({
             query: this.query,
@@ -369,7 +354,7 @@ export class ObservableQuery {
             reobserveOptions.variables = this.options.variables =
                 this.getVariablesWithDefaults({ ...this.variables, ...variables });
         }
-        this.queryInfo.resetLastWrite();
+        this._lastWrite = undefined;
         return this._reobserve(reobserveOptions, {
             newNetworkStatus: NetworkStatus.refetch,
         });
@@ -397,7 +382,6 @@ export class ObservableQuery {
             notifyOnNetworkStatusChange: this.options.notifyOnNetworkStatusChange,
         };
         combinedOptions.query = this.transformDocument(combinedOptions.query);
-        const qid = this.queryManager.generateQueryId();
         // If a temporary query is passed to `fetchMore`, we don't want to store
         // it as the last query result since it may be an optimized query for
         // pagination. We will however run the transforms on the original document
@@ -420,9 +404,8 @@ export class ObservableQuery {
             value: {},
         }, { shouldEmit: 3 /* EmitBehavior.networkStatusChange */ });
         return this.queryManager
-            .fetchQuery(qid, combinedOptions, NetworkStatus.fetchMore)
+            .fetchQuery(combinedOptions, NetworkStatus.fetchMore)
             .then((fetchMoreResult) => {
-            this.queryManager.removeQuery(qid);
             // disable the `fetchMore` override that is currently active
             // the next updates caused by this should not be `fetchMore` anymore,
             // but `ready` or whatever other calculated loading state is currently
@@ -684,8 +667,10 @@ export class ObservableQuery {
         // TODO Make sure we update the networkStatus (and infer fetchVariables)
         // before actually committing to the fetch.
         const initialFetchPolicy = this.options.fetchPolicy;
-        const queryInfo = this.queryManager.getOrCreateQuery(this.queryId);
-        queryInfo.setObservableQuery(this);
+        const queryInfo = new QueryInfo({
+            queryManager: this.queryManager,
+            observableQuery: this,
+        });
         options.context ??= {};
         let synchronouslyEmitted = false;
         const onCacheHit = () => {
@@ -706,7 +691,7 @@ export class ObservableQuery {
                 });
             }
             finally {
-                if (!synchronouslyEmitted && this.activeOperations.has(operation)) {
+                if (!synchronouslyEmitted) {
                     operation.override = networkStatus;
                     this.input.next({
                         kind: "N",
@@ -735,7 +720,9 @@ export class ObservableQuery {
         // track query and variables from the start of the operation
         const { query, variables } = this;
         const operation = {
-            abort: () => subscription.unsubscribe(),
+            abort: () => {
+                subscription.unsubscribe();
+            },
             query,
             variables,
         };
@@ -835,6 +822,7 @@ export class ObservableQuery {
     _reobserve(newOptions, internalOptions) {
         this.isTornDown = false;
         let { newNetworkStatus } = internalOptions || {};
+        this.queryManager.obsQueries.add(this);
         const useDisposableObservable = 
         // Refetching uses a disposable Observable to allow refetches using different
         // options, without permanently altering the options of the
@@ -932,7 +920,16 @@ export class ObservableQuery {
             }
             this.linkSubscription = subscription;
         }
-        const ret = Object.assign(preventUnhandledRejection(promise.then((result) => toQueryResult(this.maskResult(result)))), {
+        const ret = Object.assign(preventUnhandledRejection(promise
+            .then((result) => toQueryResult(this.maskResult(result)))
+            .finally(() => {
+            if (!this.hasObservers() && this.activeOperations.size === 0) {
+                // If `reobserve` was called on a query without any obervers,
+                // the teardown logic would never be called, so we need to
+                // call it here to ensure the query is properly torn down.
+                this.tearDownQuery();
+            }
+        })), {
             retain: () => {
                 const subscription = observable.subscribe({});
                 const unsubscribe = () => subscription.unsubscribe();
@@ -945,6 +942,14 @@ export class ObservableQuery {
     hasObservers() {
         return this.subject.observed;
     }
+    /**
+     * Tears down the `ObservableQuery` and stops all active operations by sending a `complete` notification.
+     */
+    stop() {
+        this.subject.complete();
+        this.initializeObservablesQueue();
+        this.tearDownQuery();
+    }
     tearDownQuery() {
         if (this.isTornDown)
             return;
@@ -958,9 +963,10 @@ export class ObservableQuery {
         // stop all active GraphQL subscriptions
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.clear();
-        this.queryManager.removeQuery(this.queryId);
+        this.queryManager.obsQueries.delete(this);
         this.isTornDown = true;
         this.abortActiveOperations();
+        this._lastWrite = undefined;
     }
     transformDocument(document) {
         return this.queryManager.transform(document);
@@ -973,7 +979,7 @@ export class ObservableQuery {
                     document: this.query,
                     data: result.data,
                     fetchPolicy: this.options.fetchPolicy,
-                    id: this.queryId,
+                    cause: this,
                 }),
             }
             : result;