2.0.8 • Public • Published

    Code Exporter for GraphiQL

    A GraphiQL addon that generates ready-to-run code for your queries and mutations.
    It provides a wide range of default snippets, but is also extendable with custom snippets.



    Read the introduction blog post to learn why and how we built it!


    # yarn
    yarn add graphiql-code-exporter
    # npm
    npm i --save graphiql-code-exporter

    Built-in Snippets

    • JavaScript
      • fetch
      • react-apollo

    < your favorite language/framework/library >


    import React, { Component, Fragment } from 'react'
    import GraphiQL from 'graphiql'
    import CodeExporter from 'graphiql-code-exporter'
    import 'graphiql-code-exporter/CodeExporter.css';
    // Optional if you want to use a custom theme
    import 'codemirror/theme/neo.css';
    const serverUrl = /* your server url here */
    export default class GraphiQLWithCodeExporter extends Component {
      state = {
        codeExporterIsVisible: false,
        query: ''
      toggleCodeExporter = () => this.setState({
        codeExporterIsVisible: !this.state.codeExporterIsVisible
      updateQuery = query => this.setState({
      render() {
        const { query, codeExporterIsVisible } = this.state
        const codeExporter = codeExporterIsVisible ? (
              appId: /* APP_ID */
              Authorization: 'Bearer ' + /* AUTH_TOKEN */
            // Optional if you want to use a custom theme
        ) : null
        return (
                label="Code Exporter"
                title="Toggle Code Exporter"


    Property Type Description
    hideCodeExporter Function A callback function that is called when clicking the close (x) button in the upper right corner of the panel.
    serverUrl URI The server url for your GraphQL endpoint.
    query string A string containing the GraphQL query that is synced with the GraphiQL query editor.
    snippets Snippet[] A list of snippet objects that one can choose from to generate code snippets.
    headers Object?  An optional object containing app specific HTTP headers
    context Object?  An optional object containing any additional keys required to render app specific snippets
    codeMirrorTheme string? The name of the CodeMirror theme you'd like to use e.g. neo. Make sure to also import the theme's css in your code (e.g. import 'codemirror/theme/neo.css')


    What we call snippet here, is actually an object with 4 required keys.

    Key Type Description
    name string A name that is used to identify the snippet.
    language string A language string that is used to group the snippets by language.
    codeMirrorMode string A valid CodeMirror mode used for syntax highlighting. Make sure to also require the mode (e.g. import 'codemirror/mode/jsx/jsx'
    options Option[] Options are rendered as checkboxes and can be used to customize snippets. They must have an unique id, a label and an initial value of either true or false.
    generate Function A function that returns the generated code as a single string. It receives below listed data as an object.
    generateCodesandboxFiles Function A function that returns a set of codesandbox files, e.g. {'index.js': {content: 'console.log("hello world")'}}. It receives below listed data as an object.

    Snippet Data

    Key Type  Description
    serverUrl string The passed GraphQL server url
    operations Operation[] A list of GraphQL operations where each operation has the operation keys.
    options Object  A map of option-boolean pairs providing whether an option is selected or not
    headers Object? The headers object that is passed to the CodeExporter component
    context Object? The context object that is passed to the CodeExporter component
    Key  Type Description
    name string The selected GraphQL operation name
    type "query" | "mutation" The selected operation's type
    query  string  A formatted string containing the GraphQL operation
    variableName string The operation name but in UPPER_CASE as that's the common way to declare GraphQL operations in JavaScript
    operation Object The plain GraphQL parser result for this operation
    variables Object  A map of all used variables for this specific operation


    The following example implements a subset of the built-in Fetch API snippet.
    The output will look similar to the demo above.

    const fetchSnippet = {
      language: 'JavaScript',
      prismLanguage: 'javascript',
      name: 'Fetch API',
      options: [
          id: 'server',
          label: 'server-side usage',
          initial: false,
      generate: ({serverUrl, operations, options}) => {
        // we only render the first operation here
        const {query} = operations[0];
        const serverImport = options.server
          ? 'import { fetch } from "node-fetch"'
          : '';
        return `
    const res = await fetch("${serverUrl}", {
      method: 'POST',
      body: JSON.stringify({ query: \`${query}\` }),
    const { errors, data } = await res.json()
    // Do something with the response
    console.log(data, errors)

    Extending the built-in snippets

    If we want to use both custom and all the built-in snippets, we can import them from npm.

    import snippets from 'graphiql-code-exporter/lib/snippets'
    const customSnippet = /* custom snippet */
    const extendedSnippets = [

    This is also useful if you want to filter or modify single snippets.


    graphiql-code-exporter is licensed under the MIT License.
    Documentation is licensed under Creative Common License.
    Created with by @rofrischmann and all the great contributors.


    npm i @dww/graphiql-code-exporter

    DownloadsWeekly Downloads






    Unpacked Size

    304 kB

    Total Files


    Last publish


    • dww