Package graphiql-plugin-code-exporter
Functions
codeExporterPlugin
- codeExporterPlugin(props: GraphiQLCodeExporterPluginProps): GraphiQLPlugin
-
Parameters
-
props: GraphiQLCodeExporterPluginProps
codeExporterPlugin
- codeExporterPlugin(props: GraphiQLCodeExporterPluginProps): GraphiQLPlugin
-
Parameters
-
props: GraphiQLCodeExporterPluginProps
GraphiQL Code Exporter Plugin
This package provides a plugin that integrates the GraphiQL Code Exporter into the GraphiQL UI.
Install
Use your favorite package manager to install the package:
The following packages are peer dependencies, so make sure you have them installed as well:
Usage
See GraphiQL Code Exporter README for all details on available
props
and how to create snippets.import { useState } from 'react'; import { GraphiQL } from 'graphiql'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { codeExporterPlugin } from '@graphiql/plugin-code-exporter'; 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.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', }); function GraphiQLWithCodeExporter() { return ( <GraphiQL fetcher={fetcher} defaultQuery={query} plugins={[exporter]} /> ); }
CDN bundles
You can also use this plugin with
unpkg
,jsdelivr
, and other CDNs.See the example HTML file for this plugin