Add subscription support for embedded sandbox

package.json

@@ -80,5 +80,9 @@
     "size-limit": "5.0.5",
     "tslib": "2.3.1",
     "typescript": "3.9.10"
+  },
+  "dependencies": {
+    "graphql-ws": "^5.9.0",
+    "subscriptions-transport-ws": "^0.11.0"
   }
 }

packages/explorer/src/helpers/postMessageRelayHelpers.ts

@@ -1,4 +1,8 @@
-import type { GraphQLError, IntrospectionQuery } from 'graphql';
+import type {
+  ExecutionResult,
+  GraphQLError,
+  IntrospectionQuery,
+} from 'graphql';
 import {
   PARTIAL_AUTHENTICATION_TOKEN_RESPONSE,
   EMBEDDABLE_SANDBOX_URL,
@@ -10,8 +14,9 @@ import {
   EXPLORER_LISTENING_FOR_PARTIAL_TOKEN,
   PARENT_LOGOUT_SUCCESS,
   TRIGGER_LOGOUT_IN_PARENT,
+  EXPLORER_SUBSCRIPTION_RESPONSE,
 } from './constants';
-import type { JSONValue } from './types';
+import type { JSONObject, JSONValue } from './types';
 
 export type HandleRequest = (
   endpointUrl: string,
@@ -46,11 +51,13 @@ export function sendPostMessageToEmbed({
   embeddedIFrameElement?.contentWindow?.postMessage(message, embedUrl);
 }
 
-type Error = {
+type ResponseError = {
   message: string;
   stack?: string;
 };
 
+export type SocketStatus = 'disconnected' | 'connecting' | 'connected';
+
 export type OutgoingEmbedMessage =
   | {
       name: typeof SCHEMA_ERROR;
@@ -77,12 +84,21 @@ export type OutgoingEmbedMessage =
       operationId: string;
       response: {
         data?: JSONValue;
-        error?: Error;
-        errors?: [Error];
+        error?: ResponseError;
+        errors?: [ResponseError];
         status?: number;
         headers?: Headers;
       };
     }
+  | {
+      name: typeof EXPLORER_SUBSCRIPTION_RESPONSE;
+      operationId: string;
+      response: {
+        data?: ExecutionResult<JSONObject>;
+        error?: Error;
+        errors?: [Error];
+      };
+    }
   | {
       name: typeof PARENT_LOGOUT_SUCCESS;
     };
@@ -103,6 +119,16 @@ export type IncomingEmbedMessage = MessageEvent;
 //     endpointUrl?: string;
 //   }>
 // | MessageEvent<{
+//     name: typeof EXPLORER_SUBSCRIPTION_REQUEST;
+//     operationId: string;
+//     operation: string;
+//     variables?: Record<string, string>;
+//     operationName?: string;
+//     headers?: Record<string, string>;
+//     subscriptionUrl: string;
+//     protocol: GraphQLSubscriptionLibrary;
+//   }>
+// | MessageEvent<{
 //     name: typeof EXPLORER_LISTENING_FOR_SCHEMA;
 //   }>
 // | MessageEvent<{