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

package/.changeset/forty-tomatoes-punch.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+The returned `networkStatus` in `useLazyQuery` is now set to `setVariables` when calling the `useLazyQuery` `execute` function for the first time with variables.

package/.changeset/fuzzy-tips-sit.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Ensure `ObservableQuery` stops polling if switching to a `standby` `fetchPolicy`. When switching back to a non-`standby` `fetchPolicy`, polling will resume.

package/.changeset/khaki-keys-deliver.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": major
+---
+
+An initial loading state is now emitted from `ObservableQuery` when subscribing if `notifyOnNetworkStatusChange` is set to `true`.

package/.changeset/large-plants-know.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Ensure a loading state is emitted when calling the `execute` function after changing clients in `useLazyQuery`.

package/.changeset/mean-lizards-think.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Ensure `useLazyQuery` does not return a `partial` property which is not specified by the result type.

package/.changeset/pre.json

@@ -26,9 +26,11 @@
     "fluffy-shoes-applaud",
     "forty-hairs-occur",
     "forty-shrimps-fry",
+    "forty-tomatoes-punch",
     "four-ghosts-watch",
     "fresh-moose-hope",
     "funny-jeans-invent",
+    "fuzzy-tips-sit",
     "giant-apes-thank",
     "giant-bags-share",
     "good-dolphins-peel",
@@ -39,8 +41,10 @@
     "hot-cycles-notice",
     "itchy-drinks-refuse",
     "itchy-roses-accept",
+    "khaki-keys-deliver",
     "khaki-spies-work",
     "kind-fishes-develop",
+    "large-plants-know",
     "late-trainers-peel",
     "light-apes-rescue",
     "light-dolphins-taste",
@@ -50,6 +54,7 @@
     "lucky-hats-push",
     "many-buses-allow",
     "many-papayas-hide",
+    "mean-lizards-think",
     "metal-needles-search",
     "mighty-penguins-wink",
     "modern-feet-do",
@@ -98,6 +103,7 @@
     "tame-points-work",
     "tender-swans-flash",
     "thick-books-grin",
+    "thin-peas-hear",
     "tidy-squids-poke",
     "tough-rockets-allow",
     "tough-taxis-smoke",

package/.changeset/thin-peas-hear.md

@@ -0,0 +1,16 @@
+---
+"@apollo/client": major
+---
+
+`notifyOnNetworkStatusChange` now defaults to `true`. This means that loading states will be emitted (core API) or rendered (React) by default when calling `refetch`, `fetchMore`, etc. To maintain the old behavior, set `notifyOnNetworkStatusChange` to `false` in `defaultOptions`.
+
+```ts
+new ApolloClient({
+  defaultOptions: {
+    watchQuery: {
+      // Use the v3 default
+      notifyOnNetworkStatusChange: false
+    }
+  }
+})
+```

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @apollo/client
 
