feat: better error messages for Request is already pending on API callers

Author: ascott18

playground/Coalesce.Web.Vue3/src/components/test.vue

@@ -10,6 +10,8 @@
       >
       </c-select>
 
+      <v-btn @click="caseVm.$load()">Load</v-btn>
+      <v-btn @click="caseVm.downloadImage()">Load</v-btn>
       <v-card class="my-2">
         <v-row>
           <v-col>
@@ -62,7 +64,7 @@
           :min="new Date(1722627824331)"
           :max="new Date(1725034169880)"
           :allowedDates="(v: Date) => v.getDay() > 0 && v.getDay() < 6"
-          step="10"
+          :step="10"
           v-model="date"
           clearable
         />

src/coalesce-vue/src/api-client.ts

@@ -1307,7 +1307,7 @@ abstract class ApiStateBase<TArgs extends any[], TResult> {
   /** Invokes a call to this API endpoint. */
   public readonly invoke!: this;
 
-  protected readonly apiClient!: ApiClient<any>;
+  protected readonly apiClient!: ApiClient<ApiRoutedType>;
   protected readonly invoker!: ApiCallerInvoker<
     TArgs,
     ApiResultPromise<TResult> | undefined | void,
@@ -1460,6 +1460,10 @@ export abstract class ApiState<
     return this;
   }
 
+  /** The name of this caller to be used in debugging/error messages.
+   * @internal */
+  _name?: string;
+
   protected _simultaneousGetCaching = false;
 
   /** Enable simultaneous request caching for the API caller,
@@ -1591,7 +1595,7 @@ export abstract class ApiState<
       switch (this._concurrencyMode) {
         case "disallow":
           throw Error(
-            `Request is already pending for invoker ${this.invoker.toString()}`,
+            `Request is already pending for API Caller ${this.$metadata ? `/${this.apiClient.$metadata.controllerRoute}/${this.$metadata.name}` : (this._name ?? this.invoker.toString())}`,
           );
 
         case "cancel":

src/coalesce-vue/src/viewmodel.ts

@@ -433,6 +433,7 @@ export abstract class ViewModel<
           this.$loadFromModel(result, startTime, true);
         }
       });
+    $load._name = `/${this.$metadata.controllerRoute}/get`;
 
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
@@ -555,6 +556,7 @@ export abstract class ViewModel<
           this.updateRelatedForeignKeysWithCurrentPrimaryKey();
         }
       });
+    $save._name = `/${this.$metadata.controllerRoute}/save`;
 
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
@@ -636,6 +638,8 @@ export abstract class ViewModel<
       },
     );
 
+    $bulkSave._name = `/${this.$metadata.controllerRoute}/bulkSave`;
+
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
     Object.defineProperty(this, "$bulkSave", { value: $bulkSave });
@@ -1007,6 +1011,8 @@ export abstract class ViewModel<
         this._removeFromParentCollection();
       });
 
+    $delete._name = `/${this.$metadata.controllerRoute}/delete`;
+
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
     Object.defineProperty(this, "$delete", { value: $delete });
@@ -1743,6 +1749,8 @@ export abstract class ListViewModel<
         }
       });
 
+    $load._name = `/${this.$metadata.controllerRoute}/list`;
+
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
     Object.defineProperty(this, "$load", { value: $load });
@@ -1758,6 +1766,8 @@ export abstract class ListViewModel<
       c.count(this.$params),
     );
 
+    $count._name = `/${this.$metadata.controllerRoute}/count`;
+
     // Lazy getter technique - don't create the caller until/unless it is needed,
     // since creation of api callers is a little expensive.
     Object.defineProperty(this, "$count", { value: $count });