Lock file maintenance

Revert "Update dependency vue to v3"

.github/workflows/build.yml

@@ -10,37 +10,35 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           always-auth: true
           registry-url: https://registry.npmjs.org
       - id: cache_npm
         name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ~/.npm
             ./node_modules.tar.zstd
-          key: ${{ runner.OS }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.OS }}-node16.x-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.OS }}-npm-
-            ${{ runner.OS }}-
+            ${{ runner.OS }}-node16.x-
       - name: Install dependencies with NPM
         if: steps.cache_npm.outputs.cache-hit != 'true'
         run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
       - name: Archive node_modules
         if: steps.cache_npm.outputs.cache-hit != 'true'
         run: tar --use-compress-program "zstd -T0 --long=31 -1" -cf node_modules.tar.zstd -P node_modules
       - name: Persisting node_modules artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: node_modules.tar.zstd
           path: node_modules.tar.zstd
+          retention-days: 2
 
   #
   # lint job
@@ -51,32 +49,32 @@ jobs:
 
     steps:
       # Setup
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
-          token: ${{ secrets.MADSCI_BUILD_USER_TOKEN }} # allows commit of any fixes to trigger a new workflow run
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v2
+          token: ${{ secrets.BUILD_USER_TOKEN || github.token }} # allows commit of any fixes to trigger a new workflow run
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           always-auth: true
           registry-url: https://registry.npmjs.org
       - name: Restore node_modules artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: node_modules.tar.zstd
       - name: Unarchive node_modules
         run: tar --use-compress-program "zstd -d --long=31" -xf node_modules.tar.zstd
       # Lint
       - name: Run linters
-        uses: wearerequired/lint-action@v1
+        uses: wearerequired/lint-action@v2
         with:
           prettier: true
           eslint: true
           eslint_args: "--ext '.ts,.js' --ignore-path '.gitignore' --ignore-pattern '.github/*'"
           continue_on_error: false
-          auto_fix: true
-          git_name: Madbot
-          git_email: 64821814+madsci-bot@users.noreply.github.com
+          auto_fix: ${{ secrets.BUILD_USER_TOKEN && 'true' || 'false' }}
+          git_name: equabot
+          git_email: git@equalogic.com
 
   #
   # build job
@@ -87,15 +85,15 @@ jobs:
 
     steps:
       # Setup
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           always-auth: true
           registry-url: https://registry.npmjs.org
       - name: Restore node_modules artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: node_modules.tar.zstd
       - name: Unarchive node_modules
@@ -123,9 +121,15 @@ jobs:
 
     steps:
       # Setup
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          always-auth: true
+          registry-url: https://registry.npmjs.org
       - name: Restore node_modules artifact
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: node_modules.tar.zstd
       - name: Unarchive node_modules
@@ -135,9 +139,3 @@ jobs:
         run: node_modules/.bin/dotenv -e .env.ci -- npm run test:ci
         env:
           CI: true
-      - if: always()
-        name: Persisting test-results.html artifact
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results.html
-          path: test/.results/test-results.html

.github/workflows/cleanup.yml

@@ -1,18 +0,0 @@
-name: Cleanup
-
-on:
-  schedule:
-    - cron: '0 1 * * *' # every day at 1am
-
-jobs:
-  remove-old-artifacts:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Remove old artifacts
-        uses: c-hive/gha-remove-artifacts@v1
-        with:
-          age: '1 days'    # delete artifacts older than this
-          skip-tags: false # don't treat artifacts created by runs on tagged commits any differently
-          skip-recent: 2   # keep the last 2 runs, regardless of age

.github/workflows/publish.yml

@@ -3,6 +3,7 @@ name: Publish
 on:
   release:
     types: [created]
+  workflow_dispatch:
 
 jobs:
   #
@@ -12,30 +13,27 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           always-auth: true
           registry-url: https://registry.npmjs.org
       # Dependencies
       - id: cache_npm
         name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ~/.npm
             ./node_modules.tar.zstd
-          key: ${{ runner.OS }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.OS }}-node16.x-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.OS }}-npm-
-            ${{ runner.OS }}-
+            ${{ runner.OS }}-node16.x-
       - name: Install dependencies with NPM
         if: steps.cache_npm.outputs.cache-hit != 'true'
         run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
       - name: Unarchive node_modules
         if: steps.cache_npm.outputs.cache-hit == 'true'
         run: tar --use-compress-program "zstd -d --long=31" -xf node_modules.tar.zstd
@@ -56,6 +54,6 @@ jobs:
       - name: Copy extra files into dist directory
         run: cp package.json README* dist/
       - name: Publish release to NPM registry
-        run: npm publish dist
+        run: npm publish dist/
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.nvmrc

@@ -1 +1 @@
-14.17.6
+16.16.0

package.json

