@apollo/client 4.0.0-alpha.16 → 4.0.0-alpha.17

package/core/ObservableQuery.js

@@ -1,23 +1,24 @@
 import { equal } from "@wry/equality";
 import { Slot } from "optimism";
-import { BehaviorSubject, lastValueFrom, Observable, Subject, tap } from "rxjs";
+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";
 const { assign, hasOwnProperty } = Object;
-const newNetworkStatusSymbol = Symbol();
 const uninitialized = {
     loading: true,
     networkStatus: NetworkStatus.loading,
     data: undefined,
+    dataState: "empty",
     partial: true,
 };
 const empty = {
     loading: false,
     networkStatus: NetworkStatus.ready,
     data: undefined,
+    dataState: "empty",
     partial: true,
 };
 export class ObservableQuery {
@@ -200,19 +201,23 @@ export class ObservableQuery {
             : initialFetchPolicy || this.options.fetchPolicy;
         const defaultResult = {
             data: undefined,
+            dataState: "empty",
             loading: true,
             networkStatus: NetworkStatus.loading,
             partial: true,
         };
         const cacheResult = () => {
             const diff = this.getCacheDiff();
+            // TODO: queryInfo.getDiff should handle this since cache.diff returns a
+            // null when returnPartialData is false
+            const data = this.options.returnPartialData || diff.complete ?
+                diff.result ?? undefined
+                : undefined;
             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,
+                data,
+                dataState: diff.complete ? "complete"
+                    : data === undefined ? "empty"
+                        : "partial",
                 loading: !diff.complete,
                 networkStatus: diff.complete ? NetworkStatus.ready : NetworkStatus.loading,
                 partial: !diff.complete,
@@ -365,9 +370,8 @@ export class ObservableQuery {
                 this.getVariablesWithDefaults({ ...this.variables, ...variables });
         }
         this.queryInfo.resetLastWrite();
-        return this.reobserve({
-            ...reobserveOptions,
-            [newNetworkStatusSymbol]: NetworkStatus.refetch,
+        return this._reobserve(reobserveOptions, {
+            newNetworkStatus: NetworkStatus.refetch,
         });
     }
     /**
@@ -493,6 +497,7 @@ export class ObservableQuery {
                         // will be overwritten anyways, just here for types sake
                         loading: false,
                         data: data,
+                        dataState: lastResult.dataState === "streaming" ? "streaming" : "complete",
                     },
                     source: "network",
                 });
@@ -599,12 +604,11 @@ export class ObservableQuery {
         if (!this.hasObservers()) {
             return toQueryResult(this.getCurrentResult());
         }
-        return this.reobserve({
+        return this._reobserve({
             // Reset options.fetchPolicy to its original value.
             fetchPolicy: this.options.initialFetchPolicy,
             variables,
-            [newNetworkStatusSymbol]: NetworkStatus.setVariables,
-        });
+        }, { newNetworkStatus: NetworkStatus.setVariables });
     }
     /**
      * A function that enables you to update the query's cached result without executing a followup GraphQL operation.
@@ -676,7 +680,7 @@ export class ObservableQuery {
         }
         return options.fetchPolicy;
     }
-    fetch(options, networkStatus, fetchQuery) {
+    fetch(options, networkStatus, fetchQuery, operator) {
         // TODO Make sure we update the networkStatus (and infer fetchVariables)
         // before actually committing to the fetch.
         const initialFetchPolicy = this.options.fetchPolicy;
@@ -727,7 +731,7 @@ export class ObservableQuery {
                 }
             }
         });
-        const { observable, fromLink } = this.queryManager.fetchObservableWithInfo(queryInfo, options, { networkStatus, query: fetchQuery, onCacheHit, fetchQueryOperator });
+        let { observable, fromLink } = this.queryManager.fetchObservableWithInfo(queryInfo, options, { networkStatus, query: fetchQuery, onCacheHit, fetchQueryOperator });
         // track query and variables from the start of the operation
         const { query, variables } = this;
         const operation = {
@@ -738,6 +742,7 @@ export class ObservableQuery {
         this.activeOperations.add(operation);
         let forceFirstValueEmit = networkStatus == NetworkStatus.refetch ||
             networkStatus == NetworkStatus.setVariables;
+        observable = observable.pipe(operator, share());
         const subscription = observable
             .pipe(tap({
             next: (notification) => {
@@ -787,7 +792,7 @@ export class ObservableQuery {
             if (this.pollingInfo) {
                 if (!isNetworkRequestInFlight(this.networkStatus) &&
                     !this.options.skipPollAttempt?.()) {
-                    this.reobserve({
+                    this._reobserve({
                         // Most fetchPolicy options don't make sense to use in a polling context, as
                         // users wouldn't want to be polling the cache directly. However, network-only and
                         // no-cache are both useful for when the user wants to control whether or not the
@@ -795,7 +800,8 @@ export class ObservableQuery {
                         fetchPolicy: this.options.initialFetchPolicy === "no-cache" ?
                             "no-cache"
                             : "network-only",
-                        [newNetworkStatusSymbol]: NetworkStatus.poll,
+                    }, {
+                        newNetworkStatus: NetworkStatus.poll,
                     }).then(poll, poll);
                 }
                 else {
@@ -824,13 +830,11 @@ export class ObservableQuery {
      * merged with the current options when given.
      */
     reobserve(newOptions) {
+        return this._reobserve(newOptions);
+    }
+    _reobserve(newOptions, internalOptions) {
         this.isTornDown = false;
-        let newNetworkStatus;
-        if (newOptions) {
-            newNetworkStatus = newOptions[newNetworkStatusSymbol];
-            // Avoid setting the symbol option in this.options
-            delete newOptions[newNetworkStatusSymbol];
-        }
+        let { newNetworkStatus } = internalOptions || {};
         const useDisposableObservable = 
         // Refetching uses a disposable Observable to allow refetches using different
         // options, without permanently altering the options of the
@@ -905,32 +909,38 @@ export class ObservableQuery {
             this.cancelPolling();
         }
         this.resubscribeCache();
-        const { subscription, observable, fromLink } = this.fetch(options, newNetworkStatus, query);
-        if (!useDisposableObservable && (fromLink || !this.linkSubscription)) {
-            if (this.linkSubscription) {
-                this.linkSubscription.unsubscribe();
-            }
-            this.linkSubscription = subscription;
-        }
-        return preventUnhandledRejection(
-        // Note: lastValueFrom will create a separate subscription to the
-        // observable which means that terminating this ObservableQuery will not
-        // cancel the request from the link chain.
-        lastValueFrom(observable.pipe(filterMap((value) => {
+        const { promise, operator: promiseOperator } = getTrackingOperatorPromise((value) => {
             switch (value.kind) {
                 case "E":
                     throw value.error;
                 case "N":
-                    if (value.source !== "newNetworkStatus")
+                    if (value.source !== "newNetworkStatus" && !value.value.loading)
                         return value.value;
             }
-        })), {
-            // This default value should only be used when using a `fetchPolicy` of
-            // `standby` since that fetch policy completes without emitting a
-            // result. Since we are converting this to a QueryResult type, we
-            // omit the extra fields from ApolloQueryResult in the default value.
-            defaultValue: { data: undefined },
-        }).then((result) => toQueryResult(this.maskResult(result))));
+        }, 
+        // This default value should only be used when using a `fetchPolicy` of
+        // `standby` since that fetch policy completes without emitting a
+        // result. Since we are converting this to a QueryResult type, we
+        // omit the extra fields from ApolloQueryResult in the default value.
+        options.fetchPolicy === "standby" ?
+            { data: undefined }
+            : undefined);
+        const { subscription, observable, fromLink } = this.fetch(options, newNetworkStatus, query, promiseOperator);
+        if (!useDisposableObservable && (fromLink || !this.linkSubscription)) {
+            if (this.linkSubscription) {
+                this.linkSubscription.unsubscribe();
+            }
+            this.linkSubscription = subscription;
+        }
+        const ret = Object.assign(preventUnhandledRejection(promise.then((result) => toQueryResult(this.maskResult(result)))), {
+            retain: () => {
+                const subscription = observable.subscribe({});
+                const unsubscribe = () => subscription.unsubscribe();
+                promise.then(unsubscribe, unsubscribe);
+                return ret;
+            },
+        });
+        return ret;
     }
     hasObservers() {
         return this.subject.observed;
@@ -1043,6 +1053,9 @@ export class ObservableQuery {
                     kind: "N",
                     value: {
                         data: diff.result,
+                        dataState: diff.complete ? "complete"
+                            : diff.result ? "partial"
+                                : "empty",
                         networkStatus: NetworkStatus.ready,
                         loading: false,
                         error: undefined,
@@ -1159,14 +1172,17 @@ export class ObservableQuery {
             result =
                 notification.kind === "E" ?
                     {
-                        data: undefined,
-                        partial: true,
-                        ...(isEqualQuery(previous, notification) ? previous.result : {}),
+                        ...(isEqualQuery(previous, notification) ?
+                            previous.result
+                            : { data: undefined, dataState: "empty", partial: true }),
                         error: notification.error,
                         networkStatus: NetworkStatus.error,
                         loading: false,
                     }
                     : notification.value;
+            if (result.error && result.dataState === "streaming") {
+                result.dataState = "complete";
+            }
             if (result.error) {
                 meta.shouldEmit = 1 /* EmitBehavior.force */;
             }
@@ -1205,7 +1221,7 @@ export class ObservableQuery {
     reobserveCacheFirst() {
         const { fetchPolicy, nextFetchPolicy } = this.options;
         if (fetchPolicy === "cache-and-network" || fetchPolicy === "network-only") {
-            return this.reobserve({
+            this.reobserve({
                 fetchPolicy: "cache-first",
                 // Use a temporary nextFetchPolicy function that replaces itself with the
                 // previous nextFetchPolicy value and returns the original fetchPolicy.
@@ -1223,7 +1239,9 @@ export class ObservableQuery {
                 },
             });
         }
-        return this.reobserve();
+        else {
+            this.reobserve();
+        }
     }
     getVariablesWithDefaults(variables) {
         return this.queryManager.getVariables(this.query, variables);
@@ -1237,4 +1255,42 @@ export function logMissingFieldErrors(missing) {
 function isEqualQuery(a, b) {
     return !!(a && b && a.query === b.query && equal(a.variables, b.variables));
 }
+function getTrackingOperatorPromise(filterMapCb, defaultValue) {
+    let lastValue = defaultValue, resolve, reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    const operator = tap({
+        next(value) {
+            try {
+                const newValue = filterMapCb(value);
+                if (newValue !== undefined) {
+                    lastValue = newValue;
+                }
+            }
+            catch (error) {
+                reject(error);
+            }
+        },
+        finalize: () => {
+            if (lastValue) {
+                resolve(lastValue);
+            }
+            else {
+                const message = "The operation was aborted.";
+                const name = "AbortError";
+                reject(typeof DOMException !== "undefined" ?
+                    new DOMException(message, name)
+                    // some environments do not have `DOMException`, e.g. node
+                    // uses a normal `Error` with a `name` property instead: https://github.com/phryneas/node/blob/d0579b64f0f6b722f8e49bf8a471dd0d0604a21e/lib/internal/errors.js#L964
+                    // error.code is a legacy property that is not used anymore,
+                    // and also inconsistent across environments (in supporting
+                    // browsers it is `20`, in node `'ABORT_ERR'`) so we omit that.
+                    : Object.assign(new Error(message), { name }));
+            }
+        },
+    });
+    return { promise, operator };
+}
 //# sourceMappingURL=ObservableQuery.js.map