{"id":13516990,"url":"https://github.com/OneGraph/graphiql-code-exporter","last_synced_at":"2025-03-31T07:30:48.488Z","repository":{"id":34869974,"uuid":"166218395","full_name":"OneGraph/graphiql-code-exporter","owner":"OneGraph","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-09T01:46:29.000Z","size":10200,"stargazers_count":82,"open_issues_count":22,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T20:45:10.695Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OneGraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-17T11:58:35.000Z","updated_at":"2025-02-02T00:36:53.000Z","dependencies_parsed_at":"2023-01-15T10:00:41.780Z","dependency_job_id":null,"html_url":"https://github.com/OneGraph/graphiql-code-exporter","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneGraph%2Fgraphiql-code-exporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneGraph%2Fgraphiql-code-exporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneGraph%2Fgraphiql-code-exporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneGraph%2Fgraphiql-code-exporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OneGraph","download_url":"https://codeload.github.com/OneGraph/graphiql-code-exporter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246432913,"owners_count":20776484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:01:28.221Z","updated_at":"2025-03-31T07:30:43.478Z","avatar_url":"https://github.com/OneGraph.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Code Exporter for GraphiQL\n\nA GraphiQL addon that generates ready-to-run code for your queries and mutations.  \nIt provides a wide range of default snippets, but is also extendable with custom snippets.\n\n[![Bundlesize](https://badgen.net/bundlephobia/minzip/graphiql-code-exporter?color=green\u0026icon=npm)](https://bundlephobia.com/result?p=graphiql-code-exporter)\n\n![Demo](demo.gif)\n\n\u003e Read the [introduction blog post](https://www.onegraph.com/blog/2019/05/03_Filling_in_the_GraphQL_Pipeline_Ready_to_use_code_generation.html) to learn why and how we built it!\n\n## Installation\n\n```sh\n# yarn\nyarn add graphiql-code-exporter\n\n# npm\nnpm i --save graphiql-code-exporter\n```\n\n## Built-in Snippets\n\n- **JavaScript**\n  - fetch\n  - react-apollo\n\n[ \u003c your favorite language/framework/library \u003e ](https://github.com/OneGraph/graphiql-code-exporter/pulls)\n\n## Usage\n\n```javascript\nimport React, { Component, Fragment } from 'react'\nimport GraphiQL from 'graphiql'\nimport CodeExporter from 'graphiql-code-exporter'\nimport 'graphiql-code-exporter/CodeExporter.css';\n\n// Optional if you want to use a custom theme\nimport 'codemirror/theme/neo.css';\n\nconst serverUrl = /* your server url here */\n\nexport default class GraphiQLWithCodeExporter extends Component {\n  state = {\n    codeExporterIsVisible: false,\n    query: ''\n  }\n\n  toggleCodeExporter = () =\u003e this.setState({\n    codeExporterIsVisible: !this.state.codeExporterIsVisible\n  })\n\n  updateQuery = query =\u003e this.setState({\n    query\n  })\n\n  render() {\n    const { query, codeExporterIsVisible } = this.state\n\n    const codeExporter = codeExporterIsVisible ? (\n      \u003cCodeExporter\n        hideCodeExporter={this.toggleCodeExporter}\n        snippets={snippets}\n        serverUrl={serverUrl}\n        context={{\n          appId: /* APP_ID */\n        }}\n        headers={{\n          Authorization: 'Bearer ' + /* AUTH_TOKEN */\n        }}\n        query={query}\n        // Optional if you want to use a custom theme\n        codeMirrorTheme=\"neo\"\n      /\u003e\n    ) : null\n\n    return (\n      \u003cFragment\u003e\n        \u003cGraphiQL\n          onEditQuery={this.updateQuery}\n          query={query}\u003e\n          \u003cGraphiQL.Button\n            onClick={this.toggleCodeExporter}\n            label=\"Code Exporter\"\n            title=\"Toggle Code Exporter\"\n          /\u003e\n        \u003c/GraphiQL\u003e\n        {codeExporter}\n      \u003c/Fragment\u003e\n    )\n  }\n}\n```\n\n## Props\n\n| Property         | Type        | Description                                                                                                                                                                                               |\n| ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| hideCodeExporter | _Function_  | A callback function that is called when clicking the close (x) button in the upper right corner of the panel.                                                                                             |\n| serverUrl        | _URI_       | The server url for your GraphQL endpoint.                                                                                                                                                                 |\n| query            | _string_    | A string containing the GraphQL query that is synced with the GraphiQL query editor.                                                                                                                      |\n| snippets         | _Snippet[]_ | A list of snippet objects that one can choose from to generate code snippets.                                                                                                                             |\n| headers          | _Object?_   |  An optional object containing app specific HTTP headers                                                                                                                                                  |\n| context          | _Object?_   |  An optional object containing any additional keys required to render app specific snippets                                                                                                               |\n| codeMirrorTheme  | _string?_   | The name of the [CodeMirror theme](https://codemirror.net/demo/theme.html) 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')` |\n\n## Snippets\n\nWhat we call **snippet** here, is actually an object with 4 required keys.\n\n| Key                      | Type       | Description                                                                                                                                                       |\n|--------------------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| name                     | _string_   | A name that is used to identify the snippet.                                                                                                                      |\n| language                 | _string_   | A language string that is used to group the snippets by language.                                                                                                 |\n| codeMirrorMode           | _string_   | A valid [CodeMirror mode](https://codemirror.net/mode/) used for syntax highlighting. Make sure to also require the mode (e.g. `import 'codemirror/mode/jsx/jsx'` |\n| 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.      |\n| generate                 | _Function_ | A function that returns the generated code as a single string. It receives below listed data as an object.                                                        |\n| 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.     |\n\n#### Snippet Data\n\n| Key        | Type          |  Description                                                                            |\n| ---------- | ------------- | --------------------------------------------------------------------------------------- |\n| serverUrl  | _string_      | The passed GraphQL server url                                                           |\n| operations | _Operation[]_ | A list of GraphQL operations where each operation has the [operation](#operation) keys. |\n| options    | *Object*      | A map of option-boolean pairs providing whether an option is selected or not            |\n| headers    | _Object?_     | The `headers` object that is passed to the CodeExporter component                       |\n| context    | _Object?_     | The `context` object that is passed to the CodeExporter component                       |\n\n##### Operation\n\n| Key          |  Type                   | Description                                                                                               |\n| ------------ | ----------------------- | --------------------------------------------------------------------------------------------------------- |\n| name         | _string_                | The selected GraphQL operation name                                                                       |\n| type         | _\"query\" \\| \"mutation\"_ | The selected operation's type                                                                             |\n| query        |  *string*               |  A formatted string containing the GraphQL operation                                                      |   |\n| variableName | _string_                | The operation name but in UPPER_CASE as that's the common way to declare GraphQL operations in JavaScript |\n| operation    | _Object_                | The plain GraphQL parser result for this operation                                                        |\n| variables    | _Object_                |  A map of all used variables for this specific operation                                                  |\n\n#### Example\n\nThe following example implements a subset of the built-in _Fetch API_ snippet.  \nThe output will look similar to the demo above.\n\n```javascript\nconst fetchSnippet = {\n  language: 'JavaScript',\n  prismLanguage: 'javascript',\n  name: 'Fetch API',\n  options: [\n    {\n      id: 'server',\n      label: 'server-side usage',\n      initial: false,\n    },\n  ],\n  generate: ({serverUrl, operations, options}) =\u003e {\n    // we only render the first operation here\n    const {query} = operations[0];\n\n    const serverImport = options.server\n      ? 'import { fetch } from \"node-fetch\"'\n      : '';\n\n    return `\n${serverImport}\n\nconst res = await fetch(\"${serverUrl}\", {\n  method: 'POST',\n  body: JSON.stringify({ query: \\`${query}\\` }),\n})\nconst { errors, data } = await res.json()\n\n// Do something with the response\nconsole.log(data, errors)\n`;\n  },\n};\n```\n\n#### Extending the built-in snippets\n\nIf we want to use both custom and all the built-in snippets, we can import them from npm.\n\n```javascript\nimport snippets from 'graphiql-code-exporter/lib/snippets'\n\nconst customSnippet = /* custom snippet */\n\nconst extendedSnippets = [\n  ...snippets,\n  customSnippet\n]\n```\n\nThis is also useful if you want to filter or modify single snippets.\n\n## License\n\ngraphiql-code-exporter is licensed under the [MIT License](http://opensource.org/licenses/MIT).\u003cbr\u003e\nDocumentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).\u003cbr\u003e\nCreated with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOneGraph%2Fgraphiql-code-exporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOneGraph%2Fgraphiql-code-exporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOneGraph%2Fgraphiql-code-exporter/lists"}