@@ -1,15 +1,15 @@
 {
   "name": "vue-apollo-smart-ops",
-  "version": "0.1.0-alpha.4",
+  "version": "0.2.0-beta.1",
   "description": "Create TypeScript-typed operation functions for your Vue Apollo queries and mutations.",
-  "author": "Madscience Ltd",
+  "author": "Equalogic Ltd",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/madscience/vue-apollo-smart-ops.git"
+    "url": "https://github.com/equalogic/vue-apollo-smart-ops.git"
   },
   "scripts": {
     "prebuild": "rimraf dist && npm run barrels:generate",
@@ -36,41 +36,39 @@
   "peerDependencies": {
     "apollo-client": ">=2.6",
     "apollo-link": ">=1.2",
-    "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0",
+    "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
     "vue": ">=2.6",
     "vue-apollo": ">=3"
   },
   "devDependencies": {
-    "@types/jest": "27.0.1",
-    "@types/lodash.isplainobject": "4.0.6",
-    "@types/lodash.mapvalues": "4.6.6",
-    "@typescript-eslint/eslint-plugin": "4.30.0",
-    "@typescript-eslint/parser": "4.30.0",
-    "@vue/test-utils": "1.2.2",
+    "@types/jest": "27.5.2",
+    "@types/lodash.isplainobject": "4.0.7",
+    "@types/lodash.mapvalues": "4.6.7",
+    "@typescript-eslint/eslint-plugin": "5.30.5",
+    "@typescript-eslint/parser": "5.30.5",
+    "@vue/test-utils": "1.3.0",
     "apollo-client": "2.6.10",
     "apollo-link": "1.2.14",
-    "barrelsby": "2.2.0",
-    "dotenv-cli": "4.0.0",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.24.2",
-    "eslint-plugin-jest": "24.4.0",
+    "barrelsby": "2.3.4",
+    "dotenv-cli": "6.0.0",
+    "eslint": "8.19.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "26.5.3",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "5.1.0",
-    "eslint-plugin-vue": "7.17.0",
-    "graphql": "15.5.2",
-    "graphql-tag": "2.12.5",
-    "husky": "7.0.2",
-    "jest": "27.1.0",
-    "lint-staged": "11.1.2",
+    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-vue": "9.2.0",
+    "graphql": "15.8.0",
+    "graphql-tag": "2.12.6",
+    "jest": "27.5.1",
     "mkdirp": "1.0.4",
-    "np": "7.5.0",
-    "prettier": "2.3.2",
+    "np": "7.6.1",
+    "prettier": "2.7.1",
     "rimraf": "3.0.2",
-    "ts-jest": "27.0.5",
-    "typescript": "4.4.2",
+    "ts-jest": "27.1.5",
+    "typescript": "4.7.4",
     "vue": "2.6.14",
-    "vue-apollo": "3.0.7",
+    "vue-apollo": "3.1.0",
     "vue-class-component": "7.2.6",
     "vue-property-decorator": "9.1.2"
   },
@@ -78,13 +76,5 @@
     "node": ">=12.9.0"
   },
   "main": "index.js",
-  "types": "index.d.ts",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{ts,js}": "eslint --ext .ts,.js --ignore-path .gitignore --fix --cache"
-  }
+  "types": "index.d.ts"
 }

renovate.json

@@ -2,7 +2,7 @@
   "extends": [
     "config:js-lib",
     ":automergeMajor",
-    ":automergePr",
+    ":automergeBranch",
     ":automergeRequireAllStatusChecks",
     ":dependencyDashboard",
     ":semanticCommitsDisabled"
@@ -12,6 +12,7 @@
   "prCreation": "not-pending",
   "stabilityDays": 3,
   "rebaseWhen": "conflicted",
+  "lockFileMaintenance": true,
   "labels": ["dependencies"],
   "reviewers": ["sgarner"],
   "packageRules": [
@@ -22,6 +23,12 @@
     {
       "packagePatterns": ["jest"],
       "groupName": "jest"
+    },
+    {
+      "matchDatasources": ["nvm", "npm"],
+      "matchPackageNames": ["node", "@types/node"],
+      "groupName": "Node.js",
+      "allowedVersions": "^16"
     }
   ]
 }

src/ApolloErrorProcessor.ts

