get rid of 'cannot use in operator' type error shown in development (#…

…108)

* get rid of 'cannot use in operator' type error shown in development

* Create grumpy-bees-rest.md

.changeset/grumpy-bees-rest.md

@@ -0,0 +1,5 @@
+---
+"@apollo/explorer": patch
+---
+
+get rid of 'cannot use in operator' type error shown in development

src/embeddedExplorer/setupEmbedRelay.ts

@@ -47,53 +47,53 @@ export function setupEmbedRelay({
       embeddedIFrameElement: embeddedExplorerIFrameElement,
     });
 
-    const { data } = event;
-    // When embed connects, send a handshake message
-    if (data.name === EXPLORER_LISTENING_FOR_HANDSHAKE) {
-      sendPostMessageToEmbed({
-        message: {
-          name: HANDSHAKE_RESPONSE,
-          graphRef,
-          inviteToken: autoInviteOptions?.inviteToken,
-          accountId: autoInviteOptions?.accountId,
-        },
-        embeddedIFrameElement: embeddedExplorerIFrameElement,
-        embedUrl,
-      });
-    }
-
-    // Embedded Explorer sends us a PM when it is ready for a schema
-    if (
-      'name' in data &&
-      data.name === EXPLORER_LISTENING_FOR_SCHEMA &&
-      !!schema
-    ) {
-      updateSchemaInEmbed({ schema });
-    }
+    // Any pm can be listened for here, not just the ones we know the
+    // structure of. Some have a data field that is not an object
+    const data = typeof event.data === 'object' ? event.data : undefined;
 
