Represent any GraphQL API as an interactive graph. It's time to finally see the graph behind GraphQL.
You can also explore number of public GraphQL APIs from our list.
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!
Left panel which provides more detailed information about every type
"Skip Relay" option that simplifies graph by removing Relay wrapper classes
Ability to choose any type to be a root of the graph
Usage
GraphQL Voyager exports Voyager React component and helper init function. If used without
module system it is exported as GraphQLVoyager global variable.
Properties
Voyager component accepts the following properties:
introspection [object or function: (query: string) => Promise] - 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.
workerURI [string] (optional) - absolute or relative path to Voyager web worker. By default it will try to load it from voyager.worker.js.
loadWorker [function: (path: string, relative: boolean) => Promise<Worker>] (optional) - If provided GraphQL Voyager will use this function to load the worker. By default it will use the internal callback in utils/index.ts
init function
The signature of the init function:
(hostElement: HTMLElement,options: object)=>void
hostElement - parent element
options - is the JS object with properties of Voyager component
Using pre-bundled version
You can get GraphQL Voyager bundle from the following places:
from dist folder of the npm package graphql-voyager
Important: for the latest two options make sure to copy voyager.worker.js to the same
folder as voyager.min.js.
The HTML with minimal setup (see the full example)
<!DOCTYPE html><html><head><scriptsrc="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script><linkrel="stylesheet"
href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css"
/>
<scriptsrc="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js"></script></head><body><divid="voyager">Loading...</div><script>functionintrospectionProvider(introspectionQuery){// ... do a call to server using introspectionQuery provided// or just return pre-fetched introspection}// Render <Voyager />GraphQLVoyager.init(document.getElementById('voyager'),{introspection: introspectionProvider,});</script></body></html>
Using as a dependency
You can install lib using npm or yarn:
npm i --save graphql-voyager
yarn add graphql-voyager
Important: make sure to copy voyager.worker.js from node_modules/graphql-voyager/dist to the same folder as your main bundle or use workerURI property to specify other path.
NOTE if you use it with create-react-app, copy worker file to public folder and use workerURI property like this:
headersJS [string, default "{}"] - object of headers serialized in string to be used on endpoint url 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'] }
请发表评论