cancel old graphql requests when new ones are run

packages/frontend/app/components/reports/subject.js

@@ -11,6 +11,7 @@ export default class ReportsSubjectComponent extends Component {
   @tracked myReportEditorOn = false;
 
   get reportDescriptionPromise() {
+    console.log('ReportsSubjectComponent promise');
     return this.reporting.buildReportDescription(
       this.args.report.subject,
       this.args.report.prepositionalObject,

packages/frontend/app/components/reports/subject/learning-material.js

@@ -10,6 +10,9 @@ export default class ReportsSubjectLearningMaterialComponent extends Component {
   @service graphql;
   @service intl;
 
+  controller = new AbortController();
+  signal = this.controller.signal;
+
   @cached
   get data() {
     return new TrackedAsyncData(
@@ -58,7 +61,19 @@ export default class ReportsSubjectLearningMaterialComponent extends Component {
       prepositionalObjectTableRowId,
       school,
     );
-    const result = await this.graphql.find('learningMaterials', filters, 'id, title');
+
+    if (this.graphql.findTask.isRunning) {
+      this.controller.abort('running query canceled so new one could run');
+    }
+    this.controller = new AbortController();
+    this.signal = this.controller.signal;
+
+    const result = await this.graphql.findTask.perform(
+      'learningMaterials',
+      filters,
+      'id, title',
+      this.signal,
+    );
     return result.data.learningMaterials.map(({ title }) => title);
   }
 

packages/frontend/app/services/graphql.js

@@ -1,4 +1,5 @@
 import Service, { service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 export default class GraphqlService extends Service {
   @service session;
@@ -36,7 +37,48 @@ export default class GraphqlService extends Service {
   }
 
   async find(endpoint, filters, attributes) {
+    console.log('GraphqlService find');
     const filterString = filters.length ? '(' + filters.join(', ') + ')' : '';
-    return this.#query(`query { ${endpoint}${filterString} { ${attributes} } }`);
+    const result = this.#query(`query { ${endpoint}${filterString} { ${attributes} } }`);
+    console.log('GraphqlService find completed', result);
+    return result;
   }
+
+  findTask = task(async (endpoint, filters, attributes, signal) => {
+    console.log('GraphqlService findTask');
+    const filterString = filters.length ? '(' + filters.join(', ') + ')' : '';
+    const url = `${this.host}/api/graphql`;
+    const headers = this.authHeaders;
+    headers['Content-Type'] = 'application/json';
+    headers['Accept'] = 'application/json';
+    const q = `query { ${endpoint}${filterString} { ${attributes} } }`;
+
+    let response = null;
+    try {
+      response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ query: q }),
+        signal,
+      });
+
+      return response.json();
+    } catch (e) {
+      if (signal.aborted) {
+        if (signal.reason) {
+          console.log(`graphql canceled with reason: ${signal.reason}`);
+        } else {
+          console.warn('graphql canceled but no reason was given.');
+        }
+      } else {
+        console.error('graphql failed due to unknown error', e);
+      }
+
+      return {
+        error: 'bad stuff',
+      };
+    } finally {
+      console.log('Graphql findTask completed', response);
+    }
+  });
 }

packages/frontend/app/services/reporting.js

@@ -60,6 +60,7 @@ export default class ReportingService extends Service {
     prepositionalObjectTableRowId,
     school,
   ) {
+    console.log('ReportingService buildReportDescription', subject);
     try {
       const props = await this.getDescriptiveProperties(
         subject,