git://www.github.com/graphql/graphiql.git
git clone http://www.github.com/graphql/graphiql
$ svn co --depth empty http://www.github.com/graphql/graphiql
Checked out revision 1.
$ cd repo
$ svn up trunk
/ˈɡ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
}
}
使用公共 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
}