@apollo/explorer - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

package.json

 {
   "name": "@apollo/explorer",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "author": "[e-mail]",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -7,3 +7,3 @@ # Apollo Studio Embeddable Explorer
 
-### Using the [@apollo/explorer npm package](https://www.npmjs.com/package/@apollo/explorer)
+## Using the [@apollo/explorer npm package](https://www.npmjs.com/package/@apollo/explorer)
 
@@ -19,3 +19,3 @@ You can download the @apollo/explorer npm package with `npm install @apollo/explorer`. Then, you can import the ApolloExplorer class or ApolloExplorer component like so:
 
-#### React
+### React
 
@@ -49,3 +49,3 @@ ```
 
-#### Vanilla JS
+### Vanilla JS
 
@@ -101,1 +101,78 @@ ```
 We have a React example app that uses our ApolloExplorer React component to render the embedded Explorer located in src/examples/react-example. To run this example, `npm run build` and `npm run start` in `react-example`. Make sure you delete the .parcel-cache folder before you rebuild for new changes. (TODO remove parcel caching)
+
+### Sequence Diagrams
+
+#### Connecting to unregistered graphs by directly passing in schema
+```mermaid
+sequenceDiagram
+    participant Parent as Parent Page
+    participant Embed as Embedded Explorer
+
+    note over Parent: Render iframe loading embed and start listening for messages.
+    Parent->>Embed: Embed loads with initial state <br>(gql operation, variables, headers, persistence preference etc) <br>in the query params of the iframe.
+    note over Embed: Loaded and sets initial state<br> from query params.
+    note over Embed: Start listening for messages
+
+    Embed->>Parent: Handshake message asking for schema
+    Parent->>Embed: Responds with schema
+
+    note over Embed: Loads in given schema to explorer
+
+    Embed --> Parent: Set up finished
+    
+    note over Embed: User submits operation
+    Embed->>Parent: Send request contents
+    note over Parent: Makes actual network request via `handleRequest()`
+    Parent->>Embed: Send network response back
+    note over Embed: Processes and renders response
+```
+
+
+#### Connecting to registered graphs by authentication
+
+```mermaid
+sequenceDiagram
+    participant Parent as Parent Page
+    participant Embed as Embedded Explorer
+    participant Login as Studio Login Page at <br>studio.apollographql.com
+
+    note over Parent: Render iframe loading embed and start listening for messages.
+    Parent->>Embed: Embed loads with initial state <br>(gql operation, variables, headers, persistence preference etc) <br>in the query params of the iframe.
+    note over Embed: Loaded and sets initial state<br> from query params.
+    note over Embed: Start listening for messages
+
+    Embed->>Parent: Handshake message asking for graphRef, <br>account id & account invite token if provided
+        
+    Parent->>Embed: Responds with graphRef, account id, account invite token
+
+    Embed->>Parent: Authentication message asking for second half of<br> authentication token from parent page local storage
+
+    alt when parent page has authentication token or graph is public
+        Parent->>Embed: Responds with half auth token<br> from parent page local storage
+    else when parent page doesn't have authentication token
+        note over Embed: Renders login page
+        note over Embed: User clicks 'login' on embed
+        Embed ->>Login: Embed opens a new tab to <br>login page via window.open
+        note over Login: Asks user to authenticate and<br> authorize this embed to use account
+        note over Login: User accepts
+        note over Login: Login page generates new <br>Studio API Key for this user
+        Login ->> Embed: Sends Studio API Key over <br>postMessage via window.opener
+        note over Embed: Splits key in 2, <br>stores half in local storage
+        Embed ->> Parent: Sends other half of key to parent page
+        note over Parent: Stores half of key in local storage
+        Parent->>Embed: Responds with half auth token<br> from parent page local storage
+    end
+
+
+    note over Embed: Merges half key from parent page & half from embed local storage. <br>Uses this key for all future requests to Studio backend.
+
+    note over Embed: Loads in schema & operation <br>collections for given graphRef from Studio servers
+
+    Parent --> Login: Set up finished
+    
+    note over Embed: User submits operation
+    Embed->>Parent: Send request contents
+    note over Parent: Makes actual network request via `handleRequest()`
+    Parent->>Embed: Send network response back
+    note over Embed: Processes and renders response
+```

src/EmbeddedExplorer.d.ts

@@ -18,2 +18,8 @@ import type { IntrospectionQuery } from 'graphql';
     handleRequest?: HandleRequest;
+    /**
+     * If this is passed, its value will take precedence over your variant's default `includeCookies` value.
+     * If you pass `handleRequest`, that will override this value and its behavior.
+     *
+     * @deprecated Use the connection setting on your variant in Studio to choose whether or not to include cookies
+     */
     includeCookies?: boolean;
@@ -20,0 +26,0 @@ autoInviteOptions?: {

src/helpers/constants.d.ts

@@ -5,3 +5,2 @@ export declare const EMBEDDABLE_EXPLORER_URL: (__testLocal__?: boolean) => "https://embed.apollo.local:3000" | "https://explorer.embed.apollographql.com";
 export declare const SET_OPERATION = "SetOperation";
-export declare const SCHEMA_ERROR = "SchemaError";
 export declare const SCHEMA_RESPONSE = "SchemaResponse";
@@ -23,3 +22,2 @@ export declare const EXPLORER_QUERY_MUTATION_REQUEST = "ExplorerRequest";
 export declare const PARTIAL_AUTHENTICATION_TOKEN_RESPONSE = "PartialAuthenticationTokenResponse";
-export declare const INTROSPECTION_QUERY_WITH_HEADERS = "IntrospectionQueryWithHeaders";
 export declare const PARENT_LOGOUT_SUCCESS = "ParentLogoutSuccess";

src/helpers/defaultHandleRequest.d.ts

 import type { HandleRequest } from './postMessageRelayHelpers';
-export declare const defaultHandleRequest: ({ includeCookies, }: {
-    includeCookies: boolean;
+export declare const defaultHandleRequest: ({ legacyIncludeCookies, }: {
+    legacyIncludeCookies?: boolean | undefined;
 }) => HandleRequest;

src/helpers/postMessageRelayHelpers.d.ts

 import type { ExecutionResult, GraphQLError, IntrospectionQuery } from 'graphql';
-import { PARTIAL_AUTHENTICATION_TOKEN_RESPONSE, EXPLORER_QUERY_MUTATION_RESPONSE, HANDSHAKE_RESPONSE, SCHEMA_ERROR, SCHEMA_RESPONSE, SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT, EXPLORER_LISTENING_FOR_PARTIAL_TOKEN, PARENT_LOGOUT_SUCCESS, TRIGGER_LOGOUT_IN_PARENT, EXPLORER_SUBSCRIPTION_RESPONSE, EXPLORER_SET_SOCKET_ERROR, EXPLORER_SET_SOCKET_STATUS, TRACE_KEY, EXPLORER_LISTENING_FOR_HANDSHAKE, EXPLORER_QUERY_MUTATION_REQUEST, EXPLORER_SUBSCRIPTION_REQUEST, EXPLORER_SUBSCRIPTION_TERMINATION, EXPLORER_LISTENING_FOR_SCHEMA, INTROSPECTION_QUERY_WITH_HEADERS } from './constants';
+import { PARTIAL_AUTHENTICATION_TOKEN_RESPONSE, EXPLORER_QUERY_MUTATION_RESPONSE, HANDSHAKE_RESPONSE, SCHEMA_RESPONSE, SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT, EXPLORER_LISTENING_FOR_PARTIAL_TOKEN, PARENT_LOGOUT_SUCCESS, TRIGGER_LOGOUT_IN_PARENT, EXPLORER_SUBSCRIPTION_RESPONSE, EXPLORER_SET_SOCKET_ERROR, EXPLORER_SET_SOCKET_STATUS, TRACE_KEY, EXPLORER_LISTENING_FOR_HANDSHAKE, EXPLORER_QUERY_MUTATION_REQUEST, EXPLORER_SUBSCRIPTION_REQUEST, EXPLORER_SUBSCRIPTION_TERMINATION, EXPLORER_LISTENING_FOR_SCHEMA } from './constants';
 import type { JSONValue } from './types';
@@ -41,6 +41,2 @@ import type { ObjMap } from 'graphql/jsutils/ObjMap';
 export declare type OutgoingEmbedMessage = {
-    name: typeof SCHEMA_ERROR;
-    error?: string;
-    errors?: Array<GraphQLError>;
-} | {
     name: typeof SCHEMA_RESPONSE;
@@ -87,2 +83,3 @@ schema: IntrospectionQuery | string | undefined;
     headers?: Record<string, string>;
+    includeCookies?: boolean;
     endpointUrl?: string;
@@ -113,9 +110,4 @@ }> | MessageEvent<{
     localStorageKey?: string;
-}> | MessageEvent<{
-    name: typeof INTROSPECTION_QUERY_WITH_HEADERS;
-    introspectionRequestBody: string;
-    introspectionRequestHeaders: Record<string, string>;
-    sandboxEndpointUrl?: string;
 }>;
-export declare function executeOperation({ endpointUrl, handleRequest, operation, operationName, variables, headers, embeddedIFrameElement, operationId, embedUrl, }: {
+export declare function executeOperation({ endpointUrl, handleRequest, operation, operationName, variables, headers, includeCookies, embeddedIFrameElement, operationId, embedUrl, }: {
     endpointUrl: string;
@@ -129,2 +121,3 @@ handleRequest: HandleRequest;
     headers?: Record<string, string>;
+    includeCookies?: boolean;
     embedUrl: string;
@@ -131,0 +124,0 @@ }): Promise<void>;

No alert changes

Improved metrics

Total package byte prevSize

140973

increased by4.06%

Lines of code

3376

increased by1.05%

Number of lines in readme file

175

increased by78.57%

No dependency changes