This package provides a plugin that integrates the GraphiQL Code Exporter into the GraphiQL UI.
Install the plugin using your preferred package manager:
npm install @graphiql/plugin-code-exporter
Make sure to also install the required peer dependencies:
npm install react react-dom graphql
Refer to the GraphiQL Code Exporter README for full details on available props and how to create snippets.
props
Example integration:
import { GraphiQL } from 'graphiql'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; import 'graphiql/style.css'; import '@graphiql/plugin-code-exporter/style.css'; const fetcher = createGraphiQLFetcher({ 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); } 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 App() { return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />; }
You can also use this plugin via an ESM-based CDN like esm.sh.
See the CDN example for a working demo.
Generated using TypeDoc
GraphiQL Code Exporter Plugin
This package provides a plugin that integrates the GraphiQL Code Exporter into the GraphiQL UI.
Installation
Install the plugin using your preferred package manager:
Make sure to also install the required peer dependencies:
Usage
Refer to the GraphiQL Code Exporter README for full details on available
props
and how to create snippets.Example integration:
import { GraphiQL } from 'graphiql'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; import 'graphiql/style.css'; import '@graphiql/plugin-code-exporter/style.css'; const fetcher = createGraphiQLFetcher({ 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); } 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 App() { return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />; }
CDN bundles
You can also use this plugin via an ESM-based CDN like esm.sh.
See the CDN example for a working demo.