[Bug fix] commerce-sdk-react hooks missing API errors

packages/commerce-sdk-react/src/hooks/useQuery.ts

@@ -48,7 +48,17 @@ export const useQuery = <Client extends ApiClient, Options extends ApiOptions, D
     // missing parameters. This will result in a runtime error. I think that this is an acceptable
     // trade-off, as the behavior is opt-in by the end user, and it feels like adding type safety
     // for this case would add significantly more complexity.
-    const wrappedMethod = async () => await authenticatedMethod(apiOptions as Options)
+    const wrappedMethod = async () => {
+        try {
+            return await authenticatedMethod(apiOptions as Options)
+        } catch (e) {
+            if (typeof e === 'object' && e !== null && 'response' in e) {
+                const json = await (e.response as Response).json()
+                throw json
+            }
+            throw e
+        }
+    }
     return useReactQuery(hookConfig.queryKey, wrappedMethod, {
         enabled:
             // Individual hooks can provide `enabled` checks that are done in ADDITION to

packages/test-commerce-sdk-react/app/pages/query-errors.tsx

@@ -17,15 +17,6 @@ const QueryErrors = () => {
     // Type assertion because we're explicitly violating the expected type
     const products = useProducts({parameters: {FOO: ''}} as any, {enabled: true})
     const product = useProduct({parameters: {id: '25502228Mxxx'}})
-    /** Errors don't nicely serialize to JSON, so we have to do it ourselves. */
-    const toLoggable = (err: unknown) => {
-        if (err instanceof Error) {
-            // Clone all keys onto a plain object
-            const keys = Object.getOwnPropertyNames(err) as Array<keyof Error>
-            return keys.reduce((acc, key) => ({...acc, [key]: err[key]}), {})
-        }
-        return err
-    }
 
     return (
         <>
@@ -55,7 +46,7 @@ const QueryErrors = () => {
                 <Json
                     data={{
                         isLoading: products.isLoading,
-                        error: toLoggable(products.error),
+                        error: products.error,
                         data: products.data
                     }}
                 />
@@ -70,7 +61,7 @@ const QueryErrors = () => {
                 <Json
                     data={{
                         isLoading: product.isLoading,
-                        error: toLoggable(product.error),
+                        error: product.error,
                         data: product.data
                     }}
                 />