Fix React lifecycle issue in results panel (#8147)

* refactor looping errors for results view * add changelog
firebase · Jan 28, 2025 · 58c383c · 58c383c
1 parent 82d152a
commit 58c383c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git a/firebase-vscode/CHANGELOG.md b/firebase-vscode/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## NEXT
 
+- [Fixed] Fixed a bug where results panel would break on API error
+
 ## 0.12.1
 
 - Updated internal `firebase-tools` dependency to 13.29.2

diff --git a/firebase-vscode/webviews/data-connect/DataConnectExecutionResultsApp.tsx b/firebase-vscode/webviews/data-connect/DataConnectExecutionResultsApp.tsx
@@ -31,14 +31,11 @@ export function DataConnectExecutionResultsApp() {
     // in case the user wants to see the response anyway.
     response = results.data;
     const errors = results.errors;
-
     if (errors && errors.length !== 0) {
       errorsDisplay = (
         <>
           <Label>Error</Label>
-          {errors.map((error) => (
-            <GraphQLErrorView error={error} />
-          ))}
+          <GraphQLErrorView errors={errors} />
         </>
       );
     }
@@ -106,27 +103,40 @@ function InternalErrorView({ error }: { error: SerializedError }) {
 }
 
 /** A view for when an execution returns status 200 but contains errors. */
-function GraphQLErrorView({ error }: { error: GraphQLError }) {
+function GraphQLErrorView({ errors }: { errors: readonly GraphQLError[] }) {
   let pathDisplay: JSX.Element | undefined;
-  if (error.path) {
-    // Renders the path as a series of kbd elements separated by commas
-    pathDisplay = (
-      <>
-        {error.path?.map((path, index) => {
-          const item = <kbd>{path}</kbd>;
+  // update path
+  const errorsWithPathDisplay = errors.map((error) => {
+    if (error.path) {
+      // Renders the path as a series of kbd elements separated by commas
+      return {
+        ...error,
+        pathDisplay: (
+          <>
+            {error.path?.map((path, index) => {
+              const item = <kbd>{path}</kbd>;
 
-          return index === 0 ? item : <>, {item}</>;
-        })}{" "}
-      </>
-    );
-  }
+              return index === 0 ? item : <>, {item}</>;
+            })}{" "}
+          </>
+        ),
+      };
+    }
+    return error;
+  });
 
   return (
-    <p style={{ whiteSpace: "pre-wrap" }}>
-      {pathDisplay}
-      {error.message}
-      {error.stack && <StackView stack={error.stack} />}
-    </p>
+    <>
+      {errorsWithPathDisplay.map((error) => {
+        return (
+          <p style={{ whiteSpace: "pre-wrap" }}>
+            {pathDisplay}
+            {error.message}
+            {error.stack && <StackView stack={error.stack} />}
+          </p>
+        );
+      })}
+    </>
   );
 }