graphiql, 在浏览器IDE中浏览 GraphQL，

/ˈɡrafək(ə)l/ 浏览器GraphQL内的图形交互。 试用现场演示。

正在启动

使用 node.js 服务器只需使用 express-graphql 命令。？ ！ 它可以自动呈现 GraphiQL 。 使用另一个GraphQL服务GraphiQL很容易建立起来。 使用 npm:

npm install --save graphiql

或者，如果你使用的是 yarn 插件：

yarn add graphiql

GraphiQL提供一个响应组件，负责呈现 UI，应该提供一个可以从GraphQL获取的函数，我们建议使用获取标准 API 。

importReactfrom'react';importReactDOMfrom'react-dom';importGraphiQLfrom'graphiql';importfetchfrom'isomorphic-fetch';functiongraphQLFetcher(graphQLParams) {
 returnfetch(window.location.origin+'/graphql', {
 method:'post',
 headers: { 'Content-Type':'application/json' },
 body:JSON.stringify(graphQLParams),
 }).then(response=>response.json());
}ReactDOM.render(<GraphiQL fetcher={graphQLFetcher} />, document.body);

使用 webpack 或者 browserify构建站点，或者使用预先打包的文件。 查看git存储库中的示例，以了解如何使用预先绑定的文件。

不要忘了在页面上包含CSS文件 ！ 在使用 npm 或者 yarn 时，可以在 node_modules/graphiql/graphiql.css 中找到它，也可以从页面下载它。

有关设置GraphiQL的示例，请查看这个存储库中的示例插件，它包含了一些有用的功能，突出显示了 API 。

特性

• 语法高亮显示
• 在字段。参数。类型和更多的前面输入智能类型。
• 实时错误突出显示和报告。
• 自动查询完成。
• 运行并检查查询结果。

用法

GraphiQL导出一个单独的响应组件，该组件用于包含整个浏览器 viewport 。 这里响应组件呈现GraphiQL编辑器。

importGraphiQLfrom'graphiql';<GraphiQL />

GraphiQL支持用户界面和行为的定制，通过接受 React props 。

Props:

• fetcher: 接受 GraphQL http参数并返回承诺或者观察解析到GraphQL解析JSON响应的函数。

• schema: 如果不使用GraphQLSchema实例或者 null 。 如果提供了 undefined，GraphiQL将使用提取器发送一个自省查询来生成一个模式。

• query: 一个可选的GraphQL字符串，用作初始显示的查询，如果提供了 undefined，则使用存储的查询或者 defaultQuery 。

• variables: 一个可选的GraphQL字符串，用作初始显示的查询变量，如果提供了 undefined，则使用存储的变量。

• operationName: 应该执行GraphQL操作的可选名称。

• response: 一个可选的JSON字符串，用作初始显示的响应。 如果未提供，则最初不显示响应。 如果说明初始查询的结果，则可以提供这里选项。

• storage: [Storage] [] GraphiQL的一个实例将用于持久化状态。 默认值：window.localStorage 。

• defaultQuery: 在未提供查询时使用的可选GraphQL字符串，以前会话中没有存储的查询。 如果提供了 undefined，GraphiQL将使用它自己的默认查询。

• onEditQuery: 查询编辑器更改时将调用的可选函数。 函数的参数将是查询字符串。

• onEditVariables: 查询变量编辑器更改时将调用的可选函数。 函数的参数将是变量字符串。

• onEditOperationName: 一个可选函数，在执行操作名更改时将被调用。

• onToggleDocs: 一个可选的函数，当文档将被切换时将被调用。 函数的参数将是布尔值，不管文档现在是打开还是关闭。

• getDefaultFieldNames: 可选函数，用于向非叶字段提供默认字段，因为缺少选择集。 接受GraphQLType实例并返回字段名称的array 。 如果未提供，将使用默认行为。

• editorTheme: 可选字符串命名CodeMirror主题，将它的应用于 QueryEditor 。ResultViewer 和 variables 窗格。 默认为 graphiql 主题。 有关完整用法，请参阅 below 。

孩子：

• <GraphiQL.Logo>: 将 GraphiQL logo 替换为你自己的。

• <GraphiQL.Toolbar>: 添加自定义工具栏 above GraphiQL 。 如果未提供，默认工具栏可能包含公共操作。 如果需要空工具栏，则传递空 <GraphiQL.Toolbar/> 。

• <GraphiQL.Button>: 将按钮添加到工具栏 above GraphiQL 。

• <GraphiQL.Menu>: 向工具栏 above GraphiQL添加下拉菜单。

  • <GraphiQL.MenuItem>: 菜单的项。

• <GraphiQL.Select>: 将选择列表添加到工具栏 above GraphiQL 。

  • <GraphiQL.SelectOption>: 选择列表的选项。

• <GraphiQL.Group>: 将一组关联控件添加到工具栏 above GraphiQL 。 要求子级为 <GraphiQL.Button>，<GraphiQL.Menu> 或者 <GraphiQL.Select> 。

