[next] Relay GraphQL Batching (#1965)

* feat: added graphqlBatch

* refactor: cleanup of json serial

* refactor: cleanup of json serilization

* feat: use react network layer

* fix: adjusted broken user

* fix: temporarily disable cache for profile query

* test: temporarily use precompiled modules

* fix: bug when updating comment count on an asset

* fix: compile modules to commonjs for jest

* test: add react-relay-network-layer to transform whitelist

* fix: use react-relay-network-layer/es

* types: add react-relay-network-modern typescript types

* feat: integrate custom error middleware

* review: add todo

src/core/client/stream/mutations/CreateCommentMutation.ts

@@ -24,17 +24,19 @@ function sharedUpdater(
   store: RecordSourceSelectorProxy,
   input: CreateCommentInput
 ) {
+  updateAsset(store, input);
   if (input.local) {
     localUpdate(store, input);
   } else {
     update(store, input);
   }
+  updateProfile(store, input);
 }
 
-/**
- * update integrates new comment into the CommentConnection.
- */
-function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) {
+function updateAsset(
+  store: RecordSourceSelectorProxy,
+  input: CreateCommentInput
+) {
   // Updating Comment Count
   const asset = store.get(input.assetID);
   if (asset) {
@@ -45,7 +47,12 @@ function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) {
       record.setValue(currentCount + 1, "totalVisible");
     }
   }
+}
 
+/**
+ * update integrates new comment into the CommentConnection.
+ */
+function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) {
   // Get the payload returned from the server.
   const payload = store.getRootField("createComment")!;
 
@@ -109,6 +116,26 @@ function localUpdate(
   }
 }
 
+/**
+ * updateProfile integrates new comment into the profile.
+ */
+function updateProfile(
+  store: RecordSourceSelectorProxy,
+  input: CreateCommentInput
+) {
+  // Get the payload returned from the server.
+  const payload = store.getRootField("createComment")!;
+
+  // Get the edge of the newly created comment.
+  const newEdge = payload.getLinkedRecord("edge")!;
+  const newComment = newEdge.getLinkedRecord("node");
+
+  // TODO: update profile comments connection after we
+  // integrated pagination.
+  // tslint:disable-next-line:no-unused-expression
+  newComment;
+}
+
 const mutation = graphql`
   mutation CreateCommentMutation($input: CreateCommentInput!) {
     createComment(input: $input) {

src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx

@@ -64,6 +64,10 @@ const ProfileQuery: StatelessComponent<InnerProps> = ({
       assetID,
       assetURL,
     }}
+    cacheConfig={{
+      // TODO: enable caching after mutations are adapted.
+      force: true,
+    }}
     render={render}
   />
 );

src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap

@@ -1003,7 +1003,7 @@ exports[`post a reply: optimistic response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨1⁩ ⁨Comment⁩
+        ⁨2⁩ ⁨Comments⁩
       </button>
     </li>
     <li
@@ -2072,7 +2072,7 @@ exports[`post a reply: server response 1`] = `
         role="tab"
         type="button"
       >
-        ⁨1⁩ ⁨Comment⁩
+        ⁨2⁩ ⁨Comments⁩
       </button>
     </li>
     <li