feat: use a debounceKey and call dispose() on debounced mutations

+ fix/remove outdated @types dependencies

app/components/PageRedirectHandler.tsx

@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {useRouter} from 'next/router';
 import {fetchQuery, graphql} from 'relay-runtime';
 import LoadingSpinner from 'components/LoadingSpinner';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {CiipPageComponent} from 'next-env';
 import {getUserGroupLandingRoute} from 'lib/user-groups';
 import {PageRedirectHandlerQuery} from '__generated__/PageRedirectHandlerQuery.graphql';

app/containers/Organisations/Organisations.tsx

@@ -9,7 +9,7 @@ import {
   Card
 } from 'react-bootstrap';
 import {Organisations_query} from 'Organisations_query.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import LoadingSpinner from 'components/LoadingSpinner';
 import Organisation from './Organisation';
 import UserOrganisation from './UserOrganisation';

app/lib/relay-environment/debounce-mutations.ts

@@ -3,31 +3,32 @@ import {
   RelayNetworkLayerRequest,
   RelayNetworkLayerResponse
 } from 'react-relay-network-modern/node8';
+import {CacheConfigWithDebounce} from 'next-env';
 
-const debouncedMutationNameTimeoutIds = new Map<string, number>();
+const debouncedMutationsTimeoutIds = new Map<string, number>();
 
 const debounceMutationMiddleware = (timeout = 1000): Middleware => {
   return (next) => async (req) => {
     if (!(req instanceof RelayNetworkLayerRequest) || !req.isMutation()) {
       return next(req);
     }
 
-    if (!req.cacheConfig?.debounce) {
+    const {debounceKey} = (req.cacheConfig as CacheConfigWithDebounce) || {};
+    if (!debounceKey) {
       return next(req);
     }
 
     const debounced = async () => {
       return new Promise<RelayNetworkLayerResponse>((resolve) => {
-        const {name} = req.operation;
-        const timerId = debouncedMutationNameTimeoutIds.get(name);
+        const timerId = debouncedMutationsTimeoutIds.get(debounceKey);
         if (timerId) {
           window.clearTimeout(timerId);
         }
 
-        debouncedMutationNameTimeoutIds.set(
-          name,
+        debouncedMutationsTimeoutIds.set(
+          debounceKey,
           window.setTimeout(() => {
-            debouncedMutationNameTimeoutIds.delete(name);
+            debouncedMutationsTimeoutIds.delete(debounceKey);
             resolve(next(req));
           }, timeout)
         );

app/mutations/BaseMutation.ts

@@ -2,15 +2,21 @@ import {
   commitMutation as commitMutationDefault,
   GraphQLTaggedNode
 } from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
-import {DeclarativeMutationConfig} from 'relay-runtime';
+import {
+  DeclarativeMutationConfig,
+  Disposable,
+  MutationParameters
+} from 'relay-runtime';
 import {toast} from 'react-toastify';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
+import {MutationConfigWithDebounce} from 'next-env';
 
-interface BaseMutationType {
-  response: any;
+interface BaseMutationType extends MutationParameters {
   variables: {input: any; messages?: {success: string; failure: string}};
 }
 
+const debouncedMutationMap = new Map<string, Disposable>();
+
 export default class BaseMutation<T extends BaseMutationType = never> {
   counter: number;
   mutationName: string;
@@ -27,7 +33,7 @@ export default class BaseMutation<T extends BaseMutationType = never> {
     variables: T['variables'],
     optimisticResponse?: any,
     updater?: (...args: any[]) => any,
-    shouldDebounceMutation = false
+    debounceKey?: string
   ) {
     const success_message = variables.messages?.success
       ? variables.messages.success
@@ -47,11 +53,25 @@ export default class BaseMutation<T extends BaseMutationType = never> {
       }
     ) {
       return new Promise<T['response']>((resolve, reject) => {
-        commitMutationDefault<T>(environment, {
+        // Debounced mutations should be commited immediately to perform the optimisticUpdate
+        // The actual request will be cancelled in the network layer
+        // Here we either dispose of a debounced mutation, or remove it from the map when it errors/completes
+        if (debounceKey) {
+          const previousMutation = debouncedMutationMap.get(debounceKey);
+          if (previousMutation) {
+            previousMutation.dispose();
+          }
+        }
+
+        const disposable = commitMutationDefault<T>(environment, {
           ...options,
           configs,
-          cacheConfig: {debounce: shouldDebounceMutation},
+          cacheConfig: {debounceKey},
           onError: (error) => {
+            if (debounceKey) {
+              debouncedMutationMap.delete(debounceKey);
+            }
+
             reject(error);
             if (failure_message) {
               toast(failure_message, {
@@ -64,6 +84,10 @@ export default class BaseMutation<T extends BaseMutationType = never> {
             }
           },
           onCompleted: (response, errors) => {
+            if (debounceKey) {
+              debouncedMutationMap.delete(debounceKey);
+            }
+
             errors ? reject(errors) : resolve(response);
             if (success_message) {
               toast(success_message, {
@@ -73,7 +97,10 @@ export default class BaseMutation<T extends BaseMutationType = never> {
               });
             }
           }
-        });
+        } as MutationConfigWithDebounce<T>);
+        if (debounceKey) {
+          debouncedMutationMap.set(debounceKey, disposable);
+        }
       });
     }
 

app/mutations/application/createApplicationMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createApplicationMutationVariables,
   createApplicationMutation as createApplicationMutationType

app/mutations/application/createApplicationRevisionMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createApplicationRevisionMutation as createApplicationRevisionMutationType,
   createApplicationRevisionMutationVariables

app/mutations/application/createApplicationRevisionStatusMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createApplicationRevisionStatusMutationVariables,
   createApplicationRevisionStatusMutation as createApplicationRevisionStatusMutationType

app/mutations/application/createFormResultStatusMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createFormResultStatusMutationVariables,
   createFormResultStatusMutation as createFormResultStatusMutationType

app/mutations/application/createReviewCommentMutation.ts

@@ -1,5 +1,5 @@
 import {graphql, DeclarativeMutationConfig} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createReviewCommentMutationVariables,
   createReviewCommentMutation as createReviewCommentMutationType

app/mutations/application/deleteReviewCommentMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateReviewCommentMutationVariables,
   updateReviewCommentMutation as updateReviewCommentMutationType

app/mutations/application/updateApplicationMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateApplicationMutationVariables,
   updateApplicationMutation as updateApplicationMutationType

app/mutations/application/updateApplicationRevisionMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateApplicationRevisionMutationVariables,
   updateApplicationRevisionMutation as updateApplicationRevisionMutationType

app/mutations/application/updateReviewCommentMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateReviewCommentMutationVariables,
   updateReviewCommentMutation as updateReviewCommentMutationType

app/mutations/benchmark/createBenchmarkMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createBenchmarkMutation as createBenchmarkMutationType,
   createBenchmarkMutationVariables

app/mutations/benchmark/updateBenchmarkMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateBenchmarkMutation as updateBenchmarkMutationType,
   updateBenchmarkMutationVariables

app/mutations/facility/createFacilityMutation.ts

@@ -3,7 +3,7 @@ import {
   createFacilityMutation as createFacilityMutationType,
   createFacilityMutationVariables
 } from 'createFacilityMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/form/createCertificationUrl.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   createCertificationUrlMutation as createCertificationUrlMutationType,
   createCertificationUrlMutationVariables

app/mutations/form/updateCertificationUrlMutation.ts

@@ -3,7 +3,7 @@ import {
   updateCertificationUrlMutation as updateCertificationUrlMutationType,
   updateCertificationUrlMutationVariables
 } from 'updateCertificationUrlMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/form/updateFormResultMutation.ts

@@ -3,8 +3,8 @@ import {
   updateFormResultMutation as updateFormResultMutationType,
   updateFormResultMutationVariables
 } from 'updateFormResultMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 
 const mutation = graphql`
   mutation updateFormResultMutation($input: UpdateFormResultInput!) {
@@ -37,7 +37,9 @@ const updateFormResultMutation = async (
     environment,
     mutation,
     variables,
-    optimisticResponse
+    optimisticResponse,
+    null,
+    `update-form-result${variables.input.id}`
   );
 };
 

app/mutations/linked_product/createLinkedProductMutation.ts

@@ -3,7 +3,7 @@ import {
   createLinkedProductMutation as createLinkedProductMutationType,
   createLinkedProductMutationVariables
 } from 'createLinkedProductMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/linked_product/updateLinkedProductMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateLinkedProductMutation as updateLinkedProductMutationType,
   updateLinkedProductMutationVariables

app/mutations/organisation/createOrganisationMutation.tsx

@@ -3,7 +3,7 @@ import {
   createOrganisationMutation as createOrganisationMutationType,
   createOrganisationMutationVariables
 } from 'createOrganisationMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/product/createProductMutation.ts

@@ -3,7 +3,7 @@ import {
   createProductMutation as createProductMutationType,
   createProductMutationVariables
 } from 'createProductMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/product/updateProductMutation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateProductMutation as updateProductMutationType,
   updateProductMutationVariables

app/mutations/reporting_year/createReportingYearMutation.ts

@@ -3,7 +3,7 @@ import {
   createReportingYearMutation as createReportingYearMutationType,
   createReportingYearMutationVariables
 } from 'createReportingYearMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/reporting_year/updateReportingYearMutation.ts

@@ -3,7 +3,7 @@ import {
   updateReportingYearMutation as updateReportingYearMutationType,
   updateReportingYearMutationVariables
 } from '__generated__/updateReportingYearMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/user/createUserMutation.ts

@@ -3,7 +3,7 @@ import {
   createUserMutation as createUserMutationType,
   createUserMutationVariables
 } from '__generated__/createUserMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/user/updateUserMutation.ts

@@ -2,9 +2,9 @@ import {graphql} from 'react-relay';
 import {
   updateUserMutation as updateUserMutationType,
   updateUserMutationVariables
-} from '__generated__/updateUserMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+} from 'updateUserMutation.graphql';
 import BaseMutation from 'mutations/BaseMutation';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 
 const mutationQuery = graphql`
   mutation updateUserMutation($input: UpdateCiipUserInput!) {
@@ -45,7 +45,7 @@ const updateUserMutation = async (
     variables,
     updateUserPayload,
     null,
-    true
+    `update-ciip-user${variables.input.id}`
   );
 };
 

app/mutations/user_organisation/createUserOrganisation.ts

@@ -3,7 +3,7 @@ import {
   createUserOrganisationMutation as createUserOrganisationMutationType,
   createUserOrganisationMutationVariables
 } from 'createUserOrganisationMutation.graphql';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import BaseMutation from 'mutations/BaseMutation';
 
 const mutation = graphql`

app/mutations/user_organisation/updateUserOrganisation.ts

@@ -1,5 +1,5 @@
 import {graphql} from 'react-relay';
-import {RelayModernEnvironment} from 'relay-runtime/lib/store/RelayModernEnvironment';
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
 import {
   updateUserOrganisationMutation as updateUserOrganisationMutationType,
   updateUserOrganisationMutationVariables

app/next-env.d.ts

@@ -1,11 +1,12 @@
 import {NextComponentType, NextPageContext} from 'next';
-import {GraphQLTaggedNode} from 'relay-runtime';
+import {GraphQLTaggedNode, MutationConfig} from 'relay-runtime';
 import {NextRouter} from 'next/router';
 import {ComponentClass} from 'react';
 import {
   FormProps as OriginalFromProps,
   ErrorSchema
 } from 'react-jsonschema-form';
+import {CacheConfig} from 'react-relay-network-modern/node8';
 
 interface CiipPageInitialProps {
   pageProps: {
@@ -62,3 +63,11 @@ declare module 'react-jsonschema-form/lib/utils' {
 declare module 'react-jsonschema-form/lib/validate' {
   export function toErrorList(errorSchema: ErrorSchema): any[];
 }
+
+export interface CacheConfigWithDebounce extends CacheConfig {
+  debounceKey?: string;
+}
+
+export interface MutationConfigWithDebounce<T> extends MutationConfig<T> {
+  cacheConfig?: CacheConfigWithDebounce;
+}