Add errorCode as prop to Failure component (#3721)

* Add errorCode as prop to Failure component * Add optional chaining for access properties * add JSDocs to errorCode * add unit test * Change to an obvious errorCode for test Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com> Co-authored-by: David Price <thedavid@thedavidprice.com>
redwoodjs · Nov 19, 2021 · 6ea8350 · 6ea8350
1 parent 5a6f260
commit 6ea8350
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/packages/web/src/components/createCell.test.tsx b/packages/web/src/components/createCell.test.tsx
@@ -276,6 +276,32 @@ describe('createCell', () => {
     screen.getByText(/^{"msg":"System malfunction"}$/)
   })
 
+  test('Passes error and errorCode to Failure component', async () => {
+    const TestCell = createCell({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: 'query TestQuery { answer }',
+      Failure: ({ error, errorCode }) => (
+        <>
+          {JSON.stringify(error)},code:{errorCode}
+        </>
+      ),
+      Success: () => <>Great success!</>,
+      Loading: () => <>Fetching answer...</>,
+    })
+
+    const myUseQueryHook = () => ({
+      error: { msg: 'System malfunction' },
+      errorCode: 'SIMON_SAYS_NO',
+    })
+
+    render(
+      <GraphQLHooksProvider useQuery={myUseQueryHook} useMutation={null}>
+        <TestCell />
+      </GraphQLHooksProvider>
+    )
+    screen.getByText(/^{"msg":"System malfunction"},code:SIMON_SAYS_NO$/)
+  })
+
   test('Passes children to Failure', async () => {
     const TestCell = createCell({
       // @ts-expect-error - Purposefully using a plain string here.

diff --git a/packages/web/src/components/createCell.tsx b/packages/web/src/components/createCell.tsx
@@ -33,6 +33,7 @@ export type DataObject = { [key: string]: unknown }
 export type CellFailureProps = Partial<
   Omit<QueryOperationResult, 'data' | 'error' | 'loading'> & {
     error: QueryOperationResult['error'] | Error // for tests and storybook
+    errorCode: string
     updating: boolean
   }
 >
@@ -150,6 +151,14 @@ export function createCell<CellProps = any>({
               return (
                 <Failure
                   error={error}
+                  /**
+                   * error code
+                   * @optional
+                   * @type {string}
+                   * @see https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes
+                   * The error code came from `error.graphQLErrors[0].extensions.code`
+                   */
+                  errorCode={error.graphQLErrors?.[0]?.extensions?.code}
                   {...{ updating: loading, ...queryRest, ...props }}
                 />
               )