Type fix: only allow user to pass collectionId / operationId OR docum…

…ent, variables, headers (#223) * only allow user to pass collectionId / operationId OR document, variables, headers * require both collectionId & operationId or one of document, headers, variables * either pass both collection Id & operation Id or some selection of document, headers, variables
apollographql · Mar 9, 2023 · 911c95b · 911c95b
1 parent 58165cf
commit 911c95b
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 79 deletions.
diff --git a/packages/explorer/src/EmbeddedExplorer.ts b/packages/explorer/src/EmbeddedExplorer.ts
@@ -13,26 +13,34 @@ import { setupEmbedRelay } from './setupEmbedRelay';
 import packageJSON from '../package.json';
 import type { JSONObject } from './helpers/types';
 
+type InitialState = {
+  displayOptions?: {
+    docsPanelState?: 'open' | 'closed'; // default to 'open',
+    showHeadersAndEnvVars?: boolean; // default to `false`
+    theme?: 'dark' | 'light';
+  };
+} & (
+  | /**
+   * Pass collectionId, operationId to embed the document, headers, variables associated
+   * with this operation id if you have access to the operation via your collections.
+   */
+  {
+      collectionId: string;
+      operationId: string;
+    }
+  | {
+      document?: string;
+      variables?: JSONObject;
+      headers?: Record<string, string>;
+
+      collectionId?: never;
+      operationId?: never;
+    }
+);
 export interface BaseEmbeddableExplorerOptions {
   target: string | HTMLElement; // HTMLElement is to accomodate people who might prefer to pass in a ref
 
-  initialState?: {
-    document?: string;
-    variables?: JSONObject;
-    headers?: Record<string, string>;
-    /**
-     * If you pass a collectionId & operationId, we ignore document, variables, headers
-     * above, and embed the document, headers, variables associated with this operation id
-     * if you have access to the operation via your collections.
-     */
-    collectionId?: string;
-    operationId?: string;
-    displayOptions: {
-      docsPanelState?: 'open' | 'closed'; // default to 'open',
-      showHeadersAndEnvVars?: boolean; // default to `false`
-      theme?: 'dark' | 'light';
-    };
-  };
+  initialState?: InitialState;
   /**
    * defaults to 'false'
    */
@@ -205,29 +213,38 @@ export class EmbeddedExplorer {
   }
 
   getEmbeddedExplorerURL = () => {
-    const {
-      document,
-      variables,
-      headers,
-      displayOptions,
-      operationId,
-      collectionId,
-    } = this.options.initialState || {};
+    const { displayOptions } = this.options.initialState || {};
+
     const { persistExplorerState } = this.options;
     const graphRef =
       'graphRef' in this.options ? this.options.graphRef : undefined;
     const queryParams = {
       runtime: this.options.runtime,
       graphRef,
-      defaultCollectionEntryId: operationId,
-      defaultCollectionId: collectionId,
-      defaultDocument: document ? encodeURIComponent(document) : undefined,
-      defaultVariables: variables
-        ? encodeURIComponent(JSON.stringify(variables, null, 2))
-        : undefined,
-      defaultHeaders: headers
-        ? encodeURIComponent(JSON.stringify(headers))
-        : undefined,
+      ...(this.options.initialState &&
+      'collectionId' in this.options.initialState
+        ? {
+            defaultCollectionEntryId: this.options.initialState.operationId,
+            defaultCollectionId: this.options.initialState.collectionId,
+          }
+        : {}),
+      ...(this.options.initialState && 'document' in this.options.initialState
+        ? {
+            defaultDocument: this.options.initialState.document
+              ? encodeURIComponent(this.options.initialState.document)
+              : undefined,
+            defaultVariables: this.options.initialState.variables
+              ? encodeURIComponent(
+                  JSON.stringify(this.options.initialState.variables, null, 2)
+                )
+              : undefined,
+            defaultHeaders: this.options.initialState.headers
+              ? encodeURIComponent(
+                  JSON.stringify(this.options.initialState.headers)
+                )
+              : undefined,
+          }
+        : {}),
       shouldPersistState: !!persistExplorerState,
       docsPanelState: displayOptions?.docsPanelState ?? 'open',
       showHeadersAndEnvVars: displayOptions?.showHeadersAndEnvVars !== false,

diff --git a/packages/sandbox/src/EmbeddedSandbox.ts b/packages/sandbox/src/EmbeddedSandbox.ts
@@ -5,34 +5,42 @@ import { setupSandboxEmbedRelay } from './setupSandboxEmbedRelay';
 import packageJSON from '../package.json';
 import type { JSONObject } from './helpers/types';
 
+type InitialState = {
+  /**
+   * optional. Set headers for every operation a user triggers from this Sandbox.
+   * Users can check and uncheck these headers, but not edit them.
+   */
+  sharedHeaders?: Record<string, string>;
+  /**
+   * optional. defaults to false
+   */
+  includeCookies?: boolean;
+  /**
+   * defaults to true. If false, sandbox will not poll your endpoint for your schema.
+   * */
+  pollForSchemaUpdates?: boolean;
+} & (
+  | /**
+   * Pass collectionId, operationId to embed the document, headers, variables associated
+   * with this operation id if you have access to the operation via your collections.
+   */
+  {
+      collectionId: string;
+      operationId: string;
+    }
+  | {
+      document?: string;
+      variables?: JSONObject;
+      headers?: Record<string, string>;
+
+      collectionId?: never;
+      operationId?: never;
+    }
+);
 export interface EmbeddableSandboxOptions {
   target: string | HTMLElement; // HTMLElement is to accommodate people who might prefer to pass in a ref
   initialEndpoint?: string;
-  initialState?: {
-    document?: string;
-    variables?: JSONObject;
-    headers?: Record<string, string>;
-    /**
-     * If you pass a collectionId & operationId, we ignore document, variables, headers
-     * above, and embed the document, headers, variables associated with this operation id
-     * if you have access to the operation via your collections.
-     */
-    collectionId?: string;
-    operationId?: string;
-    /**
-     * optional. Set headers for every operation a user triggers from this Sandbox.
-     * Users can check and uncheck these headers, but not edit them.
-     */
-    sharedHeaders?: Record<string, string>;
-    /**
-     * optional. defaults to false
-     */
-    includeCookies?: boolean;
-    /**
-     * defaults to true. If false, sandbox will not poll your endpoint for your schema.
-     * */
-    pollForSchemaUpdates?: boolean;
-  };
+  initialState?: InitialState;
 
   /**
    * optional. defaults to `return fetch(url, fetchOptions)`
@@ -106,30 +114,35 @@ export class EmbeddedSandbox {
     let element: HTMLElement | null;
     const { target } = this.options;
 
-    const {
-      document: initialDocument,
-      variables,
-      headers,
-      includeCookies,
-      sharedHeaders,
-      operationId,
-      collectionId,
-    } = this.options.initialState || {};
+    const { includeCookies, sharedHeaders } = this.options.initialState || {};
 
     const queryParams = {
       runtime: this.options.runtime,
       endpoint: this.options.initialEndpoint,
-      defaultCollectionId: collectionId,
-      defaultCollectionEntryId: operationId,
-      defaultDocument: initialDocument
-        ? encodeURIComponent(initialDocument)
-        : undefined,
-      defaultVariables: variables
-        ? encodeURIComponent(JSON.stringify(variables, null, 2))
-        : undefined,
-      defaultHeaders: headers
-        ? encodeURIComponent(JSON.stringify(headers))
-        : undefined,
+      ...(this.options.initialState &&
+      'collectionId' in this.options.initialState
+        ? {
+            defaultCollectionEntryId: this.options.initialState.operationId,
+            defaultCollectionId: this.options.initialState.collectionId,
+          }
+        : {}),
+      ...(this.options.initialState && 'document' in this.options.initialState
+        ? {
+            defaultDocument: this.options.initialState.document
+              ? encodeURIComponent(this.options.initialState.document)
+              : undefined,
+            defaultVariables: this.options.initialState.variables
+              ? encodeURIComponent(
+                  JSON.stringify(this.options.initialState.variables, null, 2)
+                )
+              : undefined,
+            defaultHeaders: this.options.initialState.headers
+              ? encodeURIComponent(
+                  JSON.stringify(this.options.initialState.headers)
+                )
+              : undefined,
+          }
+        : {}),
       sharedHeaders: sharedHeaders
         ? encodeURIComponent(JSON.stringify(sharedHeaders))
         : undefined,