-
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.
feat: Add
@graphiql/plugin-code-exporter
(#2758)
* initial * update cspell * integrate into example * update props * get things working * add styling * add icon, svg example, inline snippets * Update packages/graphiql-plugin-code-exporter/README.md Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com> * Update packages/graphiql-plugin-code-exporter/README.md Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com> * review comments no1 - deduplication - vite bundle config - move package to devDep - remove wrapper react component - eslint thingy * review comments no2 Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com> * css nesting * fix default codeMirrorTheme issue * fix dropdown styles * add doc explorer style resets * adjust width of plugin pane and code exporter editor * add changesets Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com> Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
- Loading branch information
1 parent
1a62b67
commit d63801f
Showing
23 changed files
with
730 additions
and
38 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,5 @@ | ||
--- | ||
'graphiql': patch | ||
--- | ||
|
||
Fix the width of the plugin pane |
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,5 @@ | ||
--- | ||
'@graphiql/plugin-code-exporter': minor | ||
--- | ||
|
||
Add code exported plugin |
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 |
---|---|---|
|
@@ -59,6 +59,8 @@ timsuchanek | |
urigo | ||
wincent | ||
yoshiakis | ||
Leko | ||
LekoArts | ||
|
||
|
||
// packages and tools | ||
|
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 |
---|---|---|
@@ -1,34 +1,93 @@ | ||
import React from 'react'; | ||
import 'regenerator-runtime/runtime.js'; | ||
|
||
import * as React from 'react'; | ||
import { render } from 'react-dom'; | ||
import GraphiQL from 'graphiql'; | ||
import { useExplorerPlugin } from '@graphiql/plugin-explorer'; | ||
import { useExporterPlugin } from '@graphiql/plugin-code-exporter'; | ||
|
||
import 'graphiql/graphiql.css'; | ||
import '@graphiql/plugin-explorer/dist/style.css'; | ||
import '@graphiql/plugin-code-exporter/dist/style.css'; | ||
|
||
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.replace(/\n/g, `\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 App = () => { | ||
const [query, setQuery] = React.useState(''); | ||
const explorerPlugin = useExplorerPlugin({ | ||
query, | ||
onEdit: setQuery, | ||
}); | ||
const exporterPlugin = useExporterPlugin({ | ||
query, | ||
snippets, | ||
}); | ||
|
||
const Logo = () => <span>My Corp</span>; | ||
|
||
// See GraphiQL Readme - Advanced Usage section for more examples like this | ||
GraphiQL.Logo = Logo; | ||
|
||
const App = () => ( | ||
<GraphiQL | ||
style={{ height: '100vh' }} | ||
headerEditorEnabled | ||
fetcher={async (graphQLParams, options) => { | ||
const data = await fetch( | ||
'https://swapi-graphql.netlify.app/.netlify/functions/index', | ||
{ | ||
method: 'POST', | ||
headers: { | ||
Accept: 'application/json', | ||
'Content-Type': 'application/json', | ||
...options.headers, | ||
return ( | ||
<GraphiQL | ||
style={{ height: '100vh' }} | ||
query={query} | ||
onEditQuery={setQuery} | ||
plugins={[explorerPlugin, exporterPlugin]} | ||
fetcher={async (graphQLParams, options) => { | ||
const data = await fetch( | ||
'https://swapi-graphql.netlify.app/.netlify/functions/index', | ||
{ | ||
method: 'POST', | ||
headers: { | ||
Accept: 'application/json', | ||
'Content-Type': 'application/json', | ||
...options.headers, | ||
}, | ||
body: JSON.stringify(graphQLParams), | ||
credentials: 'same-origin', | ||
}, | ||
body: JSON.stringify(graphQLParams), | ||
credentials: 'same-origin', | ||
}, | ||
); | ||
return data.json().catch(() => data.text()); | ||
}} | ||
/> | ||
); | ||
); | ||
return data.json().catch(() => data.text()); | ||
}} | ||
/> | ||
); | ||
}; | ||
|
||
render(<App />, document.getElementById('root')); |
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,3 @@ | ||
{ | ||
"extends": ["plugin:react/jsx-runtime"] | ||
} |
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,25 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
types | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
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 @@ | ||
# @graphiql/plugin-code-exporter |
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,103 @@ | ||
# 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. | ||
|
||
## Install | ||
|
||
Use your favorite package manager to install the package: | ||
|
||
```sh | ||
npm i -S @graphiql/plugin-code-exporter | ||
``` | ||
|
||
The following packages are peer dependencies, so make sure you have them installed as well: | ||
|
||
```sh | ||
npm i -S 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). | ||
|
||
```jsx | ||
import { useCodeExporterPlugin } from '@graphiql/plugin-code-exporter'; | ||
import { createGraphiQLFetcher } from '@graphiql/toolkit'; | ||
import { GraphiQL } from 'graphiql'; | ||
import { useState } from 'react'; | ||
|
||
import 'graphiql/graphiql.css'; | ||
import '@graphiql/plugin-code-exporter/dist/style.css'; | ||
|
||
const fetcher = createGraphiQLFetcher({ | ||
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index', | ||
}); | ||
|
||
/* | ||
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.replace(/\n/g, `\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]; | ||
|
||
function GraphiQLWithExplorer() { | ||
const [query, setQuery] = useState(DEFAULT_QUERY); | ||
const exporterPlugin = useCodeExporterPlugin({ | ||
query, | ||
snippets, | ||
codeMirrorTheme: 'graphiql', | ||
}); | ||
return ( | ||
<GraphiQL | ||
fetcher={fetcher} | ||
query={query} | ||
onEditQuery={setQuery} | ||
plugins={[exporterPlugin]} | ||
/> | ||
); | ||
} | ||
``` | ||
|
||
## CDN bundles | ||
|
||
You can also use this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this. |
Oops, something went wrong.