Skip to content

Commit 6ff205c

Browse files
dimaMachinadimaMachina
authored
Update GraphiQL CDN example using ESM-based CDN esm.sh (#3902)
* upd * upd * upd * upd * upd * exclude react-dom/client from bundle * bump react everywhere to v19 * bump react everywhere to v19 * polish * fix failing text, to unblock canary * upd * try `minor` for graphiql/react, otherwise it pines to `1.0.0-next.2` in esm.sh * try workaround * try workaround * try workaround * try workaround * this should fix vitest * try * try * lint * try * fix test * try SOURCEMAP var * try ESM_SH_BUILD var * try * rm some unneeded code * try to fix esbuild: package 'uWebSockets.js' not found * update vite to see if it fix esbuild error? * bump module "@emotion/is-prop-valid" not found to fix `module "@emotion/is-prop-valid" not found` on esm.sh * upd * upd * upd * fix e2e * add changeset * add migration markdown file * fix * upd * upd graphiql plugin explorer docs * upd * upd * upd * update code exporter * upd * upd * upd * upd * upd * upd * polish * add changeset
1 parent d1db4c7 commit 6ff205c

File tree

13 files changed

+292
-356
lines changed

13 files changed

+292
-356
lines changed

‎.changeset/chatty-spoons-accept.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@graphiql/plugin-code-exporter': minor
3+
'@graphiql/plugin-explorer': minor
4+
'@graphiql/react': minor
5+
'graphiql': minor
6+
---
7+
8+
Update GraphiQL CDN example using ESM-based CDN esm.sh

‎docs/migration/graphiql-4.0.0.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- Drop CommonJS build output
66
- Drop support React 16/17
77
- Support React 19
8+
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN.
89

910
## `@graphiql/react` changes
1011

@@ -18,9 +19,13 @@
1819
- Drop CommonJS build output
1920
- Drop support React 16/17
2021
- Support React 19
22+
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN.
23+
- [Updated CDN ESM-based example](../../packages/graphiql-plugin-code-exporter/example/index.html)
2124

2225
## `@graphiql/plugin-explorer` changes
2326

2427
- Drop CommonJS build output
2528
- Drop support React 16/17
2629
- Support React 19
30+
- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN.
31+
- [Updated CDN ESM-based example](../../packages/graphiql-plugin-explorer/example/index.html)

‎examples/graphiql-cdn/README.md

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
# GraphiQL CDN Example
22

3-
This example uses the CDN bundles to show a simple graphiql example, with explorer plugin.
3+
This is a simple example of using **GraphiQL** directly from a CDN, including the [GraphiQL Explorer plugin](../../packages/graphiql-plugin-explorer/README.md).
44

5-
It uses the latest version published on npm, via unpkg
5+
It loads the latest GraphiQL version from [esm.sh](https://esm.sh), an ESM-based CDN that serves npm packages as ES modules.
66

7-
### Setup
7+
## Setup
88

9-
none required, just open the index.html!
9+
No installation or build step is required — just open the `index.html` file in your browser:
1010

11-
`open index.html` in osx `firefox index.html` or `chromium index.html` in linux
11+
- macOS:
12+
13+
```sh
14+
open index.html
15+
```
16+
17+
- Linux:
18+
19+
```sh
20+
firefox index.html
21+
# or
22+
chromium index.html
23+
```

‎examples/graphiql-cdn/index.html

Lines changed: 63 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,74 +8,83 @@
88
<!doctype html>
99
<html lang="en">
1010
<head>
11-
<title>GraphiQL</title>
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>GraphiQL 4 with React 19 and GraphiQL Explorer</title>
1214
<style>
1315
body {
14-
height: 100%;
1516
margin: 0;
16-
width: 100%;
17-
overflow: hidden;
17+
overflow: hidden; /* in Firefox */
1818
}
1919

2020
#graphiql {
21-
height: 100vh;
21+
height: 100dvh;
2222
}
23-
</style>
24-
<!--
25-
This GraphiQL example depends on Promise and fetch, which are available in
26-
modern browsers, but can be "polyfilled" for older browsers.
27-
GraphiQL itself depends on React DOM.
28-
If you do not want to rely on a CDN, you can host these files locally or
29-
include them directly in your favored resource bundler.
30-
-->
31-
<script
32-
crossorigin
33-
src="https://unpkg.com/react@18/umd/react.production.min.js"
34-
></script>
35-
<script
36-
crossorigin
37-
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
38-
></script>
39-
<!--
40-
These two files can be found in the npm module, however you may wish to
41-
copy them directly into your environment, or perhaps include them in your
42-
favored resource bundler.
43-
-->
44-
<script
45-
src="https://unpkg.com/graphiql/graphiql.min.js"
46-
type="application/javascript"
47-
></script>
48-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
49-
<!--
50-
These are imports for the GraphIQL Explorer plugin.
51-
-->
52-
<script
53-
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
54-
crossorigin
55-
></script>
5623

24+
.loading {
25+
height: 100%;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
font-size: 4rem;
30+
}
31+
</style>
5732
<link
5833
rel="stylesheet"
59-
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
34+
href="https://esm.sh/graphiql@4.0.0-canary-fcd3265c.0/dist/style.css"
6035
/>
61-
</head>
36+
<link
37+
rel="stylesheet"
38+
href="https://esm.sh/@graphiql/[email protected]/dist/style.css"
39+
/>
40+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
41+
<script type="importmap">
42+
{
43+
"imports": {
44+
"react": "https://esm.sh/[email protected]",
45+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
6246

63-
<body>
64-
<div id="graphiql">Loading...</div>
65-
<script>
66-
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
67-
const fetcher = GraphiQL.createFetcher({
68-
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
69-
headers: { 'X-Example-Header': 'foo' },
47+
"react-dom": "https://esm.sh/[email protected]",
48+
"react-dom/client": "https://esm.sh/[email protected]/client",
49+
50+
"graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
51+
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
52+
"@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
53+
54+
"@graphiql/toolkit": "https://esm.sh/@graphiql/[email protected]?standalone&external=graphql",
55+
"graphql": "https://esm.sh/[email protected]"
56+
}
57+
}
58+
</script>
59+
<script type="module">
60+
// Import React and ReactDOM
61+
import React from 'react';
62+
import ReactDOM from 'react-dom/client';
63+
// Import GraphiQL and the Explorer plugin
64+
import { GraphiQL } from 'graphiql';
65+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
66+
import { explorerPlugin } from '@graphiql/plugin-explorer';
67+
68+
const fetcher = createGraphiQLFetcher({
69+
url: 'https://countries.trevorblades.com',
7070
});
71-
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
72-
root.render(
73-
React.createElement(GraphiQL, {
71+
const explorer = explorerPlugin();
72+
73+
function App() {
74+
return React.createElement(GraphiQL, {
7475
fetcher,
75-
defaultEditorToolsVisibility: true,
76-
plugins: [explorerPlugin],
77-
}),
78-
);
76+
plugins: [explorer],
77+
});
78+
}
79+
80+
const container = document.getElementById('graphiql');
81+
const root = ReactDOM.createRoot(container);
82+
root.render(React.createElement(App));
7983
</script>
84+
</head>
85+
<body>
86+
<div id="graphiql">
87+
<div class="loading">Loading…</div>
88+
</div>
8089
</body>
8190
</html>

‎examples/graphiql-parcel/src/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
1717
<title>Parcel React Example</title>
1818

19-
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
19+
<link
20+
rel="stylesheet"
21+
href="https://esm.sh/[email protected]/dist/style.css"
22+
/>
2023
</head>
2124

2225
<body>

‎packages/graphiql-plugin-code-exporter/README.md

Lines changed: 46 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,81 @@
11
# GraphiQL Code Exporter Plugin
22

33
This package provides a plugin that integrates the
4-
[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter)
5-
into the GraphiQL UI.
4+
[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
65

7-
## Install
6+
## Installation
87

9-
Use your favorite package manager to install the package:
8+
Install the plugin using your preferred package manager:
109

1110
```sh
1211
npm install @graphiql/plugin-code-exporter
1312
```
1413

15-
The following packages are peer dependencies, so make sure you have them
16-
installed as well:
14+
Make sure to also install the required peer dependencies:
1715

1816
```sh
1917
npm install react react-dom graphql
2018
```
2119

2220
## Usage
2321

24-
See
25-
[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter)
26-
for all details on available `props` and how to
27-
[create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
22+
Refer to the
23+
[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for full details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
24+
25+
Example integration:
2826

2927
```jsx
30-
import { useState } from 'react';
3128
import { GraphiQL } from 'graphiql';
3229
import { createGraphiQLFetcher } from '@graphiql/toolkit';
3330
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
3431
import 'graphiql/graphiql.css';
3532
import '@graphiql/plugin-code-exporter/dist/style.css';
3633

3734
const fetcher = createGraphiQLFetcher({
38-
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
35+
url: 'https://countries.trevorblades.com',
3936
});
37+
function getQuery(arg, spaceCount = 2) {
38+
const spaces = ' '.repeat(spaceCount);
39+
const { query } = arg.operationDataList[0];
40+
return spaces + query.replaceAll('\n', '\n' + spaces);
41+
}
4042

41-
/**
42-
* Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for
43-
* details
44-
*/
45-
const removeQueryName = query =>
46-
query.replace(
47-
/^[^{(]+([{(])/,
48-
(_match, openingCurlyBracketsOrParenthesis) =>
49-
`query ${openingCurlyBracketsOrParenthesis}`,
50-
);
51-
52-
const getQuery = (arg, spaceCount) => {
53-
const { operationDataList } = arg;
54-
const { query } = operationDataList[0];
55-
const anonymousQuery = removeQueryName(query);
56-
return (
57-
' '.repeat(spaceCount) +
58-
anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount))
59-
);
60-
};
61-
62-
const exampleSnippetOne = {
63-
name: 'Example One',
64-
language: 'JavaScript',
65-
codeMirrorMode: 'jsx',
66-
options: [],
67-
generate: arg => `export const query = graphql\`
68-
${getQuery(arg, 2)}
69-
\`
70-
`,
71-
};
72-
73-
const exampleSnippetTwo = {
74-
name: 'Example Two',
75-
language: 'JavaScript',
76-
codeMirrorMode: 'jsx',
77-
options: [],
78-
generate: arg => `import { graphql } from 'graphql'
79-
80-
export const query = graphql\`
81-
${getQuery(arg, 2)}
82-
\`
83-
`,
84-
};
85-
86-
const snippets = [exampleSnippetOne, exampleSnippetTwo];
87-
88-
const exporter = codeExporterPlugin({
89-
snippets,
90-
codeMirrorTheme: 'graphiql',
43+
const codeExporter = codeExporterPlugin({
44+
/**
45+
* Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details.
46+
*/
47+
snippets: [
48+
{
49+
name: 'Example One',
50+
language: 'JavaScript',
51+
codeMirrorMode: 'jsx',
52+
options: [],
53+
generate: arg =>
54+
['export const query = graphql`', getQuery(arg), '`'].join('\n'),
55+
},
56+
{
57+
name: 'Example Two',
58+
language: 'JavaScript',
59+
codeMirrorMode: 'jsx',
60+
options: [],
61+
generate: arg =>
62+
[
63+
"import { graphql } from 'graphql'",
64+
'',
65+
'export const query = graphql`',
66+
getQuery(arg),
67+
'`',
68+
].join('\n'),
69+
},
70+
],
9171
});
92-
93-
function GraphiQLWithCodeExporter() {
94-
return (
95-
<GraphiQL fetcher={fetcher} defaultQuery={query} plugins={[exporter]} />
96-
);
72+
function App() {
73+
return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />;
9774
}
9875
```
9976

10077
## CDN bundles
10178

102-
You can also use this plugin with `unpkg`, `jsdelivr`, and other CDNs.
79+
You can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).
10380

104-
See the [example HTML file](examples/index.html) for this plugin
81+
See the [CDN example](./example/index.html) for a working demo.

0 commit comments

Comments
 (0)