Merge pull request #302 from onflow/as/debounce

Debounce mutations and fix inconsistent updates

Author: alse

package-lock.json

@@ -27,7 +27,9 @@
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
+    "apollo-link-debounce": "^2.1.0",
     "apollo-link-http": "^1.5.17",
+    "apollo-link-serialize": "^2.1.0",
     "detect-browser": "^5.1.1",
     "easymde": "^2.15.0",
     "file-saver": "^2.0.5",

package.json

@@ -1,19 +1,23 @@
+import { InMemoryCache } from 'apollo-cache-inmemory';
 import { ApolloClient } from 'apollo-client';
 import { ApolloLink } from 'apollo-link';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import DebounceLink from 'apollo-link-debounce';
 import { HttpLink } from 'apollo-link-http';
+import SerializingLink from 'apollo-link-serialize';
 import fetch from 'isomorphic-fetch';
-import localResolvers from './resolvers';
-
 import { ResultType } from './generated/graphql';
+import localResolvers from './resolvers';
 
 const PLAYGROUND_API = process.env.PLAYGROUND_API;
+const DEFAULT_DEBOUNCE_TIMEOUT = 1200; // Debounce time in ms
 
 const cache = new InMemoryCache();
 
 const client = new ApolloClient({
   cache: cache,
   link: ApolloLink.from([
+    new DebounceLink(DEFAULT_DEBOUNCE_TIMEOUT),
+    new SerializingLink(),
     new HttpLink({
       uri: PLAYGROUND_API + '/query',
       credentials: 'include',

src/api/apollo/client.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 
 export const CREATE_PROJECT = gql`
   mutation CreateProject(

src/api/apollo/mutations.ts

@@ -16,7 +16,6 @@ import {
 } from 'providers/Project/projectDefault';
 import { Account, Project } from 'api/apollo/generated/graphql';
 
-import debounce from 'util/debounce';
 import Mixpanel from 'util/mixpanel';
 
 import { default as FlowButton } from 'components/Button';
@@ -249,7 +248,6 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
     }
   }, [project]);
 
-  const onEditorChange = debounce(active.onChange);
   const updateProject = (
     title: string,
     description: string,
@@ -258,7 +256,7 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
     project.title = title;
     project.description = description;
     project.readme = readme;
-    onEditorChange(title, description, readme);
+    active.onChange(title, description, readme)
   };
 
   const isReadmeEditor = active.type === 4;

src/containers/Editor/components.tsx

@@ -18,12 +18,8 @@ export enum EntityType {
 export type ActiveEditor = {
   type: EntityType;
   index: number;
-  onChange: (
-    code: string,
-    title: string,
-    description: string,
-    readme: string,
-  ) => void;
+  // TODO: Type onChange functions for each EntityType
+  onChange: any;
 };
 
 export interface ProjectContextValue {

src/providers/Project/index.tsx

@@ -2,22 +2,22 @@ import { navigate } from '@reach/router';
 
 import ApolloClient from 'apollo-client';
 
+import { Account, Project } from 'api/apollo/generated/graphql';
 import {
   CREATE_PROJECT,
-  SAVE_PROJECT,
-  SET_ACTIVE_PROJECT,
-  UPDATE_ACCOUNT_DRAFT_CODE,
-  UPDATE_ACCOUNT_DEPLOYED_CODE,
-  UPDATE_TRANSACTION_TEMPLATE,
-  CREATE_TRANSACTION_EXECUTION,
-  CREATE_TRANSACTION_TEMPLATE,
   CREATE_SCRIPT_EXECUTION,
-  UPDATE_SCRIPT_TEMPLATE,
   CREATE_SCRIPT_TEMPLATE,
+  CREATE_TRANSACTION_EXECUTION,
+  CREATE_TRANSACTION_TEMPLATE,
   DELETE_SCRIPT_TEMPLATE,
   DELETE_TRANSACTION_TEMPLATE,
+  SAVE_PROJECT,
+  SET_ACTIVE_PROJECT,
+  UPDATE_ACCOUNT_DEPLOYED_CODE,
+  UPDATE_ACCOUNT_DRAFT_CODE,
+  UPDATE_SCRIPT_TEMPLATE,
+  UPDATE_TRANSACTION_TEMPLATE,
 } from 'api/apollo/mutations';
-import { Project, Account } from 'api/apollo/generated/graphql';
 import { GET_LOCAL_PROJECT, GET_PROJECT } from 'api/apollo/queries';
 
 import Mixpanel from 'util/mixpanel';
@@ -41,7 +41,7 @@ export default class ProjectMutator {
     isLocal: boolean,
     title: string,
     description: string,
-    readme: string
+    readme: string,
   ) {
     this.client = client;
     this.projectId = projectId;
@@ -83,7 +83,6 @@ export default class ProjectMutator {
         scriptTemplates: scriptTemplates,
       },
     });
-    
 
     const project = data.project;
 
@@ -103,22 +102,43 @@ export default class ProjectMutator {
     return project;
   }
 
-  async saveProject(isFork: boolean, title: string, description: string, readme: string) {
+  async saveProject(
+    isFork: boolean,
+    title: string,
+    description: string,
+    readme: string,
+  ) {
     if (this.isLocal) {
       await this.createProject();
       unregisterOnCloseSaveMessage();
     }
 
+    const key = ['SAVE_PROJECT', this.projectId];
+
+    this.client.writeData({
+      id: `Project:${this.projectId}`,
+      data: {
+        title,
+        description,
+        readme,
+        persist: true,
+      },
+    });
+
     await this.client.mutate({
       mutation: SAVE_PROJECT,
       variables: {
         projectId: this.projectId,
-        title: title,
-        description: description,
-        readme: readme
+        title,
+        description,
+        readme,
+      },
+      context: {
+        debounceKey: key,
+        serializationKey: key,
       },
     });
-    
+
     if (isFork) {
       Mixpanel.track('Project forked', { projectId: this.projectId });
     } else {
@@ -129,26 +149,33 @@ export default class ProjectMutator {
   }
 
   async updateAccountDraftCode(account: Account, code: string) {
+    this.client.writeData({
+      id: `Account:${account.id}`,
+      data: {
+        __typename: 'Account',
+        draftCode: code,
+      },
+    });
+
     if (this.isLocal) {
-      this.client.writeData({
-        id: `Account:${account.id}`,
-        data: {
-          __typename: 'Account',
-          draftCode: code,
-        },
-      });
       registerOnCloseSaveMessage();
-
       return;
     }
 
+    const key = ['UPDATE_ACCOUNT_DRAFT_CODE', this.projectId, account.id];
+
     await this.client.mutate({
       mutation: UPDATE_ACCOUNT_DRAFT_CODE,
       variables: {
         projectId: this.projectId,
         accountId: account.id,
         code,
       },
+      context: {
+        debounceKey: key,
+        serializationKey: key,
+      },
+      fetchPolicy: 'no-cache',
     });
   }
 
@@ -184,29 +211,34 @@ export default class ProjectMutator {
     script: string,
     title: string,
   ) {
+    this.client.writeData({
+      id: `TransactionTemplate:${templateId}`,
+      data: {
+        script,
+        title,
+      },
+    });
+
     if (this.isLocal) {
-      this.client.writeData({
-        id: `TransactionTemplate:${templateId}`,
-        data: {
-          script: script,
-          title: title,
-        },
-      });
       registerOnCloseSaveMessage();
       return;
     }
 
+    const key = ['UPDATE_TRANSACTION_TEMPLATE', this.projectId, templateId];
+
     await this.client.mutate({
       mutation: UPDATE_TRANSACTION_TEMPLATE,
       variables: {
         projectId: this.projectId,
         templateId: templateId,
-        script: script,
-        title: title,
+        script,
+        title,
       },
-      refetchQueries: [
-        { query: GET_PROJECT, variables: { projectId: this.projectId } },
-      ],
+      context: {
+        debounceKey: key,
+        serializationKey: key,
+      },
+      fetchPolicy: 'no-cache',
     });
   }
 
@@ -274,18 +306,21 @@ export default class ProjectMutator {
     script: string,
     title: string,
   ) {
+    this.client.writeData({
+      id: `ScriptTemplate:${templateId}`,
+      data: {
+        script: script,
+        title: title,
+      },
+    });
+
     if (this.isLocal) {
-      this.client.writeData({
-        id: `ScriptTemplate:${templateId}`,
-        data: {
-          script: script,
-          title: title,
-        },
-      });
       registerOnCloseSaveMessage();
       return;
     }
 
+    const key = ['UPDATE_SCRIPT_TEMPLATE', this.projectId, templateId];
+
     await this.client.mutate({
       mutation: UPDATE_SCRIPT_TEMPLATE,
       variables: {
@@ -294,9 +329,11 @@ export default class ProjectMutator {
         script: script,
         title: title,
       },
-      refetchQueries: [
-        { query: GET_PROJECT, variables: { projectId: this.projectId } },
-      ],
+      context: {
+        debounceKey: key,
+        serializationKey: key,
+      },
+      fetchPolicy: 'no-cache',
     });
   }