+## 4.0.0-alpha.9
+
+### Major Changes
+
+- [#12536](https://github.com/apollographql/apollo-client/pull/12536) [`e14205a`](https://github.com/apollographql/apollo-client/commit/e14205ad5909f95aa04684acd0ca2f25956ee50c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - An initial loading state is now emitted from `ObservableQuery` when subscribing if `notifyOnNetworkStatusChange` is set to `true`.
+
+- [#12512](https://github.com/apollographql/apollo-client/pull/12512) [`e809b71`](https://github.com/apollographql/apollo-client/commit/e809b71aa9a02917a286afdbb03d5be8e5947c53) Thanks [@jerelmiller](https://github.com/jerelmiller)! - `notifyOnNetworkStatusChange` now defaults to `true`. This means that loading states will be emitted (core API) or rendered (React) by default when calling `refetch`, `fetchMore`, etc. To maintain the old behavior, set `notifyOnNetworkStatusChange` to `false` in `defaultOptions`.
+
+  ```ts
+  new ApolloClient({
+    defaultOptions: {
+      watchQuery: {
+        // Use the v3 default
+        notifyOnNetworkStatusChange: false,
+      },
+    },
+  });
+  ```
+
+### Patch Changes
+
+- [#12536](https://github.com/apollographql/apollo-client/pull/12536) [`e14205a`](https://github.com/apollographql/apollo-client/commit/e14205ad5909f95aa04684acd0ca2f25956ee50c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - The returned `networkStatus` in `useLazyQuery` is now set to `setVariables` when calling the `useLazyQuery` `execute` function for the first time with variables.
+
+- [#12536](https://github.com/apollographql/apollo-client/pull/12536) [`e14205a`](https://github.com/apollographql/apollo-client/commit/e14205ad5909f95aa04684acd0ca2f25956ee50c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Ensure `ObservableQuery` stops polling if switching to a `standby` `fetchPolicy`. When switching back to a non-`standby` `fetchPolicy`, polling will resume.
+
+- [#12536](https://github.com/apollographql/apollo-client/pull/12536) [`e14205a`](https://github.com/apollographql/apollo-client/commit/e14205ad5909f95aa04684acd0ca2f25956ee50c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Ensure a loading state is emitted when calling the `execute` function after changing clients in `useLazyQuery`.
+
+- [#12542](https://github.com/apollographql/apollo-client/pull/12542) [`afb4fce`](https://github.com/apollographql/apollo-client/commit/afb4fce08859b2c6eebf288230a7c35b7acf2da6) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Ensure `useLazyQuery` does not return a `partial` property which is not specified by the result type.
+
 ## 4.0.0-alpha.8
 
 ### Major Changes

package/__cjs/core/ObservableQuery.cjs

@@ -17,6 +17,7 @@ const equalByQuery_js_1 = require("./equalByQuery.cjs");
 const networkStatus_js_1 = require("./networkStatus.cjs");
 const { assign, hasOwnProperty } = Object;
 const newNetworkStatusSymbol = Symbol();
+const uninitialized = {};
 class ObservableQuery {
     /**
      * @internal
@@ -46,7 +47,6 @@ class ObservableQuery {
     }
     subject;
     observable;
-    initialResult;
     isTornDown;
     queryManager;
     subscriptions = new Set();
@@ -60,14 +60,8 @@ class ObservableQuery {
     networkStatus;
     constructor({ queryManager, queryInfo, options, }) {
         this.networkStatus = networkStatus_js_1.NetworkStatus.loading;
-        this.initialResult = {
-            data: undefined,
-            loading: true,
-            networkStatus: this.networkStatus,
-            partial: true,
-        };
         let startedInactive = ObservableQuery.inactiveOnCreation.getValue();
-        this.subject = new rxjs_1.BehaviorSubject(this.initialResult);
+        this.subject = new rxjs_1.BehaviorSubject(uninitialized);
         this.observable = this.subject.pipe((0, rxjs_1.tap)({
             subscribe: () => {
                 if (startedInactive) {
@@ -75,6 +69,22 @@ class ObservableQuery {
                     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
@@ -89,19 +99,14 @@ class ObservableQuery {
                     this.tearDownQuery();
                 }
             },
-        }), 
-        // TODO: Conditionally filter when notifyOnNetworkStatusChange is true or
-        // not. We want to emit the loading result if notifyOnNetworkStatusChange
-        // is true.
-        (0, rxjs_1.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));
+        }), (0, rxjs_1.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;
@@ -146,6 +151,50 @@ 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_js_1.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_js_1.NetworkStatus.ready : networkStatus_js_1.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_js_1.NetworkStatus.loading,
+                };
+            case "standby":
+                return {
+                    ...defaultResult,
+                    loading: false,
+                    networkStatus: networkStatus_js_1.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);
@@ -321,6 +370,7 @@ 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();
@@ -613,10 +663,7 @@ 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) {
@@ -654,6 +701,13 @@ 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.
@@ -705,6 +759,7 @@ 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.
@@ -715,10 +770,10 @@ class ObservableQuery {
                 newOptions.variables &&
                 !(0, equality_1.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")) {
@@ -736,6 +791,14 @@ class ObservableQuery {
                 !(0, equality_1.equal)(newOptions.variables, oldVariables)) {
                 newNetworkStatus = networkStatus_js_1.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_js_1.NetworkStatus.ready;
+            }
+        }
+        if (fetchPolicy === "standby") {
+            this.cancelPolling();
         }
         this.networkStatus = newNetworkStatus;
         this.waitForOwnResult &&= skipCacheDataFor(options.fetchPolicy);
@@ -745,7 +808,7 @@ 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 &&
             (0, networkStatus_js_1.isNetworkRequestInFlight)(newNetworkStatus), query);