@@ -1,230 +0,0 @@
-import Vue from 'vue';
-import {
-  ApolloError,
-  ApolloErrorType,
-  ApolloOperationContext,
-  GraphQLError,
-  InputValidationError,
-  ProcessedApolloError,
-  ServerError,
-  UnauthorizedError,
-} from './types';
-
-export function isApolloError(error: ApolloError | any): error is ApolloError {
-  return error.graphQLErrors !== undefined;
-}
-
-export function isGraphQLError(error: GraphQLError | any): error is GraphQLError {
-  return error.extensions !== undefined;
-}
-
-export class ApolloErrorProcessor<TApp = Vue, TContext = ApolloOperationContext> {
-  public static FriendlyMessages: Record<string, string> = {
-    FAILED_TO_FETCH:
-      'Unable to communicate with server. The service may be down or you may be offline. Try again in a moment.',
-    INTERNAL_SERVER_ERROR: `A server error has occurred.`,
-  };
-
-  public processedErrors: ProcessedApolloError[];
-
-  protected readonly originalError: Error;
-  protected readonly app: TApp;
-  protected readonly context: TContext;
-
-  public constructor(error: ApolloError, app: TApp, context: TContext) {
-    this.originalError = error;
-    this.app = app;
-    this.context = context;
-
-    this.processedErrors = this.processApolloError(error);
-  }
-
-  public showErrorNotifications(): void {
-    // This is just an example - to do something else (e.g. showing a visible notification to the user), you should
-    // implement your own class that extends ApolloErrorProcessor and replace this showErrorNotifications method.
-    this.processedErrors.forEach(error => {
-      console.error(`${error.type}: ${error.message}`, error.error);
-    });
-  }
-
-  public cleanError(error: ApolloError | GraphQLError | Record<string, any>): Error {
-    if (error instanceof Error) {
-      return error;
-    }
-
-    // the `error` object we have may not be an actual Error instance
-    // create a new one suitable for e.g. capturing to Sentry
-    const cleanError = new Error(error.message);
-
-    if (isGraphQLError(error)) {
-      cleanError.name = 'GraphQLError' + (error.extensions?.code != null ? `[${error.extensions.code}]` : '');
-      cleanError.stack = this.originalError.stack;
-
-      Object.defineProperty(cleanError, 'nodes', { value: error.nodes });
-      Object.defineProperty(cleanError, 'source', { value: error.source });
-      Object.defineProperty(cleanError, 'positions', { value: error.positions });
-      Object.defineProperty(cleanError, 'path', { value: error.path });
-      Object.defineProperty(cleanError, 'extensions', { value: JSON.stringify(error.extensions) });
-      Object.defineProperty(cleanError, 'originalError', { value: this.originalError });
-    } else {
-      Object.keys(error).forEach(key => Object.defineProperty(cleanError, key, { value: error[key] }));
-    }
-
-    return cleanError;
-  }
-
-  protected isUnauthorizedError(error: GraphQLError): boolean {
-    return (
-      error.message === 'Unauthorized' ||
-      error.extensions?.code === 'FORBIDDEN' ||
-      error.extensions?.exception?.status === 401
-    );
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
-  protected onUnauthorizedError(error: UnauthorizedError): void {
-    // extending classes can take action here, e.g. go to log in page
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
-  protected onServerError(error: ServerError): void {
-    // extending classes can take action here, e.g. capture to Sentry
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
-  protected onInputValidationError(error: InputValidationError): void {
-    // extending classes can take action here, e.g. capture to Sentry
-  }
-
-  protected getFriendlyMessage(errorCode: string, errorMessage: string): string;
-  protected getFriendlyMessage(errorCode: string): string | undefined;
-  protected getFriendlyMessage(errorCode: string, errorMessage?: string): string | undefined {
-    return (this.constructor as typeof ApolloErrorProcessor).FriendlyMessages[errorCode] ?? errorMessage;
-  }
-
-  protected processErrorMessage(message: GraphQLError['message']): string {
-    if (typeof message === 'object') {
-      if (message.error != null) {
-        return message.error;
-      }
-
-      return 'Unknown error: ' + JSON.stringify(message);
-    }
-
-    return message;
-  }
-
-  protected normalizeError(error: GraphQLError | Error): Error {
-    if (isGraphQLError(error)) {
-      return {
-        ...error,
-        message: this.processErrorMessage(error.message),
-      };
-    }
-
-    return error;
-  }
-
-  private processApolloError(error: ApolloError): ProcessedApolloError[] {
-    if (error.graphQLErrors != null && error.graphQLErrors.length > 0) {
-      // Successful request but with errors from the resolver
-      return error.graphQLErrors.flatMap(graphQLError => this.processGraphQLError(graphQLError));
-    }
-
-    if (
-      error.networkError != null &&
-      error.networkError.result != null &&
-      error.networkError.result.errors != null &&
-      error.networkError.result.errors.length > 0
-    ) {
-      // Network error that contains GraphQL errors inside it. Can occur when server responds with a non-200 status code
-      return error.networkError.result.errors.flatMap(graphQLError => this.processGraphQLError(graphQLError));
-    }
-
-    if (error.networkError != null) {
-      // Network error, e.g. server is not responding or some other exception occurs
-      return this.processNetworkError(error);
-    }
-
-    // Some other internal server error
-    const processedError: ServerError = {
-      type: ApolloErrorType.SERVER_ERROR,
-      error,
-      message: error.message,
-    };
-
-    this.onServerError(processedError);
-
-    return [processedError];
-  }
-
-  private processGraphQLError(error: GraphQLError): ProcessedApolloError[] {
-    if (this.isUnauthorizedError(error)) {
-      // Unauthorized (not logged in, or not allowed) error
-      const processedError: UnauthorizedError = {
-        type: ApolloErrorType.UNAUTHORIZED_ERROR,
-        error: this.normalizeError(error),
-        message: this.processErrorMessage(error.message),
-        path: error.path,
-      };
-
-      this.onUnauthorizedError(processedError);
-
-      return [processedError];
-    }
-
-    if (error.extensions?.validationErrors != null) {
-      // User input validation error
-      const processedError: InputValidationError = {
-        type: ApolloErrorType.INPUT_VALIDATION_ERROR,
-        error: this.normalizeError(error),
-        message: this.processErrorMessage(error.message),
-        path: error.path,
-        invalidArgs: error.extensions.invalidArgs,
-        violations: error.extensions.validationErrors,
-      };
-
-      this.onInputValidationError(processedError);
-
-      return [processedError];
-    }
-
-    // Other GraphQL resolver error - probably a bug
-    const processedError: ServerError = {
-      type: error.extensions?.code != null ? error.extensions.code : ApolloErrorType.SERVER_ERROR,
-      error: this.normalizeError(error),
-      message: this.getFriendlyMessage('INTERNAL_SERVER_ERROR', this.processErrorMessage(error.message)),
-      path: error.path,
-    };
-
-    this.onServerError(processedError);
-
-    return [processedError];
-  }
-
-  private processNetworkError(error: ApolloError): ProcessedApolloError[] {
-    const errors: ProcessedApolloError[] = [];
-    let message: string;
-
-    if (error.networkError != null && error.networkError.message != null) {
-      message = this.processErrorMessage(error.networkError.message);
-    } else {
-      message = this.processErrorMessage(error.message);
-    }
-
-    switch (message) {
-      case 'Failed to fetch':
-        message = this.getFriendlyMessage('FAILED_TO_FETCH', message);
-        break;
-    }
-
-    errors.push({
-      type: ApolloErrorType.NETWORK_ERROR,
-      error,
-      statusCode: error.networkError != null ? error.networkError.statusCode : undefined,
-      message,
-    });
-
-    return errors;
-  }
-}

src/error/ApolloErrorHandlerResult.ts

@@ -0,0 +1,50 @@
+import {
+  ApolloErrorType,
+  InputValidationError,
+  NetworkError,
+  ProcessedApolloError,
+  ServerError,
+  UnauthorizedError,
+  UserInputError,
+  ValidationRuleViolation,
+} from './types';
+
+export interface ApolloErrorHandlerResultInterface {
+  allErrors: ProcessedApolloError[];
+  validationRuleViolations?: ValidationRuleViolation[];
+}
+
+export class ApolloErrorHandlerResult implements ApolloErrorHandlerResultInterface {
+  public readonly allErrors: ProcessedApolloError[];
+
+  public constructor(
+    public readonly unhandledErrors: ProcessedApolloError[],
+    public readonly handledErrors: ProcessedApolloError[],
+  ) {
+    this.allErrors = [...unhandledErrors, ...handledErrors];
+  }
+
+  public get networkErrors(): NetworkError[] {
+    return this.allErrors.filter((e): e is NetworkError => e.type === ApolloErrorType.NETWORK_ERROR);
+  }
+
+  public get serverErrors(): ServerError[] {
+    return this.allErrors.filter((e): e is ServerError => e.type === ApolloErrorType.SERVER_ERROR);
+  }
+
+  public get unauthorizedErrors(): UnauthorizedError[] {
+    return this.allErrors.filter((e): e is UnauthorizedError => e.type === ApolloErrorType.UNAUTHORIZED_ERROR);
+  }
+
+  public get userInputErrors(): UserInputError[] {
+    return this.allErrors.filter((e): e is UserInputError => e.type === ApolloErrorType.BAD_USER_INPUT);
+  }
+
+  public get inputValidationErrors(): InputValidationError[] {
+    return this.allErrors.filter((e): e is InputValidationError => e.type === ApolloErrorType.INPUT_VALIDATION_ERROR);
+  }
+
+  public get validationRuleViolations(): ValidationRuleViolation[] {
+    return this.inputValidationErrors.flatMap(e => e.violations);
+  }
+}

src/error/handleApolloError.ts

@@ -0,0 +1,34 @@
+import { processApolloError } from './processApolloError';
+import { ApolloOperationContext } from '../types';
+import { Vue } from 'vue/types/vue';
+import { ApolloError, ApolloOperationErrorHandlerFunction } from './types';
+import { ApolloErrorHandlerResult } from './ApolloErrorHandlerResult';
+
+/**
+ * This is a simple example of an error handler function. You can copy this and implement your own in your application.
+ */
+export const handleApolloError: ApolloOperationErrorHandlerFunction<
+  ApolloError,
+  Vue,
+  ApolloOperationContext,
+  ApolloErrorHandlerResult
+> = (error: ApolloError, app: Vue, context?: ApolloOperationContext): ApolloErrorHandlerResult => {
+  const { unhandledErrors, handledErrors } = processApolloError(error, {
+    app,
+    context,
+    // Example of a handler function for a particular type of error:
+    onUnauthorizedError: error => {
+      console.warn('Unauthorized! Logging you out...', error);
+      //logout();
+
+      // Returning true indicates to the processor that we've handled this error
+      return true;
+    },
+  });
+
+  unhandledErrors.forEach(error => {
+    console.error(`${error.type}: ${error.message}`, error.error);
+  });
+
+  return new ApolloErrorHandlerResult(unhandledErrors, handledErrors);
+};

src/error/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './ApolloErrorHandlerResult';
+export * from './handleApolloError';
+export * from './processApolloError';
+export * from './types';

src/error/processApolloError.ts

@@ -0,0 +1,213 @@
+import Vue from 'vue';
+import { ApolloOperationContext } from '../types';
+import {
+  ApolloError,
+  ApolloErrorType,
+  GraphQLError,
+  InputValidationError,
+  NetworkError,
+  ProcessedApolloError,
+  ServerError,
+  UnauthorizedError,
+} from './types';
+
+export function isApolloError(error: ApolloError | any): error is ApolloError {
+  return error.graphQLErrors !== undefined;
+}
+
+export function isGraphQLError(error: GraphQLError | any): error is GraphQLError {
+  return error.extensions !== undefined;
+}
+
+function normalizeErrorMessage(message: GraphQLError['message']): string {
+  if (typeof message === 'object') {
+    if (message.error != null) {
+      return message.error;
+    }
+
+    return 'Unknown error: ' + JSON.stringify(message);
+  }
+
+  return message;
+}
+
+function normalizeError(error: GraphQLError | Error): Error {
+  if (isGraphQLError(error)) {
+    return {
+      ...error,
+      message: normalizeErrorMessage(error.message),
+    };
+  }
+
+  return error;
+}
+
+function translateErrorMessage(messageOrCode: string, translations: Record<string, string>): string {
+  return translations[messageOrCode] ?? messageOrCode;
+}
+
+export interface ApolloErrorProcessorOptions<TApp = Vue, TContext = ApolloOperationContext> {
+  app?: TApp;
+  context?: TContext;
+  isUnauthorizedError?: (error: GraphQLError) => boolean;
+  onUnauthorizedError?: (error: UnauthorizedError) => boolean | void;
+  onInputValidationError?: (error: InputValidationError) => boolean | void;
+  onServerError?: (error: ServerError) => boolean | void;
+  onNetworkError?: (error: NetworkError) => boolean | void;
+  translations?: Record<string, string>;
+}
+
+export const defaultErrorMessageTranslations: Record<string, string> = {
+  FAILED_TO_FETCH:
+    'Unable to communicate with server. The service may be down or you may be offline. Try again in a moment.',
+  INTERNAL_SERVER_ERROR: `A server error has occurred.`,
+};
+
+const defaultProcessorOptions: ApolloErrorProcessorOptions = {
+  isUnauthorizedError: (error: GraphQLError) =>
+    error.message === 'Unauthorized' ||
+    error.extensions?.code === 'FORBIDDEN' ||
+    error.extensions?.exception?.status === 401,
+  translations: defaultErrorMessageTranslations,
+};
+
+export interface ApolloErrorProcessorResult {
+  unhandledErrors: ProcessedApolloError[];
+  handledErrors: ProcessedApolloError[];
+}
+
+function processGraphQLError(
+  error: GraphQLError,
+  options: ApolloErrorProcessorOptions = {},
+): ApolloErrorProcessorResult {
+  options = { ...defaultProcessorOptions, ...options };
+  const { isUnauthorizedError, onUnauthorizedError, onInputValidationError, onServerError, translations } = options;
+
+  if (isUnauthorizedError != null && isUnauthorizedError(error)) {
+    // Unauthorized (not logged in, or not allowed) error
+    const processedError: UnauthorizedError = {
+      type: ApolloErrorType.UNAUTHORIZED_ERROR,
+      error: normalizeError(error),
+      message: normalizeErrorMessage(error.message),
+      path: error.path,
+    };
+
+    if (onUnauthorizedError != null && onUnauthorizedError(processedError)) {
+      return { unhandledErrors: [], handledErrors: [processedError] };
+    }
+
+    return { unhandledErrors: [processedError], handledErrors: [] };
+  }
+
+  if (error.extensions?.validationErrors != null) {
+    // User input validation error
+    const processedError: InputValidationError = {
+      type: ApolloErrorType.INPUT_VALIDATION_ERROR,
+      error: normalizeError(error),
+      message: normalizeErrorMessage(error.message),
+      path: error.path,
+      invalidArgs: error.extensions.invalidArgs,
+      violations: error.extensions.validationErrors,
+    };
+
+    if (onInputValidationError != null && onInputValidationError(processedError)) {
+      return { unhandledErrors: [], handledErrors: [processedError] };
+    }
+
+    return { unhandledErrors: [processedError], handledErrors: [] };
+  }
+
+  // Other GraphQL resolver error - probably a bug
+  const processedError: ServerError = {
+    type: error.extensions?.code != null ? error.extensions.code : ApolloErrorType.SERVER_ERROR,
+    error: normalizeError(error),
+    message: translateErrorMessage('INTERNAL_SERVER_ERROR', translations ?? defaultErrorMessageTranslations),
+    path: error.path,
+  };
+
+  if (onServerError != null && onServerError(processedError)) {
+    return { unhandledErrors: [], handledErrors: [processedError] };
+  }
+
+  return { unhandledErrors: [processedError], handledErrors: [] };
+}
+
+function processNetworkError(
+  error: ApolloError,
+  options: ApolloErrorProcessorOptions = {},
+): ApolloErrorProcessorResult {
+  options = { ...defaultProcessorOptions, ...options };
+  const { onNetworkError, translations } = options;
+
+  let message: string =
+    error.networkError != null && error.networkError.message != null
+      ? normalizeErrorMessage(error.networkError.message)
+      : normalizeErrorMessage(error.message);
+
+  switch (message) {
+    case 'Failed to fetch':
+      message = translateErrorMessage('FAILED_TO_FETCH', translations ?? defaultErrorMessageTranslations);
+      break;
+  }
+
+  const processedError: NetworkError = {
+    type: ApolloErrorType.NETWORK_ERROR,
+    error,
+    statusCode: error.networkError != null ? error.networkError.statusCode : undefined,
+    message,
+  };
+
+  if (onNetworkError != null && onNetworkError(processedError)) {
+    return { unhandledErrors: [], handledErrors: [processedError] };
+  }
+
+  return { unhandledErrors: [processedError], handledErrors: [processedError] };
+}
+
+export function processApolloError(
+  error: ApolloError,
+  options: ApolloErrorProcessorOptions = {},
+): ApolloErrorProcessorResult {
+  options = { ...defaultProcessorOptions, ...options };
+  const { onServerError } = options;
+
+  if (error.graphQLErrors != null && error.graphQLErrors.length > 0) {
+    // Successful request but with errors from the resolver
+    const errorProcessorResults = error.graphQLErrors.map(graphQLError => processGraphQLError(graphQLError, options));
+
+    return {
+      unhandledErrors: errorProcessorResults.flatMap(result => result.unhandledErrors),
+      handledErrors: errorProcessorResults.flatMap(result => result.handledErrors),
+    };
+  }
+
+  if (error.networkError?.result?.errors != null && error.networkError.result.errors.length > 0) {
+    // Network error that contains GraphQL errors inside it. Can occur when server responds with a non-200 status code
+    const errorProcessorResults = error.networkError.result.errors.map(graphQLError =>
+      processGraphQLError(graphQLError, options),
+    );
+
+    return {
+      unhandledErrors: errorProcessorResults.flatMap(result => result.unhandledErrors),
+      handledErrors: errorProcessorResults.flatMap(result => result.handledErrors),
+    };
+  }
+
+  if (error.networkError != null) {
+    // Network error, e.g. server is not responding or some other exception occurs
+    return processNetworkError(error, options);
+  }
+
+  // Some other internal server error
+  const processedError: ServerError = {
+    type: ApolloErrorType.SERVER_ERROR,
+    error,
+    message: error.message,
+  };
+
+  if (onServerError != null && onServerError(processedError)) {
+    return { unhandledErrors: [], handledErrors: [processedError] };
+  }
+
+  return { unhandledErrors: [processedError], handledErrors: [] };
+}

src/error/types.ts

@@ -0,0 +1,87 @@
+import { GraphQLError as BaseGraphQLError } from 'graphql';
+import { ApolloError as BaseApolloError } from 'apollo-client';
+import { Vue } from 'vue/types/vue';
+import { ApolloOperationContext } from '../types';
+import { ApolloErrorHandlerResultInterface } from './ApolloErrorHandlerResult';
+
+export enum ApolloErrorType {
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  SERVER_ERROR = 'SERVER_ERROR',
+  UNAUTHORIZED_ERROR = 'UNAUTHORIZED_ERROR',
+  BAD_USER_INPUT = 'BAD_USER_INPUT',
+  INPUT_VALIDATION_ERROR = 'INPUT_VALIDATION_ERROR',
+}
+
+// Upstream type declares networkError as Error, but it can contain additional properties, we override to add these
+export type ApolloError = BaseApolloError & {
+  networkError: ApolloNetworkError | null;
+  graphQLErrors: GraphQLError[];
+};
+
+export interface ApolloNetworkError extends Error {
+  statusCode?: number;
+  response?: any;
+  result?: {
+    errors: GraphQLError[];
+  };
+}
+
+export type GraphQLError = Omit<BaseGraphQLError, 'message'> & {
+  message: string | Record<string, any>;
+};
+export type ProcessedApolloError =
+  | NetworkError
+  | ServerError
+  | UnauthorizedError
+  | UserInputError
+  | InputValidationError;
+
+export interface NetworkError {
+  type: ApolloErrorType.NETWORK_ERROR;
+  error: Error;
+  message: string;
+  statusCode?: number;
+}
+
+export interface ServerError {
+  type: ApolloErrorType.SERVER_ERROR;
+  error: Error;
+  path?: readonly (string | number)[];
+  message: string;
+}
+
+export interface UnauthorizedError {
+  type: ApolloErrorType.UNAUTHORIZED_ERROR;
+  error: Error;
+  path?: readonly (string | number)[];
+  message: string;
+}
+
+export interface UserInputError {
+  type: ApolloErrorType.BAD_USER_INPUT;
+  error: Error;
+  path?: readonly (string | number)[];
+  message: string;
+}
+
+export interface InputValidationError {
+  type: ApolloErrorType.INPUT_VALIDATION_ERROR;
+  error: Error;
+  path?: readonly (string | number)[];
+  message: string;
+  invalidArgs: string[];
+  violations: ValidationRuleViolation[];
+}
+
+export interface ValidationRuleViolation {
+  path: string[];
+  message: string;
+  value?: any;
+}
+
+export type ApolloOperationErrorHandlerFunction<
+  TError = BaseApolloError,
+  TApp extends Vue = Vue,
+  TContext = ApolloOperationContext,
+  TResult = ApolloErrorHandlerResultInterface,
+> = (error: TError, app: TApp, context?: TContext) => TResult;

src/handleApolloError.ts

@@ -1,25 +0,0 @@
-import { ApolloErrorProcessor } from './ApolloErrorProcessor';
-import {
-  ApolloError,
-  ApolloErrorHandlerResult,
-  ApolloOperationContext,
-  ApolloOperationErrorHandlerFunction,
-} from './types';
-import { Vue } from 'vue/types/vue';
-
-/**
- * This is a simple example of an error handler function. You can copy this and implement your own in your application.
- */
-export const handleApolloError: ApolloOperationErrorHandlerFunction<ApolloError, Vue> = (
-  error: ApolloError,
-  app: Vue,
-  context?: ApolloOperationContext,
-): ApolloErrorHandlerResult => {
-  const processor = new ApolloErrorProcessor(error, app, context ?? {});
-
-  processor.showErrorNotifications();
-
-  return {
-    processedErrors: processor.processedErrors,
-  };
-};

src/index.ts

@@ -2,10 +2,9 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './ApolloErrorProcessor';
-export * from './handleApolloError';
 export * from './mutation';
 export * from './query';
 export * from './subscription';
 export * from './types';
 export * from './decorator/index';
+export * from './error/index';

src/mutation.ts

@@ -6,13 +6,13 @@ import { FetchPolicy, MutationBaseOptions } from 'apollo-client/core/watchQueryO
 import { Vue } from 'vue/types/vue';
 import mapValues from 'lodash.mapvalues';
 import isPlainObject from 'lodash.isplainobject';
+import { ApolloOperationContext } from './types';
 import {
-  ApolloErrorHandlerResult,
-  ApolloOperationContext,
+  ApolloErrorHandlerResultInterface,
   ApolloOperationErrorHandlerFunction,
   ProcessedApolloError,
   ValidationRuleViolation,
-} from './types';
+} from './error';
 
 export type ApolloComponentMutationFunction<R = any, TVariables = OperationVariables> = (
   options: MutationBaseOptions<R, TVariables> &
@@ -33,18 +33,17 @@ export type ApolloMutationClient<TResult, TVariables extends OperationVariables>
 // Mutation function with typings
 export type MutationOperationFunction<TResult, TVariables extends OperationVariables, TError = ApolloError> = (
   app: VueAppWithApollo,
-  params: Omit<MutationOperationParams<TVariables, TError>, 'mutation'>,
+  params: Omit<MutationOperationParams<TResult, TVariables, TError>, 'mutation'>,
   client?: ApolloMutationClient<TResult, TVariables>,
 ) => Promise<MutationResult<TResult>>;
 
 // Parameters given to a MutationOperationFunction
 export interface MutationOperationParams<
+  TResult,
   TVariables extends OperationVariables,
   TError = ApolloError,
   TContext = ApolloOperationContext,
-> {
-  mutation: DocumentNode;
-  variables: TVariables;
+> extends MutationOptions<TResult, TVariables> {
   context?: TContext;
   onError?: ApolloOperationErrorHandlerFunction<TError>;
 }
@@ -86,10 +85,10 @@ export async function mutateWithErrorHandling<
   TApp extends VueAppWithApollo = VueAppWithApollo,
 >(
   app: TApp,
-  { mutation, variables, onError, context }: MutationOperationParams<TVariables, TError>,
+  params: MutationOperationParams<TResult, TVariables, TError>,
   client?: ApolloMutationClient<TResult, TVariables>,
 ): Promise<MutationResult<TResult>> {
-  const mutate =
+  const mutate: ApolloClientMutationFunction | ApolloComponentMutationFunction =
     client === undefined
       ? app.$apollo.mutate.bind(app.$apollo)
       : typeof client === 'function'
@@ -98,8 +97,8 @@ export async function mutateWithErrorHandling<
 
   try {
     const result = await mutate({
-      mutation,
-      variables: cleanInput(variables),
+      ...params,
+      variables: params.variables != null ? cleanInput(params.variables) : undefined,
     });
 
     if (result == null) {
@@ -108,12 +107,13 @@ export async function mutateWithErrorHandling<
 
     return { success: true, data: result.data };
   } catch (error) {
-    const errorHandlerResult: ApolloErrorHandlerResult | undefined =
+    const { onError, context } = params;
+    const errorHandlerResult: ApolloErrorHandlerResultInterface | undefined =
       onError != null ? onError(error, app, context) : undefined;
 
     return {
       success: false,
-      errors: errorHandlerResult?.processedErrors,
+      errors: errorHandlerResult?.allErrors,
       validationRuleViolations: errorHandlerResult?.validationRuleViolations,
     };
   }
@@ -130,16 +130,15 @@ export function createMutationFunction<
 ): MutationOperationFunction<TResult, TVariables, TError> {
   return (
     app: TApp,
-    params: Omit<MutationOperationParams<TVariables, TError>, 'mutation'>,
+    params: Omit<MutationOperationParams<TResult, TVariables, TError>, 'mutation'>,
     client?: ApolloMutationClient<TResult, TVariables>,
   ): Promise<MutationResult<TResult>> => {
     return mutateWithErrorHandling(
       app,
       {
         mutation,
-        variables: params.variables,
-        onError: params.onError ?? onError,
-        context: params.context,
+        onError,
+        ...params,
       },
       client,
     );

src/query.ts

@@ -1,33 +1,9 @@
 import { ApolloError, OperationVariables } from 'apollo-client';
 import { DocumentNode } from 'graphql';
-import { ErrorHandler, VueApolloQueryDefinition, VueApolloSubscribeToMoreOptions } from 'vue-apollo/types/options';
+import { ErrorHandler, VueApolloQueryDefinition } from 'vue-apollo/types/options';
 import { Vue } from 'vue/types/vue';
-import { ApolloOperationErrorHandlerFunction } from './types';
-
-type OverrideThis<F, T> = F extends (...args: infer A) => infer B ? (this: T, ...args: A) => B : F;
-
-type OverrideAllThis<O, T> = {
-  [key in keyof O]: OverrideThis<O[key], T>;
-};
-
-type SubscribeToMoreOptionsPatched<TComponent, TResult, TVariables> = OverrideAllThis<
-  Omit<VueApolloSubscribeToMoreOptions<TResult, TVariables>, 'updateQuery' | 'variables'>,
-  TComponent
-> & {
-  variables?: (this: TComponent) => any;
-  updateQuery?: UpdateQueryFn<TComponent, TResult, any, any>; // TODO: How should we pass subscript data & variables types?
-};
-
-type UpdateQueryFn<TComponent = any, TResult = any, TSubscriptionVariables = any, TSubscriptionData = any> = (
-  this: TComponent,
-  previousQueryResult: TResult,
-  options: {
-    subscriptionData: {
-      data: TSubscriptionData;
-    };
-    variables?: TSubscriptionVariables;
-  },
-) => TResult;
+import { ApolloOperationErrorHandlerFunction } from './error';
+import { OverrideAllThis, SubscribeToMoreOptionsPatched } from './types';
 
 export interface VueApolloQueryDefinitionPatched<TComponent extends Vue = Vue, TResult = any, TVariables = any>
   extends OverrideAllThis<

src/subscription.ts

@@ -2,7 +2,7 @@ import { ErrorHandler, VueApolloSubscriptionDefinition } from 'vue-apollo/types/
 import { ApolloError, OperationVariables } from 'apollo-client';
 import { DocumentNode } from 'graphql';
 import { Vue } from 'vue/types/vue';
-import { ApolloOperationErrorHandlerFunction } from './types';
+import { ApolloOperationErrorHandlerFunction } from './error';
 
 export type VueApolloSmartSubscriptionErrorHandler<
   TResult = any,

src/types.ts

@@ -1,92 +1,28 @@
-import { ApolloError as BaseApolloError } from 'apollo-client';
-import { Vue } from 'vue/types/vue';
-import { GraphQLError as BaseGraphQLError } from 'graphql';
+import { VueApolloSubscribeToMoreOptions } from 'vue-apollo/types/options';
+
+type OverrideThis<F, T> = F extends (...args: infer A) => infer B ? (this: T, ...args: A) => B : F;
+
+export type OverrideAllThis<O, T> = {
+  [key in keyof O]: OverrideThis<O[key], T>;
+};
+
+export type SubscribeToMoreOptionsPatched<TComponent, TResult, TVariables> = OverrideAllThis<
+  Omit<VueApolloSubscribeToMoreOptions<TResult, TVariables>, 'updateQuery' | 'variables'>,
+  TComponent
+> & {
+  variables?: (this: TComponent) => any;
+  updateQuery?: UpdateQueryFn<TComponent, TResult, any, any>; // TODO: How should we pass subscript data & variables types?
+};
+
+type UpdateQueryFn<TComponent = any, TResult = any, TSubscriptionVariables = any, TSubscriptionData = any> = (
+  this: TComponent,
+  previousQueryResult: TResult,
+  options: {
+    subscriptionData: {
+      data: TSubscriptionData;
+    };
+    variables?: TSubscriptionVariables;
+  },
+) => TResult;
 
 export type ApolloOperationContext<TAttrs = Record<string, any>> = TAttrs;
-
-export enum ApolloErrorType {
-  NETWORK_ERROR = 'NETWORK_ERROR',
-  SERVER_ERROR = 'SERVER_ERROR',
-  UNAUTHORIZED_ERROR = 'UNAUTHORIZED_ERROR',
-  BAD_USER_INPUT = 'BAD_USER_INPUT',
-  INPUT_VALIDATION_ERROR = 'INPUT_VALIDATION_ERROR',
-}
-
-// Upstream type declares networkError as Error, but it can contain additional properties, we override to add these
-export type ApolloError = BaseApolloError & {
-  networkError: ApolloNetworkError | null;
-  graphQLErrors: GraphQLError[];
-};
-
-export interface ApolloNetworkError extends Error {
-  statusCode?: number;
-  response?: any;
-  result?: {
-    errors: GraphQLError[];
-  };
-}
-
-export type GraphQLError = Omit<BaseGraphQLError, 'message'> & {
-  message: string | Record<string, any>;
-};
-
-export type ProcessedApolloError =
-  | NetworkError
-  | ServerError
-  | UnauthorizedError
-  | UserInputError
-  | InputValidationError;
-
-export interface NetworkError {
-  type: ApolloErrorType.NETWORK_ERROR;
-  error: Error;
-  message: string;
-  statusCode?: number;
-}
-
-export interface ServerError {
-  type: ApolloErrorType.SERVER_ERROR;
-  error: Error;
-  path?: readonly (string | number)[];
-  message: string;
-}
-
-export interface UnauthorizedError {
-  type: ApolloErrorType.UNAUTHORIZED_ERROR;
-  error: Error;
-  path?: readonly (string | number)[];
-  message: string;
-}
-
-export interface UserInputError {
-  type: ApolloErrorType.BAD_USER_INPUT;
-  error: Error;
-  path?: readonly (string | number)[];
-  message: string;
-}
-
-export interface InputValidationError {
-  type: ApolloErrorType.INPUT_VALIDATION_ERROR;
-  error: Error;
-  path?: readonly (string | number)[];
-  message: string;
-  invalidArgs: string[];
-  violations: ValidationRuleViolation[];
-}
-
-export interface ValidationRuleViolation {
-  path: string[];
-  message: string;
-  value?: any;
-}
-
-export interface ApolloErrorHandlerResult {
-  processedErrors: ProcessedApolloError[];
-  validationRuleViolations?: ValidationRuleViolation[];
-}
-
-export type ApolloOperationErrorHandlerFunction<
-  TError = BaseApolloError,
-  TApp extends Vue = Vue,
-  TContext = ApolloOperationContext,
-> = (error: TError, app: TApp, context?: TContext) => ApolloErrorHandlerResult;