Emit initial loading state when notifyOnNetworkStatusChange is true (#12536)

Author: jerelmiller

Diff for: .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.

Diff for: .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.

Diff for: .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`.

Diff for: .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`.

Diff for: .size-limits.json

@@ -1,6 +1,6 @@
 {
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 42852,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38311,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 32787,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27726
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 42984,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38432,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 32968,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27861
 }

Diff for: src/__tests__/ApolloClient.ts

@@ -2,7 +2,7 @@ import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import { expectTypeOf } from "expect-type";
 import { Kind } from "graphql";
 import { gql } from "graphql-tag";
-import { Observable, of } from "rxjs";
+import { delay, Observable, of } from "rxjs";
 
 import type {
   ApolloQueryResult,
@@ -1163,7 +1163,7 @@ describe("ApolloClient", () => {
         },
       };
       const link = new ApolloLink(() => {
-        return of({ data });
+        return of({ data }).pipe(delay(20));
       });
       function newClient() {
         return new ApolloClient({
@@ -1216,6 +1216,13 @@ describe("ApolloClient", () => {
           const observable = client.watchQuery<Data>({ query });
           const stream = new ObservableStream(observable);
 
+          await expect(stream).toEmitTypedValue({
+            data: undefined,
+            loading: true,
+            networkStatus: NetworkStatus.loading,
+            partial: true,
+          });
+
           await expect(stream).toEmitTypedValue({
             data,
             loading: false,
@@ -1265,6 +1272,13 @@ describe("ApolloClient", () => {
           const observable = client.watchQuery<Data>({ query });
           const stream = new ObservableStream(observable);
 
+          await expect(stream).toEmitTypedValue({
+            data: undefined,
+            loading: true,
+            networkStatus: NetworkStatus.loading,
+            partial: true,
+          });
+
           await expect(stream).toEmitTypedValue({
             data,
             loading: false,
@@ -1321,6 +1335,13 @@ describe("ApolloClient", () => {
           const observable = client.watchQuery<Data>({ query });
           const stream = new ObservableStream(observable);
 
+          await expect(stream).toEmitTypedValue({
+            data: undefined,
+            loading: true,
+            networkStatus: NetworkStatus.loading,
+            partial: true,
+          });
+
           {
             const result = await stream.takeNext();
 
@@ -1359,6 +1380,13 @@ describe("ApolloClient", () => {
           const observable = client.watchQuery<Data>({ query });
           const stream = new ObservableStream(observable);
 
+          await expect(stream).toEmitTypedValue({
+            data: undefined,
+            loading: true,
+            networkStatus: NetworkStatus.loading,
+            partial: true,
+          });
+
           {
             const result = await stream.takeNext();
 
@@ -2125,7 +2153,6 @@ describe("ApolloClient", () => {
         const observable = client.watchQuery({
           query,
           fetchPolicy,
-          notifyOnNetworkStatusChange: true,
         });
         const stream = new ObservableStream(observable);
         await expect(stream).toEmitTypedValue({
@@ -2158,12 +2185,16 @@ describe("ApolloClient", () => {
         });
         client.prioritizeCacheValues = true;
 
-        const observable = client.watchQuery({
-          query,
-          fetchPolicy,
-          notifyOnNetworkStatusChange: true,
-        });
+        const observable = client.watchQuery({ query, fetchPolicy });
         const stream = new ObservableStream(observable);
+
+        await expect(stream).toEmitTypedValue({
+          data: undefined,
+          loading: true,
+          networkStatus: NetworkStatus.loading,
+          partial: true,
+        });
+
         await expect(stream).toEmitTypedValue({
           loading: false,
           networkStatus: NetworkStatus.ready,
@@ -2197,8 +2228,7 @@ describe("ApolloClient", () => {
           notifyOnNetworkStatusChange: true,
         });
         const stream = new ObservableStream(observable);
-        // not really part of this test case but I decided to leave it here to highlight this
-        // in the case of a network request, `no-cache` emits a `loading` state while `network-only` etc. do not?
+
         await expect(stream).toEmitTypedValue({
           loading: true,
           networkStatus: NetworkStatus.loading,
@@ -2957,7 +2987,19 @@ describe("ApolloClient", () => {
       const stream = new ObservableStream(observable);
       link.simulateResult({ result: { data: { foo: { bar: 1 } } } }, true);
 
-      await stream.takeNext();
+      await expect(stream).toEmitTypedValue({
+        data: undefined,
+        loading: true,
+        networkStatus: NetworkStatus.loading,
+        partial: true,
+      });
+
+      await expect(stream).toEmitTypedValue({
+        data: { foo: { bar: 1 } },
+        loading: false,
+        networkStatus: NetworkStatus.ready,
+        partial: false,
+      });
 
       const result = client.refetchQueries({
         include: "all",