Skip to content

Commit 23a854a

Browse files
ardatanardatan
committed
feat: Apollo Sandbox Renderer instead of GraphiQL
1 parent 4d98066 commit 23a854a

File tree

5 files changed

+252
-4
lines changed

5 files changed

+252
-4
lines changed

‎.changeset/red-dingos-clean.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-yoga/render-apollo-sandbox': patch
3+
---
4+
5+
New renderer for Apollo Sandbox instead of GraphiQL

‎packages/render-apollo-sandbox/package.json

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "@graphql-yoga/render-apollo-sandbox",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/dotansimha/graphql-yoga.git",
8+
"directory": "packages/plugins/apollo-sandbox"
9+
},
10+
"author": "Arda TANRIKULU <[email protected]>",
11+
"license": "MIT",
12+
"engines": {
13+
"node": ">=18.0.0"
14+
},
15+
"main": "dist/cjs/index.js",
16+
"module": "dist/esm/index.js",
17+
"exports": {
18+
".": {
19+
"require": {
20+
"types": "./dist/typings/index.d.cts",
21+
"default": "./dist/cjs/index.js"
22+
},
23+
"import": {
24+
"types": "./dist/typings/index.d.ts",
25+
"default": "./dist/esm/index.js"
26+
},
27+
"default": {
28+
"types": "./dist/typings/index.d.ts",
29+
"default": "./dist/esm/index.js"
30+
}
31+
},
32+
"./*": {
33+
"require": {
34+
"types": "./dist/typings/*.d.cts",
35+
"default": "./dist/cjs/*.js"
36+
},
37+
"import": {
38+
"types": "./dist/typings/*.d.ts",
39+
"default": "./dist/esm/*.js"
40+
},
41+
"default": {
42+
"types": "./dist/typings/*.d.ts",
43+
"default": "./dist/esm/*.js"
44+
}
45+
},
46+
"./package.json": "./package.json"
47+
},
48+
"typings": "dist/typings/index.d.ts",
49+
"peerDependencies": {
50+
"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
51+
"graphql-yoga": "workspace:^"
52+
},
53+
"dependencies": {
54+
"tslib": "^2.5.0"
55+
},
56+
"devDependencies": {
57+
"graphql": "16.10.0",
58+
"graphql-yoga": "workspace:^"
59+
},
60+
"publishConfig": {
61+
"directory": "dist",
62+
"access": "public"
63+
},
64+
"sideEffects": false,
65+
"buildOptions": {
66+
"input": "./src/index.ts"
67+
},
68+
"typescript": {
69+
"definition": "dist/typings/index.d.ts"
70+
}
71+
}

