initial commit

Signed-off-by: sirugh <rugh@adobe.com>

Author: sirugh

README.md

@@ -0,0 +1,45 @@
+# apollo-link-mutation-queue
+
+An Apollo link that enqueues mutations so that they do not fire in parallel.
+
+## Why
+
+I was finding that mutations affecting the same underlying data would often
+return incorrect data if fired in parallel. Instead of blocking UI based on the
+loading state of the mutations I wrote a link that just enqueues mutations.
+
+## Use
+
+Compose your link chain with the link.
+
+```js
+import MutationQueueLink from "apollo-link-mutation-queue";
+
+const link = ApolloLink.from([
+  new MutationQueueLink()
+  //... your other links
+]);
+```
+
+Debug with `debug: true`.
+
+```js
+import MutationQueueLink from "apollo-link-mutation-queue";
+
+const link = ApolloLink.from([
+  new MutationQueueLink({ debug: true })
+  //... your other links
+]);
+```
+
+Cut in line with `skipQueue: true`.
+
+```js
+const [mutate] = useMutation(MY_MUTATION);
+
+useEffect(() => {
+  mutate({
+    context: { skipQueue: true }
+  });
+}, []);
+```

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "apollo-link-mutation-queue",
+  "version": "0.0.1",
+  "description": "An apollo link that queues mutations.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "apollo",
+    "link",
+    "mutation",
+    "queue"
+  ],
+  "author": "Stephen Rugh",
+  "license": "ISC"
+}

src/index.js

@@ -0,0 +1,84 @@
+import { ApolloLink, Observable } from "apollo-link";
+
+const toRequestKey = operation => {
+  return operation.operationName;
+};
+
+/**
+ * An Apollo link that enqueues mutations so that they cannot fire in parallel.
+ *
+ * To skip the queue pass `{ context: { skipQueue: true } }` to your mutation.
+ */
+export default class MutationQueueLink extends ApolloLink {
+  /**
+   * @param {Boolean} props.debug - set to true to enable logging
+   */
+  constructor({ debug = true } = {}) {
+    super();
+    this.opQueue = [];
+    this.inProcess = false;
+    this.debug = debug;
+  }
+
+  log(message, ...rest) {
+    if (this.debug) {
+      console.log(message, ...rest);
+    }
+  }
+
+  processOperation(entry) {
+    const { operation, forward, observer } = entry;
+    this.inProcess = true;
+    this.log("[PROCESSING] -", toRequestKey(operation));
+    forward(operation).subscribe({
+      next: result => {
+        this.inProcess = false;
+        observer.next(result);
+        this.log("[NEXT] -", toRequestKey(operation));
+        // If there are more operations, process them.
+        if (this.opQueue.length) {
+          this.processOperation(this.opQueue.shift());
+        }
+      },
+      error: error => {
+        this.inProcess = false;
+        observer.error(error);
+        this.log("[ERROR] -", toRequestKey(operation), error);
+        // If there are more operations, process them.
+        if (this.opQueue.length) {
+          this.processOperation(this.opQueue.shift());
+        }
+      },
+      complete: observer.complete.bind(observer)
+    });
+  }
+
+  request(operation, forward) {
+    // Enqueue all mutations unless manually skipped.
+    if (
+      operation.toKey().includes('"operation":"mutation"') &&
+      !operation.getContext().skipQueue
+    ) {
+      return new Observable(observer => {
+        const operationEntry = { operation, forward, observer };
+        if (!this.inProcess) {
+          this.processOperation(operationEntry);
+        } else {
+          this.log("[ENQUEUE] -", toRequestKey(operation));
+          this.opQueue.push(operationEntry);
+        }
+        return () => this.cancelOperation(operationEntry);
+      });
+    } else {
+      return forward(operation);
+    }
+  }
+
+  cancelOperation(entry) {
+    this.opQueue = this.opQueue.filter(e => e !== entry);
+  }
+
+  enqueue(entry) {
+    this.opQueue.push(entry);
+  }
+}