add error panel to show graphql errors

trailheadapps · Oct 12, 2023 · 8c52298 · 8c52298
1 parent 342cb65
commit 8c52298
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/force-app/main/default/lwc/recordPickerHello/__tests__/recordPickerHello.test.js b/force-app/main/default/lwc/recordPickerHello/__tests__/recordPickerHello.test.js
@@ -108,4 +108,19 @@ describe('recordPickerHello', () => {
 
         expect(selectedRecordDetails).toBeFalsy();
     });
+
+    describe('graphql @wire error', () => {
+        it('shows error panel element', async () => {
+            // Emit error from @wire
+            graphql.emitErrors(['an error']);
+
+            // Wait for any asynchronous DOM updates
+            await flushPromises();
+
+            // Check for error panel
+            const errorPanelEl =
+                element.shadowRoot.querySelector('c-error-panel');
+            expect(errorPanelEl).not.toBeNull();
+        });
+    });
 });
diff --git a/force-app/main/default/lwc/recordPickerHello/recordPickerHello.html b/force-app/main/default/lwc/recordPickerHello/recordPickerHello.html
@@ -23,7 +23,9 @@
                 ></c-contact-tile>
             </div>
         </template>
-
+        <template lwc:if={wireError}>
+            <c-error-panel errors={wireError}></c-error-panel>
+        </template>
         <c-view-source source="lwc/recordPickerHello" slot="footer">
             Type a search term and select a record to see its details.
         </c-view-source>

diff --git a/force-app/main/default/lwc/recordPickerHello/recordPickerHello.js b/force-app/main/default/lwc/recordPickerHello/recordPickerHello.js
@@ -4,6 +4,7 @@ import { gql, graphql } from 'lightning/uiGraphQLApi';
 export default class RecordPickerHello extends LightningElement {
     selectedRecordId = '';
     contact;
+    wireError;
 
     get variables() {
         return {
@@ -51,12 +52,8 @@ export default class RecordPickerHello extends LightningElement {
         variables: '$variables'
     })
     wiredGraphQL({ data, errors }) {
-        if (errors) {
-            this.dispatchEvent(new CustomEvent('error', { error: errors }));
-            return;
-        }
-
-        if (!data) {
+        this.wireError = errors;
+        if (errors || !data) {
             return;
         }