-    // Check to see if the posted message indicates that the user is
-    // executing a query or mutation or subscription in the Explorer
-    const isQueryOrMutation =
-      'name' in data && data.name === EXPLORER_QUERY_MUTATION_REQUEST;
-
-    // If the user is executing a query or mutation or subscription...
-    if (isQueryOrMutation && data.operation && data.operationId) {
-      // Extract the operation details from the event.data object
-      const { operation, operationId, operationName, variables, headers } =
-        data;
-      if (isQueryOrMutation) {
-        executeOperation({
-          endpointUrl,
-          handleRequest,
-          operation,
-          operationName,
-          variables,
-          headers,
+    if (data && 'name' in data) {
+      // When embed connects, send a handshake message
+      if (data.name === EXPLORER_LISTENING_FOR_HANDSHAKE) {
+        sendPostMessageToEmbed({
+          message: {
+            name: HANDSHAKE_RESPONSE,
+            graphRef,
+            inviteToken: autoInviteOptions?.inviteToken,
+            accountId: autoInviteOptions?.accountId,
+          },
           embeddedIFrameElement: embeddedExplorerIFrameElement,
-          operationId,
           embedUrl,
         });
       }
+
+      // Embedded Explorer sends us a PM when it is ready for a schema
+      if (data.name === EXPLORER_LISTENING_FOR_SCHEMA && !!schema) {
+        updateSchemaInEmbed({ schema });
+      }
+
+      // Check to see if the posted message indicates that the user is
+      // executing a query or mutation or subscription in the Explorer
+      const isQueryOrMutation = data.name === EXPLORER_QUERY_MUTATION_REQUEST;
+
+      // If the user is executing a query or mutation or subscription...
+      if (isQueryOrMutation && data.operation && data.operationId) {
+        // Extract the operation details from the event.data object
+        const { operation, operationId, operationName, variables, headers } =
+          data;
+        if (isQueryOrMutation) {
+          executeOperation({
+            endpointUrl,
+            handleRequest,
+            operation,
+            operationName,
+            variables,
+            headers,
+            embeddedIFrameElement: embeddedExplorerIFrameElement,
+            operationId,
+            embedUrl,
+          });
+        }
+      }
     }
   };
   // Execute our callback whenever window.postMessage is called

src/embeddedSandbox/setupSandboxEmbedRelay.ts

@@ -30,63 +30,66 @@ export function setupSandboxEmbedRelay({
       embeddedIFrameElement: embeddedSandboxIFrameElement,
     });
 
-    const { data } = event;
+    // Any pm can be listened for here, not just the ones we know the
+    // structure of. Some have a data field that is not an object
+    const data = typeof event.data === 'object' ? event.data : undefined;
 
-    // When embed connects, send a handshake message
-    if (data.name === EXPLORER_LISTENING_FOR_HANDSHAKE) {
-      sendPostMessageToEmbed({
-        message: {
-          name: HANDSHAKE_RESPONSE,
-        },
-        embeddedIFrameElement: embeddedSandboxIFrameElement,
-        embedUrl,
-      });
-    }
-
-    if (data.name === INTROSPECTION_QUERY_WITH_HEADERS) {
-      const {
-        introspectionRequestBody,
-        introspectionRequestHeaders,
-        sandboxEndpointUrl,
-      } = data;
-      if (sandboxEndpointUrl) {
-        executeIntrospectionRequest({
-          endpointUrl: sandboxEndpointUrl,
-          introspectionRequestBody,
-          headers: introspectionRequestHeaders,
+    if (data && 'name' in data) {
+      // When embed connects, send a handshake message
+      if (data.name === EXPLORER_LISTENING_FOR_HANDSHAKE) {
+        sendPostMessageToEmbed({
+          message: {
+            name: HANDSHAKE_RESPONSE,
+          },
           embeddedIFrameElement: embeddedSandboxIFrameElement,
+          embedUrl,
         });
       }
-    }
 
-    // Check to see if the posted message indicates that the user is
-    // executing a query or mutation or subscription in the Explorer
-    const isQueryOrMutation =
-      'name' in data && data.name === EXPLORER_QUERY_MUTATION_REQUEST;
+      if (data.name === INTROSPECTION_QUERY_WITH_HEADERS) {
+        const {
+          introspectionRequestBody,
+          introspectionRequestHeaders,
+          sandboxEndpointUrl,
+        } = data;
+        if (sandboxEndpointUrl) {
+          executeIntrospectionRequest({
+            endpointUrl: sandboxEndpointUrl,
+            introspectionRequestBody,
+            headers: introspectionRequestHeaders,
+            embeddedIFrameElement: embeddedSandboxIFrameElement,
+          });
+        }
+      }
 
-    // If the user is executing a query or mutation or subscription...
-    if (isQueryOrMutation && data.operation && data.operationId) {
-      // Extract the operation details from the event.data object
-      const {
-        operation,
-        operationId,
-        operationName,
-        variables,
-        headers,
-        sandboxEndpointUrl,
-      } = data;
-      if (isQueryOrMutation && sandboxEndpointUrl) {
-        executeOperation({
-          endpointUrl: sandboxEndpointUrl,
-          handleRequest,
+      // Check to see if the posted message indicates that the user is
+      // executing a query or mutation or subscription in the Explorer
+      const isQueryOrMutation = data.name === EXPLORER_QUERY_MUTATION_REQUEST;
+
+      // If the user is executing a query or mutation or subscription...
+      if (isQueryOrMutation && data.operation && data.operationId) {
+        // Extract the operation details from the event.data object
+        const {
           operation,
+          operationId,
           operationName,
           variables,
           headers,
-          embeddedIFrameElement: embeddedSandboxIFrameElement,
-          operationId,
-          embedUrl,
-        });
+          sandboxEndpointUrl,
+        } = data;
+        if (isQueryOrMutation && sandboxEndpointUrl) {
+          executeOperation({
+            endpointUrl: sandboxEndpointUrl,
+            handleRequest,
+            operation,
+            operationName,
+            variables,
+            headers,
+            embeddedIFrameElement: embeddedSandboxIFrameElement,
+            operationId,
+            embedUrl,
+          });
+        }
       }
     }
   };