‎packages/render-apollo-sandbox/src/index.ts

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import type { GraphiQLOptions } from 'graphql-yoga';
2+
3+
export interface ApolloSandboxOptions {
4+
/**
5+
* The URL of the GraphQL endpoint that Sandbox introspects on initial load. Sandbox populates its pages using the schema obtained from this endpoint.
6+
* The default value is `http://localhost:4000`.
7+
* You should only pass non-production endpoints to Sandbox. Sandbox is powered by schema introspection, and we recommend [disabling introspection in production](https://www.apollographql.com/blog/graphql/security/why-you-should-disable-graphql-introspection-in-production/).
8+
* To provide a "Sandbox-like" experience for production endpoints, we recommend using either a [public variant](https://www.apollographql.com/docs/graphos/platform/graph-management/variants#public-variants) or the [embedded Explorer](https://www.apollographql.com/docs/graphos/platform/explorer/embed).
9+
*/
10+
initialEndpoint?: string;
11+
/**
12+
* By default, the embedded Sandbox does not show the **Include cookies** toggle in its connection settings.Set `hideCookieToggle` to `false` to enable users of your embedded Sandbox instance to toggle the **Include cookies** setting.
13+
*/
14+
hideCookieToggle?: boolean;
15+
/**
16+
* By default, the embedded Sandbox has a URL input box that is editable by users.Set endpointIsEditable to false to prevent users of your embedded Sandbox instance from changing the endpoint URL.
17+
*/
18+
endpointIsEditable?: boolean;
19+
/**
20+
* You can set `includeCookies` to `true` if you instead want Sandbox to pass `{ credentials: 'include' }` for its requests.If you pass the `handleRequest` option, this option is ignored.Read more about the `fetch` API and credentials [here](https://developer.mozilla.org/en-US/docs/Web/API/fetch#credentials).This config option is deprecated in favor of using the connection settings cookie toggle in Sandbox and setting the default value via `initialState.includeCookies`.
21+
*/
22+
includeCookies?: boolean;
23+
/**
24+
* An object containing additional options related to the state of the embedded Sandbox on page load.
25+
*/
26+
initialState?: InitialState;
27+
}
28+
29+
interface InitialState {
30+
/**
31+
* Set this value to `true` if you want Sandbox to pass `{ credentials: 'include' }` for its requests by default.If you set `hideCookieToggle` to `false`, users can override this default setting with the **Include cookies** toggle. (By default, the embedded Sandbox does not show the **Include cookies** toggle in its connection settings.)If you also pass the `handleRequest` option, this option is ignored.Read more about the `fetch` API and credentials [here](https://developer.mozilla.org/en-US/docs/Web/API/fetch#credentials).
32+
*/
33+
includeCookies?: boolean;
34+
/**
35+
* A URI-encoded operation to populate in Sandbox's editor on load.If you omit this, Sandbox initially loads an example query based on your schema.Example:
36+
* ```js
37+
* initialState: {
38+
* document: `
39+
* query ExampleQuery {
40+
* books {
41+
* title
42+
* }
43+
* }
44+
* `
45+
* }
46+
* ```
47+
*/
48+
document?: string;
49+
/**
50+
* A URI-encoded, serialized object containing initial variable values to populate in Sandbox on load.If provided, these variables should apply to the initial query you provide for [`document`](https://www.apollographql.com/docs/apollo-sandbox#document).Example:
51+
*
52+
* ```js
53+
* initialState: {
54+
* variables: {
55+
* userID: "abc123"
56+
* },
57+
* }
58+
* ```
59+
*/
60+
variables?: string;
61+
/**
62+
* A URI-encoded, serialized object containing initial HTTP header values to populate in Sandbox on load.Example:
63+
*
64+
*
65+
* ```js
66+
* initialState: {
67+
* headers: {
68+
* authorization: "Bearer abc123";
69+
* }
70+
* }
71+
* ```
72+
*/
73+
headers?: string;
74+
/**
75+
* The ID of a collection, paired with an operation ID to populate in Sandbox on load. You can find these values from a registered graph in Studio by clicking the **...** menu next to an operation in the Explorer of that graph and selecting **View operation details**.Example:
76+
*
77+
* ```js
78+
* initialState: {
79+
* collectionId: 'abc1234',
80+
* operationId: 'xyz1234'
81+
* }
82+
* ```
83+
*/
84+
collectionId?: string;
85+
operationId?: string;
86+
/**
87+
* If `true`, the embedded Sandbox periodically polls your `initialEndpoint` for schema updates.The default value is `true`.Example:
88+
*
89+
* ```js
90+
* initialState: {
91+
* pollForSchemaUpdates: false;
92+
* }
93+
* ```
94+
*/
95+
pollForSchemaUpdates?: boolean;
96+
/**
97+
* Headers that are applied by default to every operation executed by the embedded Sandbox. Users can turn off the application of these headers, but they can't modify their values.The embedded Sandbox always includes these headers in its introspection queries to your `initialEndpoint`.Example:
98+
*
99+
* ```js
100+
* initialState: {
101+
* sharedHeaders: {
102+
* authorization: "Bearer abc123";
103+
* }
104+
* }
105+
* ```
106+
*/
107+
sharedHeaders?: Record<string, string>;
108+
}
109+
110+
export function renderApolloSandbox(sandboxOpts?: ApolloSandboxOptions) {
111+
return function renderApolloSandbox(graphiqlOpts: GraphiQLOptions) {
112+
const initialState: InitialState = {
113+
document: graphiqlOpts.defaultQuery,
114+
headers: graphiqlOpts.headers,
115+
sharedHeaders: graphiqlOpts.additionalHeaders,
116+
...sandboxOpts?.initialState,
117+
};
118+
const finalOpts: ApolloSandboxOptions = {
119+
...sandboxOpts,
120+
initialState,
121+
};
122+
return /* HTML */ `
123+
<div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
124+
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
125+
<script>
126+
const opts = ${JSON.stringify(finalOpts)};
127+
opts.initialEndpoint ||= new URL(location.pathname, location.href).toString();
128+
new window.EmbeddedSandbox(opts);
129+
</script>
130+
`;
131+
};
132+
}

‎pnpm-lock.yaml

Lines changed: 18 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/src/pages/docs/features/graphiql.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,3 +152,29 @@ will need to add some sources to your CSP configuration:
152152
- `unpkg.com`: GraphiQL styles are loaded directly from its module bundle, next to its scripts.
153153
- `img-src`:
154154
- `raw.githubusercontent.com`: The Guild logo is loaded from github
155+
156+
## Apollo Sandbox (as alternative)
157+
158+
If you want to use [Apollo Sandbox](https://www.apollographql.com/docs/apollo-sandbox) in favor of
159+
GraphiQL. You can install this package and use it;
160+
161+
```sh npm2yarn
162+
npm i @graphql-yoga/apollo-sandbox
163+
```
164+
165+
```ts filename="Use Apollo Sandbox"
166+
import { createYoga } from 'graphql-yoga'
167+
import { renderApolloSandbox } from '@graphql-yoga/render-apollo-sandbox'
168+
169+
// Pass Apollo Sandbox renderer instead of GraphiQL
170+
const yoga = createYoga({
171+
renderGraphiQL: renderApolloSandbox({
172+
/**
173+
* Options here
174+
*/
175+
})
176+
})
177+
```
178+
179+
About the options, see here:
180+
[Apollo Sandbox Options](https://www.apollographql.com/docs/apollo-sandbox#options)

0 commit comments

Comments
 (0)