Fix explorer infinite loading when errors are returned (#1722)

Author: jerelmiller

.changeset/yellow-eyes-look.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix an issue where executing a query in the explorer tab that returned errors would get stuck in the loading state indefinitely.

package-lock.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@apollo/brand": "^0.7.0",
-    "@apollo/client": "4.0.3",
+    "@apollo/client": "4.0.5",
     "@apollo/client-3": "npm:@apollo/client@3.14.0",
     "@apollo/icons": "^0.8.0",
     "@apollo/tailwind-preset": "^0.2.0",

package.json

@@ -3,6 +3,7 @@ import type {
   CombinedProtocolErrors,
   LocalStateError,
 } from "@apollo/client";
+import { isNetworkRequestSettled } from "@apollo/client/utilities";
 import type {
   ApolloClient,
   DocumentNode,
@@ -98,7 +99,11 @@ export class ClientV4Handler extends ClientHandler<ApolloClient> {
     fetchPolicy: FetchPolicy;
   }): Observable<EmbeddedExplorerResponse> {
     return this.client.watchQuery<JSONObject>(options).pipe(
-      filter((result) => result.dataState !== "empty"),
+      filter(
+        (result) =>
+          isNetworkRequestSettled(result.networkStatus) ||
+          result.dataState !== "empty"
+      ),
       map(
         (result): EmbeddedExplorerResponse => ({
           data: result.data,
@@ -333,14 +338,15 @@ function getErrorProperties(error: unknown): EmbeddedExplorerResponse {
   if (isBranded(error, "CombinedGraphQLErrors")) {
     return {
       data: error.data,
-      error,
       errors: error.errors,
       extensions: error.extensions,
     };
   }
 
   if (isErrorLike(error)) {
-    return { error };
+    return {
+      error: { message: error.message, stack: error.stack },
+    };
   }
 
   return {};