use @apollo/explorer-helpers in embeds

.circleci/config.yml

@@ -106,7 +106,7 @@ jobs:
       - npm-install
       - run:
           name: TypeScript
-          command: npm run build
+          command: npm run build -w @apollo/explorer-helpers && npm run build
 
   build-latest-umd-explorer:
     executor: node

package.json

@@ -66,9 +66,9 @@
     "endOfLine": "auto"
   },
   "workspaces": [
+    "packages/explorer-helpers",
     "packages/explorer",
-    "packages/sandbox",
-    "packages/explorer-helpers"
+    "packages/sandbox"
   ],
   "devDependencies": {
     "@babel/core": "^7.18.5",

packages/explorer/package.json

@@ -69,6 +69,7 @@
     }
   },
   "dependencies": {
+    "@apollo/explorer-helpers": "^0.1.4",
     "@types/whatwg-mimetype": "^3.0.0",
     "graphql-ws": "^5.9.0",
     "subscriptions-transport-ws": "^0.11.0",

packages/explorer/src/helpers/postMessageRelayHelpers.ts

@@ -23,14 +23,17 @@ import {
   EXPLORER_LISTENING_FOR_SCHEMA,
 } from './constants';
 import MIMEType from 'whatwg-mimetype';
-import { readMultipartWebStream } from './readMultipartWebStream';
 import type { JSONObject, JSONValue } from './types';
 import type { ObjMap } from 'graphql/jsutils/ObjMap';
 import type {
   GraphQLSubscriptionLibrary,
   HTTPMultipartClient,
 } from './subscriptionPostMessageRelayHelpers';
-import { constructMultipartForm, FileVariable } from './constructMultipartForm';
+import {
+  readMultipartWebStream,
+  constructMultipartForm,
+  FileVariable,
+} from '@apollo/explorer-helpers';
 
 export type HandleRequest = (
   endpointUrl: string,
@@ -89,21 +92,6 @@ type ExplorerResponse = ResponseData & {
   size?: number;
 };
 
-// https://apollographql.quip.com/mkWRAJfuxa7L/Multipart-subscriptions-protocol-spec
-export interface MultipartSubscriptionResponse {
-  data: {
-    errors?: Array<GraphQLError>;
-    payload:
-      | (ResponseData & {
-          error?: { message: string; stack?: string };
-        })
-      | null;
-  };
-  headers?: Record<string, string> | Record<string, string>[];
-  size: number;
-  status?: number;
-}
-
 export type ExplorerSubscriptionResponse =
   // websocket response
   | {
@@ -112,7 +100,20 @@ export type ExplorerSubscriptionResponse =
       errors?: GraphQLError[];
     }
   // http multipart response options below
-  | MultipartSubscriptionResponse
+  // https://apollographql.quip.com/mkWRAJfuxa7L/Multipart-subscriptions-protocol-spec
+  | {
+      data: {
+        errors?: Array<GraphQLError>;
+        payload:
+          | (ResponseData & {
+              error?: { message: string; stack?: string };
+            })
+          | null;
+      };
+      headers?: Record<string, string> | Record<string, string>[];
+      size: number;
+      status?: number;
+    }
   | {
       data: null;
       // this only exists in the PM MultipartSubscriptionResponse
@@ -248,9 +249,15 @@ export async function executeOperation({
   };
   let promise: Promise<Response>;
   if (fileVariables && fileVariables.length > 0) {
+    // the types expected by the shared constructMultipartForm expect
+    // variables to be defined or null
+    const requestBodyWithDefaultNullVariables = {
+      ...requestBody,
+      variables: requestBody.variables ?? null,
+    };
     const form = await constructMultipartForm({
       fileVariables,
-      requestBody,
+      requestBody: requestBodyWithDefaultNullVariables,
     });
 
     promise = handleRequest(endpointUrl, {