当前位置：首页 > 软件库 > 大数据 > 数据查询 >

graphql-voyager

授权协议 MIT License

开发语言 Java

所属分类大数据、数据查询

软件类型开源软件

地区不详

投递者夏侯野

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

GraphQL Voyager

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!

GraphQL Weekly #42

Live Demo

Features

Quick navigation on graph
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 withoutmodule 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.
displayOptions (optional)
- displayOptions.skipRelay [boolean, default true] - skip relay-related entities
- displayOptions.skipDeprecated [boolean, default true] - skip deprecated fields and entities that contain only deprecated fields.
- displayOptions.rootType [string] - name of the type to be used as a root
- displayOptions.sortByAlphabet [boolean, default false] - sort fields on graph by alphabet
- displayOptions.showLeafFields [boolean, default true] - show all scalars and enums
- displayOptions.hideRoot [boolean, default false] - hide the root type
hideDocs [boolean, default false] - hide the docs sidebar
hideSettings [boolean, default false] - hide settings panel
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:

jsDelivr CDN
- some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager/v1.0.0-rc.15/voyager.min.js
- latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js
from dist folder of the npm package graphql-voyager

Important: for the latest two options make sure to copy voyager.worker.js to the samefolder as voyager.min.js.

The HTML with minimal setup (see the full example)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js"></script>
  </head>
  <body>
    <div id="voyager">Loading...</div>
    <script>
      function introspectionProvider(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

And then use it:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Voyager } from 'graphql-voyager';
import fetch from 'isomorphic-fetch';

function introspectionProvider(query) {
  return fetch(window.location.origin + '/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: query }),
  }).then((response) => response.json());
}

ReactDOM.render(
  <Voyager introspection={introspectionProvider} />,
  document.getElementById('voyager'),
);

Build for the web with webpack (example) orbrowserify

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:

<Voyager
  // ...
  workerURI={process.env.PUBLIC_URL + '/voyager.worker.js'}
  // ...
/>

Middleware

Graphql Voyager has middleware for the next frameworks:

Properties

Middleware supports the following properties:

endpointUrl [string] - the GraphQL endpoint url.
displayOptions [object] - same as here
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'] }

Express

import express from 'express';
import { express as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = express();

app.use('/voyager', voyagerMiddleware({ endpointUrl: '/graphql' }));

app.listen(3001);

Hapi

Version 17+

import hapi from 'hapi';
import { hapi as voyagerMiddleware } from 'graphql-voyager/middleware';

const server = new Hapi.Server({
  port: 3001,
});

const init = async () => {
  await server.register({
    plugin: voyagerMiddleware,
    options: {
      path: '/voyager',
      endpointUrl: '/graphql',
    },
  });

  await server.start();
};

init();

Legacy Versions

import hapi from 'hapi';
import { hapiLegacy as voyagerMiddleware } from 'graphql-voyager/middleware';

const server = new Hapi.Server();

server.connection({
  port: 3001,
});

server.register(
  {
    register: voyagerMiddleware,
    options: {
      path: '/voyager',
      endpointUrl: '/graphql',
    },
  },
  () => server.start(),
);

Koa

import Koa from 'koa';
import KoaRouter from 'koa-router';
import { koa as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = new Koa();
const router = new KoaRouter();

router.all(
  '/voyager',
  voyagerMiddleware({
    endpointUrl: '/graphql',
  }),
);

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3001);

Credits

This tool is inspired by graphql-visualizer project.

使用案例

GraphQL（四）：GraphQL工程化实践

Demo到产品化还有很长的路要走，尤其是要在尽量小的影响当前框架的前提下引入新的方法。 GraphiQL GraphiQL是整个GraphQL优势的重要一环，然而默认的GraphiQL不允许配置graphql服务的地址（就是点击GraphiQL上的运行按钮去请求数据的地址），要弄明白这一点很容易，找到graphiql-spring-boot-autoconfigure包，里面有graphiql.h

graphql-voyager

GraphQL Voyager

Live Demo

Features

Usage

Properties

`init` function

Using pre-bundled version

Using as a dependency

Middleware

Properties

Express

Hapi

Version 17+

Legacy Versions

Koa

Credits

同类工具

相关阅读

相关文章

相关问答

相关文档

graphql-voyager

GraphQL Voyager

Live Demo

Features

Usage

Properties

init function

Using pre-bundled version

Using as a dependency

Middleware

Properties

Express

Hapi

Version 17+

Legacy Versions

Koa

Credits

同类工具

相关阅读

相关文章

相关问答

相关文档

`init` function