Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including graphiql-code-exporter with all npm packages installed. Try it out:

require("codemirror/package.json"); // codemirror is a peer dependency. require("graphql/package.json"); // graphql is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var graphiqlCodeExporter = require("graphiql-code-exporter")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

graphiql-code-exporter v3.0.2

Export working code snippets from GraphiQL queries

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.

Bundlesize

Demo

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

Installation

# 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 >

Usage

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({
    query
  })

  render() {
    const { query, codeExporterIsVisible } = this.state

    const codeExporter = codeExporterIsVisible ? (
      <CodeExporter
        hideCodeExporter={this.toggleCodeExporter}
        snippets={snippets}
        serverUrl={serverUrl}
        context={{
          appId: /* APP_ID */
        }}
        headers={{
          Authorization: 'Bearer ' + /* AUTH_TOKEN */
        }}
        query={query}
        // Optional if you want to use a custom theme
        codeMirrorTheme="neo"
      />
    ) : null

    return (
      <Fragment>
        <GraphiQL
          onEditQuery={this.updateQuery}
          query={query}>
          <GraphiQL.Button
            onClick={this.toggleCodeExporter}
            label="Code Exporter"
            title="Toggle Code Exporter"
          />
        </GraphiQL>
        {codeExporter}
      </Fragment>
    )
  }
}

Props

PropertyTypeDescription
hideCodeExporterFunctionA callback function that is called when clicking the close (x) button in the upper right corner of the panel.
serverUrlURIThe server url for your GraphQL endpoint.
querystringA string containing the GraphQL query that is synced with the GraphiQL query editor.
snippetsSnippet[]A list of snippet objects that one can choose from to generate code snippets.
headersObject?An optional object containing app specific HTTP headers
contextObject?An optional object containing any additional keys required to render app specific snippets
codeMirrorThemestring?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')

Snippets

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

KeyTypeDescription
namestringA name that is used to identify the snippet.
languagestringA language string that is used to group the snippets by language.
codeMirrorModestringA valid CodeMirror mode used for syntax highlighting. Make sure to also require the mode (e.g. import 'codemirror/mode/jsx/jsx'
optionsOption[]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.
generateFunctionA function that returns the generated code as a single string. It receives below listed data as an object.
generateCodesandboxFilesFunctionA 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

KeyTypeDescription
serverUrlstringThe passed GraphQL server url
operationsOperation[]A list of GraphQL operations where each operation has the operation keys.
optionsObjectA map of option-boolean pairs providing whether an option is selected or not
headersObject?The headers object that is passed to the CodeExporter component
contextObject?The context object that is passed to the CodeExporter component
Operation
KeyTypeDescription
namestringThe selected GraphQL operation name
type"query" | "mutation"The selected operation's type
querystringA formatted string containing the GraphQL operation
variableNamestringThe operation name but in UPPER_CASE as that's the common way to declare GraphQL operations in JavaScript
operationObjectThe plain GraphQL parser result for this operation
variablesObjectA map of all used variables for this specific operation

Example

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 `
${serverImport}

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 = [
  ...snippets,
  customSnippet
]

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

License

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free