-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[graphiql] fix #2859, graphiql plugin lifecycle bugs, simplify plugins (
#3330) - simplify plugin development - simplify plugin implementation - fix #2859 cursor jumping issue - drop the `use` prefix, because they should not be invoked as react hooks, but widely used eslint rules will assume they are hooks - update examples for 0.2.0 breaking change - consistent naming - `@graphiql/plugin-code-exporter` -> exports `codeExporterPlugin()` module - `@graphiql/plugin-explorer` -> exports `explorerPlugin()` module
- Loading branch information
Showing
17 changed files
with
1,380 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| --- | ||
| '@graphiql/plugin-code-exporter': minor | ||
| '@graphiql/plugin-explorer': minor | ||
| --- | ||
|
|
||
| **BREAKING CHANGE**: fix lifecycle issue in plugin-explorer, change implementation pattern | ||
|
|
||
| `value` and `setValue` is no longer an implementation detail, and are handled internally by plugins. | ||
| the plugin signature has changed slightly as well. | ||
|
|
||
| now, instead of something like this: | ||
|
|
||
| ```js | ||
| import { useExplorerPlugin } from '@graphiql/plugin-explorer'; | ||
| import { snippets } from './snippets'; | ||
| import { useExporterPlugin } from '@graphiql/plugin-code-exporter'; | ||
|
|
||
| const App = () => { | ||
| const [query, setQuery] = React.useState(''); | ||
| const explorerPlugin = useExplorerPlugin({ | ||
| query, | ||
| onEdit: setQuery, | ||
| }); | ||
| const codeExporterPlugin = useExporterPlugin({ | ||
| query, | ||
| snippets, | ||
| }); | ||
|
|
||
| const plugins = React.useMemo( | ||
| () => [explorerPlugin, codeExporterPlugin], | ||
| [explorerPlugin, codeExporterPlugin], | ||
| ); | ||
|
|
||
| return ( | ||
| <GraphiQL | ||
| query={query} | ||
| onEditQuery={setQuery} | ||
| plugins={plugins} | ||
| fetcher={fetcher} | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| you can just do this: | ||
|
|
||
| ```js | ||
| import { explorerPlugin } from '@graphiql/plugin-explorer'; | ||
| import { snippets } from './snippets'; | ||
| import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; | ||
| import { createGraphiQLFetcher } from '@graphiql/toolkit' | ||
|
|
||
| // only invoke these inside the component lifecycle | ||
| // if there are dynamic values, and then use useMemo() (see below) | ||
| const explorer = explorerPlugin(); | ||
| const exporter = codeExporterPlugin({ snippets }); | ||
|
|
||
| const fetcher = createGraphiQLFetcher({ url: '/graphql' }) | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <GraphiQL | ||
| plugins={[explorer, exporter]} | ||
| fetcher={fetcher} | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| or this, for more complex state-driven needs: | ||
|
|
||
| ```js | ||
| import { useMemo } from 'react' | ||
| import { explorerPlugin } from '@graphiql/plugin-explorer'; | ||
| import { snippets } from './snippets'; | ||
| import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; | ||
|
|
||
| const explorer = explorerPlugin(); | ||
| const fetcher = createGraphiQLFetcher({ url: '/graphql' }) | ||
|
|
||
| const App = () => { | ||
| const {snippets} = useMyUserSuppliedState() | ||
| const exporter = useMemo(() => codeExporterPlugin({ snippets }), [snippets]) | ||
|
|
||
| return ( | ||
| <GraphiQL | ||
| plugins={[explorer, exporter]} | ||
| fetcher={fetcher} | ||
| /> | ||
| ); | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| 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)} | ||
| \` | ||
| `, | ||
| }; | ||
|
|
||
| export const snippets = [exampleSnippetOne, exampleSnippetTwo]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.