{"id":13469697,"url":"https://github.com/graphql-kit/graphql-voyager","last_synced_at":"2025-05-12T05:16:13.358Z","repository":{"id":37808191,"uuid":"75088956","full_name":"graphql-kit/graphql-voyager","owner":"graphql-kit","description":"🛰️ Represent any GraphQL API as an interactive graph","archived":false,"fork":false,"pushed_at":"2025-03-11T18:14:42.000Z","size":63379,"stargazers_count":7910,"open_issues_count":103,"forks_count":529,"subscribers_count":96,"default_branch":"main","last_synced_at":"2025-05-12T00:59:46.871Z","etag":null,"topics":["api-documentation","graphql","graphql-tools","graphviz","visualization"],"latest_commit_sha":null,"homepage":"https://graphql-kit.com/graphql-voyager/","language":"TypeScript","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/graphql-kit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"graphql-voyager"}},"created_at":"2016-11-29T14:26:53.000Z","updated_at":"2025-05-11T21:39:21.000Z","dependencies_parsed_at":"2023-12-23T19:06:15.216Z","dependency_job_id":"5cf68f45-add0-4925-bd73-8d7d823ebce6","html_url":"https://github.com/graphql-kit/graphql-voyager","commit_stats":{"total_commits":784,"total_committers":33,"mean_commits":"23.757575757575758","dds":"0.32908163265306123","last_synced_commit":"b0ead3ec2459a4460090b3618324ce75000c17d8"},"previous_names":["ivangoncharov/graphql-voyager","apis-guru/graphql-voyager"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-kit%2Fgraphql-voyager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-kit%2Fgraphql-voyager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-kit%2Fgraphql-voyager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-kit%2Fgraphql-voyager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphql-kit","download_url":"https://codeload.github.com/graphql-kit/graphql-voyager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253657873,"owners_count":21943384,"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":["api-documentation","graphql","graphql-tools","graphviz","visualization"],"created_at":"2024-07-31T15:01:51.305Z","updated_at":"2025-05-12T05:16:13.330Z","avatar_url":"https://github.com/graphql-kit.png","language":"TypeScript","funding_links":["https://opencollective.com/graphql-voyager"],"categories":["TypeScript","graphql","前端开发框架及项目"],"sub_categories":["多工具库支持或纯JS"],"readme":"# GraphQL Voyager\n\n![graphql-voyager logo](./docs/cover.png)\n\nRepresent any GraphQL API as an interactive graph. It's time to finally see **the graph** behind GraphQL.\nYou can also explore number of public GraphQL APIs from [our list](https://github.com/graphql-kit/graphql-apis).\n\n\u003e With graphql-voyager you can visually explore your GraphQL API as an interactive graph. This is a great tool when designing or discussing your data model. It includes multiple example GraphQL schemas and also allows you to connect it to your own GraphQL endpoint. What are you waiting for, explore your API!\n\n_[GraphQL Weekly #42](https://graphqlweekly.com/issues/42)_\n\n## [Live Demo](https://graphql-kit.com/graphql-voyager/)\n\n[![voyager demo](./docs/demo-gif.gif)](https://graphql-kit.com/graphql-voyager/)\n\n## Features\n\n- Quick navigation on graph\n- Left panel which provides more detailed information about every type\n- \"Skip Relay\" option that simplifies graph by removing Relay wrapper classes\n- Ability to choose any type to be a root of the graph\n\n## API\n\nGraphQL Voyager exports `Voyager` React component and helper `init` function. If used without\nmodule system it is exported as `GraphQLVoyager` global variable.\n\n### Properties\n\n`Voyager` component accepts the following properties:\n\n- `introspection` [`object`] - the server introspection response. If `function` is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return `Promise` which resolves to introspection response object.\n- `displayOptions` _(optional)_\n  - `displayOptions.skipRelay` [`boolean`, default `true`] - skip relay-related entities\n  - `displayOptions.skipDeprecated` [`boolean`, default `true`] - skip deprecated fields and entities that contain only deprecated fields.\n  - `displayOptions.rootType` [`string`] - name of the type to be used as a root\n  - `displayOptions.sortByAlphabet` [`boolean`, default `false`] - sort fields on graph by alphabet\n  - `displayOptions.showLeafFields` [`boolean`, default `true`] - show all scalars and enums\n  - `displayOptions.hideRoot` [`boolean`, default `false`] - hide the root type\n- `allowToChangeSchema` [`boolean`, default `false`] - allow users to change schema\n- `hideDocs` [`boolean`, default `false`] - hide the docs sidebar\n- `hideSettings` [`boolean`, default `false`] - hide settings panel\n- `hideVoyagerLogo` [`boolean`, default `true`] - hide voyager logo\n\n## Using pre-bundled version\n\nYou can get GraphQL Voyager bundle from the following places:\n\n- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/graphql-voyager/badge)](https://www.jsdelivr.com/package/npm/graphql-voyager)\n  - some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager@1.3/dist/voyager.standalone.js\n  - latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js\n- from `dist` folder of the npm package `graphql-voyager`\n\n**Note: `voyager.standalone.js` is bundled with react, so you just need to call\n`renderVoyager` function that's it.**\n\n### [HTML example](./example/cdn)\n\n## Using as a dependency\n\nBuild for the web with [webpack](https://webpack.js.org/), or any other bundle.\n\n### [Webpack example](./example/webpack)\n\n## Middleware\n\nGraphQL Voyager has middleware for the next frameworks:\n\n### Properties\n\nMiddleware supports the following properties:\n\n- `endpointUrl` [`string`] - the GraphQL endpoint url.\n- `displayOptions` [`object`] - same as [here](#properties)\n- `headersJS` [`string`, default `\"{}\"`] - object of headers serialized in string to be used on endpoint url\u003cBR\u003e\n  **Note:** You can also use any JS expression which results in an object with header names as keys and strings as values e.g. `{ Authorization: localStorage['Meteor.loginToken'] }`\n\n### Express\n\n```js\nimport express from 'express';\nimport { express as voyagerMiddleware } from 'graphql-voyager/middleware';\n\nconst app = express();\n\napp.use('/voyager', voyagerMiddleware({ endpointUrl: '/graphql' }));\n\napp.listen(3001);\n```\n\n### Hapi\n\n#### Version 20+\n\n```js\nimport Hapi from '@hapi/hapi';\nimport { hapi as voyagerMiddleware } from 'graphql-voyager/middleware';\n\nconst server = new Hapi.Server({\n  port: 3001,\n});\n\nconst init = async () =\u003e {\n  await server.register({\n    plugin: voyagerMiddleware,\n    options: {\n      path: '/voyager',\n      endpointUrl: '/graphql',\n    },\n  });\n\n  await server.start();\n};\n\ninit();\n```\n\n### Koa\n\n```js\nimport Koa from 'koa';\nimport KoaRouter from 'koa-router';\nimport { koa as voyagerMiddleware } from 'graphql-voyager/middleware';\n\nconst app = new Koa();\nconst router = new KoaRouter();\n\nrouter.all(\n  '/voyager',\n  voyagerMiddleware({\n    endpointUrl: '/graphql',\n  }),\n);\n\napp.use(router.routes());\napp.use(router.allowedMethods());\napp.listen(3001);\n```\n\n## Credits\n\nThis tool is inspired by [graphql-visualizer](https://github.com/NathanRSmith/graphql-visualizer) project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-kit%2Fgraphql-voyager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphql-kit%2Fgraphql-voyager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-kit%2Fgraphql-voyager/lists"}