fix(error-handling): Better error handling

Author: timsuchanek

package.json

@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "main": "dist/src/index.js",
   "typings": "./dist/src/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/graphcool/http-link-dataloader.git"
   },
-  "keywords": ["graphql", "request", "fetch", "graphql-client", "apollo"],
+  "keywords": [
+    "graphql",
+    "request",
+    "fetch",
+    "graphql-client",
+    "apollo"
+  ],
   "author": "Tim Suchanek <tim.suchanek@gmail.com>",
   "license": "MIT",
   "bugs": {
@@ -27,6 +35,7 @@
     "ava": "^0.25.0",
     "fetch-mock": "^6.0.0",
     "tslint": "^5.9.1",
+    "tslint-config-prettier": "^1.7.0",
     "tslint-config-standard": "^7.0.0",
     "typescript": "^2.7.1"
   },

src/BatchedGraphQLClient.ts

@@ -1,8 +1,10 @@
-import { ClientError, Options, Variables } from './types'
+import {
+  Options,
+  Variables,
+} from './types'
 import 'cross-fetch/polyfill'
 import * as DataLoader from 'dataloader'
-
-export { ClientError } from './types'
+import { ClientError } from './ClientError'
 
 export class BatchedGraphQLClient {
   public uri: string
@@ -42,32 +44,33 @@ export class BatchedGraphQLClient {
       body,
     })
 
-    const results = await getResults(response)!
+    const results = await getResults(response)
 
-    const allResultsHaveData =
-      results.filter(r => r.data).length === results.length
+    if (Array.isArray(results)) {
+      const allResultsHaveData =
+        results.filter(r => r.data).length === results.length
 
-    if (response.ok && !results.find(r => r.errors) && allResultsHaveData) {
-      return results.map(r => r.data)
+      if (response.ok && !results.find(r => r.errors) && allResultsHaveData) {
+        return results.map(r => r.data)
+      } else {
+        const errorIndex = results.findIndex(r => r.errors)
+        const result = results[errorIndex]
+        const errorResult =
+          typeof result === 'string' ? { error: result } : result
+        throw new ClientError({ ...errorResult, status: response.status })
+      }
     } else {
-      const errorIndex = results.findIndex(r => r.errors)
-      const result = results[errorIndex]
-      const { query, variables } = requests[errorIndex]
-      const errorResult =
-        typeof result === 'string' ? { error: result } : result
-      throw new ClientError(
-        { ...errorResult, status: response.status },
-        { query, variables },
-      )
+      // if it is not an array, there must be an error
+      throw new ClientError({ ...results, status: response.status })
     }
   }
 }
 
-async function getResults(response: Response): Promise<any> {
+function getResults(response: Response): Promise<any> {
   const contentType = response.headers.get('Content-Type')
   if (contentType && contentType.startsWith('application/json')) {
-    return await response.json()
+    return response.json()
   } else {
-    return await response.text()
+    return response.text()
   }
 }

src/ClientError.ts

@@ -0,0 +1,28 @@
+import { GraphQLResponse, GraphQLRequestContext } from './types'
+
+export class ClientError extends Error {
+  result: GraphQLResponse
+  request: GraphQLRequestContext
+
+  constructor(result: GraphQLResponse) {
+    const message = ClientError.extractMessage(result)
+
+    super(message)
+
+    this.result = result
+
+    // this is needed as Safari doesn't support .captureStackTrace
+    /* tslint:disable-next-line */
+    if (typeof Error.captureStackTrace === 'function') {
+      Error.captureStackTrace(this, ClientError)
+    }
+  }
+
+  private static extractMessage(response: GraphQLResponse): string {
+    try {
+      return response.errors![0].message
+    } catch (e) {
+      return `GraphQL Error (Code: ${response.status})`
+    }
+  }
+}

src/HTTPLinkDataloader.ts

@@ -1,7 +1,7 @@
 import { ApolloLink, Observable, Operation } from 'apollo-link'
 import { print } from 'graphql'
 import { BatchedGraphQLClient } from './index'
-import { Options, HttpOptions } from './types'
+import { HttpOptions } from './types'
 
 export class HTTPLinkDataloader extends ApolloLink {
   constructor(options: HttpOptions) {

src/types.ts

@@ -13,7 +13,7 @@ export interface Options {
 }
 
 export type HttpOptions = Options & {
-  uri: string
+  uri: string,
 }
 
 export interface GraphQLError {
@@ -33,34 +33,3 @@ export interface GraphQLRequestContext {
   query: string
   variables?: Variables
 }
-
-export class ClientError extends Error {
-  response: GraphQLResponse
-  request: GraphQLRequestContext
-
-  constructor(response: GraphQLResponse, request: GraphQLRequestContext) {
-    const message = `${ClientError.extractMessage(response)}: ${JSON.stringify({
-      response,
-      request,
-    })}`
-
-    super(message)
-
-    this.response = response
-    this.request = request
-
-    // this is needed as Safari doesn't support .captureStackTrace
-    /* tslint:disable-next-line */
-    if (typeof Error.captureStackTrace === 'function') {
-      Error.captureStackTrace(this, ClientError)
-    }
-  }
-
-  private static extractMessage(response: GraphQLResponse): string {
-    try {
-      return response.errors![0].message
-    } catch (e) {
-      return `GraphQL Error (Code: ${response.status})`
-    }
-  }
-}

tests/index.test.ts

@@ -1,25 +1,31 @@
 import test from 'ava'
 import * as fetchMock from 'fetch-mock'
-import { BatchedGraphQLClient, ClientError } from '../src/index'
+import { BatchedGraphQLClient } from '../src/index'
 import { Options } from '../src/types'
 
-test('extra fetch options', async (t) => {
+test('extra fetch options', async t => {
   const options: Options = {
     credentials: 'include',
     mode: 'cors',
     cache: 'reload',
   }
 
-  const client = new BatchedGraphQLClient('https://mock-api.com/graphql', options)
-  await mock({
-    body: [{ data: {test: 'test'} }]
-  }, async () => {
-    await client.request('{ test }')
-    const actualOptions = fetchMock.lastCall()[1]
-    for (let name in options) {
-      t.deepEqual(actualOptions[name], options[name])
-    }
-  })
+  const client = new BatchedGraphQLClient(
+    'https://mock-api.com/graphql',
+    options,
+  )
+  await mock(
+    {
+      body: [{ data: { test: 'test' } }],
+    },
+    async () => {
+      await client.request('{ test }')
+      const actualOptions = fetchMock.lastCall()[1]
+      for (let name in options) {
+        t.deepEqual(actualOptions[name], options[name])
+      }
+    },
+  )
 })
 
 async function mock(response: any, testFn: () => Promise<void>) {

tslint.json

@@ -1,13 +1,6 @@
 {
-  "extends": ["tslint-config-standard"],
+  "extends": ["tslint-config-standard", "tslint-config-prettier"],
   "rules": {
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "always",
-        "singleline": "never"
-      }
-    ],
     "no-use-before-declare": false
   }
 }

yarn.lock

@@ -2838,6 +2838,10 @@ tslib@^1.8.0, tslib@^1.8.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
 
+tslint-config-prettier@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.7.0.tgz#1588f794c6863ba31420e8b1d14ae91326063815"
+
 tslint-config-standard@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/tslint-config-standard/-/tslint-config-standard-7.0.0.tgz#47bbf25578ed2212456f892d51e1abe884a29f15"