0.0.4

fix: set client from $apollo correctly in mutateWithErrorHandling

.nvmrc

@@ -1 +1 @@
-14.16.0
+14.17.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-apollo-smart-ops",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Create TypeScript-typed operation functions for your Vue Apollo queries and mutations.",
   "author": "Madscience Ltd",
   "license": "MIT",
@@ -37,36 +37,36 @@
     "vue-apollo": ">=3"
   },
   "devDependencies": {
-    "@types/jest": "26.0.22",
+    "@types/jest": "26.0.24",
     "@types/lodash.isplainobject": "4.0.6",
     "@types/lodash.mapvalues": "4.6.6",
-    "@typescript-eslint/eslint-plugin": "4.21.0",
-    "@typescript-eslint/parser": "4.21.0",
-    "@vue/test-utils": "1.1.3",
+    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@typescript-eslint/parser": "4.28.5",
+    "@vue/test-utils": "1.2.2",
     "apollo-client": "2.6.10",
     "apollo-link": "1.2.14",
     "barrelsby": "2.2.0",
     "dotenv-cli": "4.0.0",
-    "eslint": "7.23.0",
+    "eslint": "7.31.0",
     "eslint-config-prettier": "7.2.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.3.4",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-promise": "4.3.1",
-    "eslint-plugin-vue": "7.8.0",
-    "graphql": "15.5.0",
-    "husky": "6.0.0",
-    "jest": "26.6.3",
-    "jest-html-reporters": "2.1.3",
-    "lint-staged": "10.5.4",
+    "eslint-plugin-vue": "7.14.0",
+    "graphql": "15.5.1",
+    "husky": "7.0.1",
+    "jest": "27.0.6",
+    "jest-html-reporters": "2.1.6",
+    "lint-staged": "11.1.1",
     "mkdirp": "1.0.4",
-    "np": "7.4.0",
+    "np": "7.5.0",
     "prettier": "2.2.1",
     "rimraf": "3.0.2",
-    "ts-jest": "26.5.4",
-    "typescript": "4.2.3",
-    "vue": "2.6.12",
+    "ts-jest": "27.0.4",
+    "typescript": "4.2.4",
+    "vue": "2.6.14",
     "vue-apollo": "3.0.7",
     "vue-jest": "3.0.7"
   },

src/ApolloErrorProcessor.ts

@@ -18,7 +18,7 @@ export function isGraphQLError(error: GraphQLError | any): error is GraphQLError
   return error.extensions !== undefined;
 }
 
-export abstract class AbstractApolloErrorProcessor<TApp = Vue, TContext = ApolloOperationContext> {
+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.',
@@ -39,7 +39,13 @@ export abstract class AbstractApolloErrorProcessor<TApp = Vue, TContext = Apollo
     this.processedErrors = this.processApolloError(error);
   }
 
-  public abstract showErrorNotifications(): void;
+  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) {
@@ -93,7 +99,7 @@ export abstract class AbstractApolloErrorProcessor<TApp = Vue, TContext = Apollo
   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 AbstractApolloErrorProcessor).FriendlyMessages[errorCode] ?? errorMessage;
+    return (this.constructor as typeof ApolloErrorProcessor).FriendlyMessages[errorCode] ?? errorMessage;
   }
 
   private processApolloError(error: ApolloError): ProcessedApolloError[] {

src/handleApolloError.ts

@@ -0,0 +1,25 @@
+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,7 +2,8 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './AbstractApolloErrorProcessor';
+export * from './ApolloErrorProcessor';
+export * from './handleApolloError';
 export * from './mutation';
 export * from './query';
 export * from './subscription';

src/mutation.ts

@@ -90,7 +90,11 @@ export async function mutateWithErrorHandling<
   client?: ApolloMutationClient<TResult, TVariables>,
 ): Promise<MutationResult<TResult>> {
   const mutate =
-    client === undefined ? app.$apollo : typeof client === 'function' ? client : client.mutate.bind(client);
+    client === undefined
+      ? app.$apollo.mutate.bind(app.$apollo)
+      : typeof client === 'function'
+      ? client
+      : client.mutate.bind(client);
 
   try {
     const result = await mutate({