diff --git a/.changeset/chatty-spoons-accept.md b/.changeset/chatty-spoons-accept.md new file mode 100644 index 00000000000..64f5e3bab15 --- /dev/null +++ b/.changeset/chatty-spoons-accept.md @@ -0,0 +1,8 @@ +--- +'@graphiql/plugin-code-exporter': minor +'@graphiql/plugin-explorer': minor +'@graphiql/react': minor +'graphiql': minor +--- + +Update GraphiQL CDN example using ESM-based CDN esm.sh diff --git a/docs/migration/graphiql-4.0.0.md b/docs/migration/graphiql-4.0.0.md index 4819b812658..09439975d21 100644 --- a/docs/migration/graphiql-4.0.0.md +++ b/docs/migration/graphiql-4.0.0.md @@ -5,6 +5,7 @@ - Drop CommonJS build output - Drop support React 16/17 - Support React 19 +- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN. ## `@graphiql/react` changes @@ -18,9 +19,13 @@ - Drop CommonJS build output - Drop support React 16/17 - Support React 19 +- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN. +- [Updated CDN ESM-based example](../../packages/graphiql-plugin-code-exporter/example/index.html) ## `@graphiql/plugin-explorer` changes - Drop CommonJS build output - Drop support React 16/17 - Support React 19 +- ⚠️ UMD CDN build `index.umd.js` is deprecated. Migrate to ESM-based CDN. +- [Updated CDN ESM-based example](../../packages/graphiql-plugin-explorer/example/index.html) diff --git a/examples/graphiql-cdn/README.md b/examples/graphiql-cdn/README.md index 51573e9581b..62e87a67b35 100644 --- a/examples/graphiql-cdn/README.md +++ b/examples/graphiql-cdn/README.md @@ -1,11 +1,23 @@ # GraphiQL CDN Example -This example uses the CDN bundles to show a simple graphiql example, with explorer plugin. +This is a simple example of using **GraphiQL** directly from a CDN, including the [GraphiQL Explorer plugin](../../packages/graphiql-plugin-explorer/README.md). -It uses the latest version published on npm, via unpkg +It loads the latest GraphiQL version from [esm.sh](https://esm.sh), an ESM-based CDN that serves npm packages as ES modules. -### Setup +## Setup -none required, just open the index.html! +No installation or build step is required — just open the `index.html` file in your browser: -`open index.html` in osx `firefox index.html` or `chromium index.html` in linux +- macOS: + + ```sh + open index.html + ``` + +- Linux: + + ```sh + firefox index.html + # or + chromium index.html + ``` diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html index 13bad1a3a3d..cb760ed24e8 100644 --- a/examples/graphiql-cdn/index.html +++ b/examples/graphiql-cdn/index.html @@ -8,74 +8,83 @@ - GraphiQL + + + GraphiQL 4 with React 19 and GraphiQL Explorer - - - - - - - - + .loading { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + } + - + + + + + + +
+
Loading…
+
diff --git a/examples/graphiql-parcel/src/index.html b/examples/graphiql-parcel/src/index.html index 936537cbb0d..6662d55cae1 100644 --- a/examples/graphiql-parcel/src/index.html +++ b/examples/graphiql-parcel/src/index.html @@ -16,7 +16,10 @@ Parcel React Example - + diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md index 40764460285..51f0c0eb9fb 100644 --- a/packages/graphiql-plugin-code-exporter/README.md +++ b/packages/graphiql-plugin-code-exporter/README.md @@ -1,19 +1,17 @@ # GraphiQL Code Exporter Plugin This package provides a plugin that integrates the -[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) -into the GraphiQL UI. +[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI. -## Install +## Installation -Use your favorite package manager to install the package: +Install the plugin using your preferred package manager: ```sh npm install @graphiql/plugin-code-exporter ``` -The following packages are peer dependencies, so make sure you have them -installed as well: +Make sure to also install the required peer dependencies: ```sh npm install react react-dom graphql @@ -21,13 +19,12 @@ npm install react react-dom graphql ## Usage -See -[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) -for all details on available `props` and how to -[create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets). +Refer to the +[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). + +Example integration: ```jsx -import { useState } from 'react'; import { GraphiQL } from 'graphiql'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; @@ -35,70 +32,50 @@ import 'graphiql/graphiql.css'; import '@graphiql/plugin-code-exporter/dist/style.css'; const fetcher = createGraphiQLFetcher({ - url: 'https://swapi-graphql.netlify.app/.netlify/functions/index', + url: 'https://countries.trevorblades.com', }); +function getQuery(arg, spaceCount = 2) { + const spaces = ' '.repeat(spaceCount); + const { query } = arg.operationDataList[0]; + return spaces + query.replaceAll('\n', '\n' + spaces); +} -/** - * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for - * details - */ -const removeQueryName = query => - query.replace( - /^[^{(]+([{(])/, - (_match, openingCurlyBracketsOrParenthesis) => - `query ${openingCurlyBracketsOrParenthesis}`, - ); - -const getQuery = (arg, spaceCount) => { - const { operationDataList } = arg; - const { query } = operationDataList[0]; - const anonymousQuery = removeQueryName(query); - return ( - ' '.repeat(spaceCount) + - anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount)) - ); -}; - -const exampleSnippetOne = { - name: 'Example One', - language: 'JavaScript', - codeMirrorMode: 'jsx', - options: [], - generate: arg => `export const query = graphql\` -${getQuery(arg, 2)} -\` -`, -}; - -const exampleSnippetTwo = { - name: 'Example Two', - language: 'JavaScript', - codeMirrorMode: 'jsx', - options: [], - generate: arg => `import { graphql } from 'graphql' - -export const query = graphql\` -${getQuery(arg, 2)} -\` -`, -}; - -const snippets = [exampleSnippetOne, exampleSnippetTwo]; - -const exporter = codeExporterPlugin({ - snippets, - codeMirrorTheme: 'graphiql', +const codeExporter = codeExporterPlugin({ + /** + * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details. + */ + snippets: [ + { + name: 'Example One', + language: 'JavaScript', + codeMirrorMode: 'jsx', + options: [], + generate: arg => + ['export const query = graphql`', getQuery(arg), '`'].join('\n'), + }, + { + name: 'Example Two', + language: 'JavaScript', + codeMirrorMode: 'jsx', + options: [], + generate: arg => + [ + "import { graphql } from 'graphql'", + '', + 'export const query = graphql`', + getQuery(arg), + '`', + ].join('\n'), + }, + ], }); - -function GraphiQLWithCodeExporter() { - return ( - - ); +function App() { + return ; } ``` ## CDN bundles -You can also use this plugin with `unpkg`, `jsdelivr`, and other CDNs. +You can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh). -See the [example HTML file](examples/index.html) for this plugin +See the [CDN example](./example/index.html) for a working demo. diff --git a/packages/graphiql-plugin-code-exporter/example/index.html b/packages/graphiql-plugin-code-exporter/example/index.html new file mode 100644 index 00000000000..d08d372cf1d --- /dev/null +++ b/packages/graphiql-plugin-code-exporter/example/index.html @@ -0,0 +1,126 @@ + + + + + + + GraphiQL 4 with React 19 and GraphiQL Code Exporter + + + + + + + + +
+
Loading…
+
+ + diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html deleted file mode 100644 index 9011e9c4022..00000000000 --- a/packages/graphiql-plugin-code-exporter/examples/index.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - - - - - - -
Loading...
- - - - - - - - - - diff --git a/packages/graphiql-plugin-explorer/README.md b/packages/graphiql-plugin-explorer/README.md index 69bcbad7eb6..1b2f33eee3e 100644 --- a/packages/graphiql-plugin-explorer/README.md +++ b/packages/graphiql-plugin-explorer/README.md @@ -1,19 +1,17 @@ # GraphiQL Explorer Plugin -This package provides a plugin that integrated the -[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the -GraphiQL UI. +This package provides a plugin that integrates the +[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI. -## Install +## Installation -Use your favorite package manager to install the package: +Use your preferred package manager to install the plugin: ```sh npm install @graphiql/plugin-explorer ``` -The following packages are peer dependencies, so make sure you have them -installed as well: +Make sure to also install the required peer dependencies: ```sh npm install react react-dom graphql @@ -25,7 +23,7 @@ npm install react react-dom graphql import { GraphiQL } from 'graphiql'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { explorerPlugin } from '@graphiql/plugin-explorer'; -import 'graphiql/graphiql.css'; +import 'graphiql/style.css'; import '@graphiql/plugin-explorer/dist/style.css'; const fetcher = createGraphiQLFetcher({ @@ -42,6 +40,6 @@ function GraphiQLWithExplorer() { ## CDN bundles -You can also use this plugin with `unpkg`, `jsdelivr`, and other CDNs. +You can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh). -See the [example HTML file](examples/index.html) for this plugin +See the [CDN example](./example/index.html) for a working demo. diff --git a/packages/graphiql-plugin-explorer/example/index.html b/packages/graphiql-plugin-explorer/example/index.html new file mode 120000 index 00000000000..3236e5b32d2 --- /dev/null +++ b/packages/graphiql-plugin-explorer/example/index.html @@ -0,0 +1 @@ +../../../examples/graphiql-cdn/index.html \ No newline at end of file diff --git a/packages/graphiql-plugin-explorer/examples/index.html b/packages/graphiql-plugin-explorer/examples/index.html deleted file mode 100644 index 9e93f7aa6d8..00000000000 --- a/packages/graphiql-plugin-explorer/examples/index.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - -
Loading...
- - - - - - - - - - diff --git a/packages/graphiql/README.md b/packages/graphiql/README.md index 817cf6a3171..d851dfee0c9 100644 --- a/packages/graphiql/README.md +++ b/packages/graphiql/README.md @@ -45,8 +45,7 @@ _/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE. ## Examples -- [`Unpkg (CDN)`](../../examples/graphiql-cdn) - A single HTML file using CDN - assets and a script tag +- [`CDN (ESM-based)`](../../examples/graphiql-cdn) - A single HTML file using [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs and a ` -``` +Use the modern, ESM-based CDN approach. +See the [ESM-based example](../../examples/graphiql-cdn) for setup details. + +#### UMD (deprecated) -(see: Usage UMD Bundle below for more required script tags) +> [!WARNING] +> +> The UMD CDN build is **deprecated** and will be removed in a future major release of GraphiQL. +> Please migrate to the [ESM-based example](../../examples/graphiql-cdn). ## Usage @@ -96,7 +98,7 @@ may return a `Promise` for queries or mutations, but also an `Observable` or an An easy way to get create such a function is the [`createGraphiQLFetcher`](../graphiql-toolkit/src/create-fetcher/createFetcher.ts) method exported from the `@graphiql/toolkit` package. If you want to implement -your own fetcher function you can use the `Fetcher` type from +your own fetcher function, you can use the `Fetcher` type from `@graphiql/toolkit` to make sure the signature matches what GraphiQL expects. The following is everything you need to render GraphiQL in your React @@ -105,9 +107,8 @@ application: ```jsx import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { GraphiQL } from 'graphiql'; -import React from 'react'; import { createRoot } from 'react-dom/client'; -import 'graphiql/graphiql.css'; +import 'graphiql/style.css'; const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' }); @@ -115,12 +116,6 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -### Using as UMD bundle over CDN (Unpkg, JSDelivr, etc) - -There exist pre-bundled static assets that allow you to easily render GraphiQL -just by putting together a single HTML file. Check out the `index.html` file in -the [example project](../../examples/graphiql-cdn) in this repository. - ## Customize GraphiQL supports customization in UI and behavior by accepting React props and diff --git a/resources/custom-words.txt b/resources/custom-words.txt index b0cdc08e42f..b8529d73ece 100644 --- a/resources/custom-words.txt +++ b/resources/custom-words.txt @@ -95,6 +95,7 @@ hola htmling hurrell hyohyeon +importmap ical imolorhe inno