• <GraphiQL.Footer>: 添加自定义页脚 below GraphiQL结果。

用法示例

classCustomGraphiQLextendsReact.Component {
 constructor(props) {
 super(props);
 this.state= {
 // REQUIRED:// `fetcher` must be provided in order for GraphiQL to operate fetcher:this.props.fetcher,
 // OPTIONAL PARAMETERS// GraphQL artifacts query:'',
 variables:'',
 response:'',
 // GraphQL Schema// If `undefined` is provided, an introspection query is executed// using the fetcher. schema:undefined,
 // Useful to determine which operation to run// when there are multiple of them. operationName:null,
 storage:null,
 defaultQuery:null,
 // Custom Event Handlers onEditQuery:null,
 onEditVariables:null,
 onEditOperationName:null,
 // GraphiQL automatically fills in leaf nodes when the query// does not provide them. Change this if your GraphQL Definitions// should behave differently than what's defined here:// (https://github.com/graphql/graphiql/blob/master/src/utility/fillLeafs.js#L75) getDefaultFieldNames:null };
 }
 // Example of using the GraphiQL Component API via a toolbar button.handleClickPrettifyButton(event) {
 consteditor=this.graphiql.getQueryEditor();
 constcurrentText=editor.getValue();
 const { parse, print } =require('graphql');
 constprettyText=print(parse(currentText));
 editor.setValue(prettyText);
 }
 render() {
 return (
 <GraphiQL ref={c=> { this.graphiql= c; }} {...this.state}><GraphiQL.Logo> Custom Logo
 </GraphiQL.Logo><GraphiQL.Toolbar>// GraphiQL.Button usage<GraphiQL.Button onClick={this.handleClickPrettifyButton}
 label="Prettify" title="Prettify Query (Shift-Ctrl-P)"/>// Some other possible toolbar items<GraphiQL.Menu label="File" title="File"><GraphiQL.MenuItem label="Save" title="Save" onSelect={...}></GraphiQL.Menu><OtherReactComponent someProps="true"/></GraphiQL.Toolbar><GraphiQL.Footer>// Footer works the same as Toolbar// add items by appending child components</GraphiQL.Footer></GraphiQL> );
 }
}

应用编辑器主题

为了对界面的编辑器部分进行主题化，你可以提供 editorTheme 道具。 你还需要为主题( 类似于加载这里项目的CSS ) 加载适当的CSS 。 请看这里的主题用法。

// In your html<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css"/>// In your GraphiQL JSX<GraphiQL
 editorTheme="solarized light"/>

查询示例

查询

GraphQL查询声明地描述了发布者希望从谁获得GraphQL查询中获取的数据。

query FetchSomeIDQuery($someId: String!) {
 human(id: $someId) {
 name
 }
}

更多可用示例：GraphQL查询 。

突变

考虑到这个模式

constschema=newGraphQLSchema({
 query:newGraphQLObjectType({
 fields: {
 numberHolder: { type: numberHolderType },
 },
 name:'Query',
 }),
 mutation:newGraphQLObjectType({
 fields: {
 immediatelyChangeTheNumber: {
 type: numberHolderType,
 args: { newNumber: { type: GraphQLInt } },
 resolve: (function (obj, { newNumber }) {
 returnobj.immediatelyChangeTheNumber(newNumber);
 })
 }
 },
 name:'Mutation',
 })
});

然后可以进行以下变异查询：

mutation TestMutation {
 first: immediatelyChangeTheNumber(newNumber: 1) {
 theNumber
 }
}

详细阅读在 graphql-js的变异测试。

使用公共 Pattern 构成突变的另一个很好的例子就是中继 。 根据下面的GraphQL类型定义，

input IntroduceShipInput {
 factionId: ID!
 shipName: String!
 clientMutationId: String!
}
type IntroduceShipPayload {
 faction: Faction
 ship: Ship
 clientMutationId: String!
}

突变调用的组成如下：

mutation AddBWingQuery($input: IntroduceShipInput!) {
 introduceShip(input: $input) {
 ship {
 id
 name
 }
 faction {
 name
 }
 clientMutationId
 }
}
{
"input": {
"shipName":"B-Wing",
"factionId":"1",
"clientMutationId":"abcde"
 }
}

更多来自中继变异文档的信息。

fragment

Fragments 允许重复使用字段的重复重复选择，从而减少文档中重复的文本。 inline Fragments 可以以直接在选择中使用，以便在针对接口或者联合查询类型条件时进行条件。 因此，不使用以下查询：

{
 luke: human(id:"1000") {
 name
 homePlanet
 }
 leia: human(id:"1003") {
 name
 homePlanet
 }
}

使用 Fragments，可以进行以下查询。

{
 luke: human(id:"1000") {
. . .HumanFragment
 }
 leia: human(id:"1003") {
. . .HumanFragment
 }
}
fragment HumanFragment on Human {
 name
 homePlanet
}

从 GraphQL fragment 规范中阅读更多内容。