fix all the multipart streams (#269)

* fix all the multipart streams

* npm i & bump bundle watch

* changeset

.changeset/popular-rules-sin.md

@@ -0,0 +1,7 @@
+---
+"@apollo/explorer": patch
+"@apollo/sandbox": patch
+"@apollo/explorer-helpers": patch
+---
+
+We were out of protocol for HTTP Multipart Subscriptions. I was using an older version of the draft protocol. This should update to use the real HTTP Multipart Subscription protocol: https://www.apollographql.com/docs/router/executing-operations/subscription-multipart-protocol/.

package.json

@@ -44,11 +44,11 @@
     "files": [
       {
         "path": "packages/sandbox/dist/**/*.js",
-        "maxSize": "40kb"
+        "maxSize": "41kb"
       },
       {
         "path": "packages/explorer/dist/**/*.js",
-        "maxSize": "40kb"
+        "maxSize": "41kb"
       }
     ],
     "ci": {

packages/explorer-helpers/src/readMultipartWebStream.ts

@@ -71,7 +71,23 @@ export function readMultipartWebStream(response: Response, mimeType: MIMEType) {
               buffer = buffer.slice(boundaryIndex + messageBoundary.length);
 
               if (message.trim()) {
-                const messageStartIndex = message.indexOf('\r\n\r\n');
+                const newLineSequence = '\r\n\r\n';
+                let messageStartIndex: number | undefined;
+                // if there are two instances of newLineSequence, this is a response with multiple parts
+                // and the first part is a heartbeat: https://www.apollographql.com/docs/router/executing-operations/subscription-multipart-protocol/
+                if (
+                  message.lastIndexOf(newLineSequence) !==
+                  message.indexOf(newLineSequence)
+                ) {
+                  const heartbeatStartIndex =
+                    message.indexOf(newLineSequence) + newLineSequence.length;
+                  messageStartIndex =
+                    message
+                      .substring(heartbeatStartIndex)
+                      .indexOf(newLineSequence) + heartbeatStartIndex;
+                } else {
+                  messageStartIndex = message.indexOf(newLineSequence);
+                }
 
                 const chunkHeaders = Object.fromEntries(
                   message

packages/explorer/src/helpers/readMultipartWebStream.ts

@@ -71,7 +71,23 @@ export function readMultipartWebStream(response: Response, mimeType: MIMEType) {
               buffer = buffer.slice(boundaryIndex + messageBoundary.length);
 
               if (message.trim()) {
-                const messageStartIndex = message.indexOf('\r\n\r\n');
+                const newLineSequence = '\r\n\r\n';
+                let messageStartIndex: number | undefined;
+                // if there are two instances of newLineSequence, this is a response with multiple parts
+                // and the first part is a heartbeat: https://www.apollographql.com/docs/router/executing-operations/subscription-multipart-protocol/
+                if (
+                  message.lastIndexOf(newLineSequence) !==
+                  message.indexOf(newLineSequence)
+                ) {
+                  const heartbeatStartIndex =
+                    message.indexOf(newLineSequence) + newLineSequence.length;
+                  messageStartIndex =
+                    message
+                      .substring(heartbeatStartIndex)
+                      .indexOf(newLineSequence) + heartbeatStartIndex;
+                } else {
+                  messageStartIndex = message.indexOf(newLineSequence);
+                }
 
                 const chunkHeaders = Object.fromEntries(
                   message

packages/sandbox/src/helpers/readMultipartWebStream.ts

@@ -71,7 +71,23 @@ export function readMultipartWebStream(response: Response, mimeType: MIMEType) {
               buffer = buffer.slice(boundaryIndex + messageBoundary.length);
 
               if (message.trim()) {
-                const messageStartIndex = message.indexOf('\r\n\r\n');
+                const newLineSequence = '\r\n\r\n';
+                let messageStartIndex: number | undefined;
+                // if there are two instances of newLineSequence, this is a response with multiple parts
+                // and the first part is a heartbeat: https://www.apollographql.com/docs/router/executing-operations/subscription-multipart-protocol/
+                if (
+                  message.lastIndexOf(newLineSequence) !==
+                  message.indexOf(newLineSequence)
+                ) {
+                  const heartbeatStartIndex =
+                    message.indexOf(newLineSequence) + newLineSequence.length;
+                  messageStartIndex =
+                    message
+                      .substring(heartbeatStartIndex)
+                      .indexOf(newLineSequence) + heartbeatStartIndex;
+                } else {
+                  messageStartIndex = message.indexOf(newLineSequence);
+                }
 
                 const chunkHeaders = Object.fromEntries(
                   message