@graphql-yoga/render-apollo-sandbox 0.2.0 → 0.3.0-alpha-20251213173151-d5d733ae6a0ff8ce32156df1d18a72760fc1225f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/index.js +22 -7
  2. package/esm/index.js +22 -7
  3. package/package.json +2 -2
  4. package/typings/index.d.cts +6 -2
  5. package/typings/index.d.ts +6 -2
package/cjs/index.js CHANGED
@@ -3,24 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.renderApolloSandbox = renderApolloSandbox;
4
4
  function renderApolloSandbox(sandboxOpts) {
5
5
  return function renderApolloSandbox(graphiqlOpts) {
6
+ const includeCookies = graphiqlOpts.credentials === 'include' || graphiqlOpts.credentials === 'same-origin';
6
7
  const initialState = {
7
8
  document: graphiqlOpts.defaultQuery,
8
9
  headers: graphiqlOpts.headers,
9
10
  sharedHeaders: graphiqlOpts.additionalHeaders,
11
+ includeCookies,
10
12
  ...sandboxOpts?.initialState,
11
13
  };
14
+ const endpoint = graphiqlOpts.endpoint
15
+ ? JSON.stringify(graphiqlOpts.endpoint)
16
+ : 'location.pathname';
12
17
  const finalOpts = {
18
+ includeCookies,
13
19
  ...sandboxOpts,
14
20
  initialState,
15
21
  };
16
22
  return /* HTML */ `
17
- <div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
18
- <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
19
- <script>
20
- const opts = ${JSON.stringify(finalOpts)};
21
- opts.initialEndpoint ||= new URL(location.pathname, location.href).toString();
22
- new window.EmbeddedSandbox(opts);
23
- </script>
23
+ <!DOCTYPE html>
24
+ <html style="height: 100%;" lang="en">
25
+ <head>
26
+ <title>Apollo Sandbox</title>
27
+ </head>
28
+ <body style="margin: 0;height: 100%;">
29
+ <div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
30
+ <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
31
+ <script>
32
+ const opts = ${JSON.stringify(finalOpts)};
33
+ opts.initialEndpoint ||= new URL(${endpoint}, location.href).toString();
34
+ opts.target ||= '#embedded-sandbox';
35
+ new window.EmbeddedSandbox(opts);
36
+ </script>
37
+ </body>
38
+ </html>
24
39
  `;
25
40
  };
26
41
  }
package/esm/index.js CHANGED
@@ -1,23 +1,38 @@
1
1
  export function renderApolloSandbox(sandboxOpts) {
2
2
  return function renderApolloSandbox(graphiqlOpts) {
3
+ const includeCookies = graphiqlOpts.credentials === 'include' || graphiqlOpts.credentials === 'same-origin';
3
4
  const initialState = {
4
5
  document: graphiqlOpts.defaultQuery,
5
6
  headers: graphiqlOpts.headers,
6
7
  sharedHeaders: graphiqlOpts.additionalHeaders,
8
+ includeCookies,
7
9
  ...sandboxOpts?.initialState,
8
10
  };
11
+ const endpoint = graphiqlOpts.endpoint
12
+ ? JSON.stringify(graphiqlOpts.endpoint)
13
+ : 'location.pathname';
9
14
  const finalOpts = {
15
+ includeCookies,
10
16
  ...sandboxOpts,
11
17
  initialState,
12
18
  };
13
19
  return /* HTML */ `
14
- <div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
15
- <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
16
- <script>
17
- const opts = ${JSON.stringify(finalOpts)};
18
- opts.initialEndpoint ||= new URL(location.pathname, location.href).toString();
19
- new window.EmbeddedSandbox(opts);
20
- </script>
20
+ <!DOCTYPE html>
21
+ <html style="height: 100%;" lang="en">
22
+ <head>
23
+ <title>Apollo Sandbox</title>
24
+ </head>
25
+ <body style="margin: 0;height: 100%;">
26
+ <div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
27
+ <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
28
+ <script>
29
+ const opts = ${JSON.stringify(finalOpts)};
30
+ opts.initialEndpoint ||= new URL(${endpoint}, location.href).toString();
31
+ opts.target ||= '#embedded-sandbox';
32
+ new window.EmbeddedSandbox(opts);
33
+ </script>
34
+ </body>
35
+ </html>
21
36
  `;
22
37
  };
23
38
  }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@graphql-yoga/render-apollo-sandbox",
3
- "version": "0.2.0",
3
+ "version": "0.3.0-alpha-20251213173151-d5d733ae6a0ff8ce32156df1d18a72760fc1225f",
4
4
  "sideEffects": false,
5
5
  "peerDependencies": {
6
6
  "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
7
- "graphql-yoga": "^5.17.0"
7
+ "graphql-yoga": "^5.18.0-alpha-20251213173151-d5d733ae6a0ff8ce32156df1d18a72760fc1225f"
8
8
  },
9
9
  "dependencies": {
10
10
  "tslib": "^2.5.0"
package/typings/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import type { GraphiQLOptions } from 'graphql-yoga';
1
+ import type { GraphiQLRenderer } from 'graphql-yoga';
2
2
  export interface ApolloSandboxOptions {
3
3
  /**
4
4
  * The URL of the GraphQL endpoint that Sandbox introspects on initial load. Sandbox populates its pages using the schema obtained from this endpoint.
@@ -23,6 +23,10 @@ export interface ApolloSandboxOptions {
23
23
  * An object containing additional options related to the state of the embedded Sandbox on page load.
24
24
  */
25
25
  initialState?: InitialState;
26
+ /**
27
+ * Target HTML element
28
+ */
29
+ target?: string;
26
30
  }
27
31
  interface InitialState {
28
32
  /**
@@ -104,5 +108,5 @@ interface InitialState {
104
108
  */
105
109
  sharedHeaders?: Record<string, string>;
106
110
  }
107
- export declare function renderApolloSandbox(sandboxOpts?: ApolloSandboxOptions): (graphiqlOpts: GraphiQLOptions) => string;
111
+ export declare function renderApolloSandbox(sandboxOpts?: ApolloSandboxOptions): GraphiQLRenderer;
108
112
  export {};
package/typings/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { GraphiQLOptions } from 'graphql-yoga';
1
+ import type { GraphiQLRenderer } from 'graphql-yoga';
2
2
  export interface ApolloSandboxOptions {
3
3
  /**
4
4
  * The URL of the GraphQL endpoint that Sandbox introspects on initial load. Sandbox populates its pages using the schema obtained from this endpoint.
@@ -23,6 +23,10 @@ export interface ApolloSandboxOptions {
23
23
  * An object containing additional options related to the state of the embedded Sandbox on page load.
24
24
  */
25
25
  initialState?: InitialState;
26
+ /**
27
+ * Target HTML element
28
+ */
29
+ target?: string;
26
30
  }
27
31
  interface InitialState {
28
32
  /**
@@ -104,5 +108,5 @@ interface InitialState {
104
108
  */
105
109
  sharedHeaders?: Record<string, string>;
106
110
  }
107
- export declare function renderApolloSandbox(sandboxOpts?: ApolloSandboxOptions): (graphiqlOpts: GraphiQLOptions) => string;
111
+ export declare function renderApolloSandbox(sandboxOpts?: ApolloSandboxOptions): GraphiQLRenderer;
108
112
  export {};