帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:bro  graphql  IDE  EXP  浏览  
An in-browser IDE for exploring GraphQL.

  • 源代码名称:graphiql
  • 源代码网址:http://www.github.com/graphql/graphiql
  • graphiql源代码文档
  • graphiql源代码下载
  • Git URL:
    git://www.github.com/graphql/graphiql.git
  • Git Clone代码到本地:
    git clone http://www.github.com/graphql/graphiql
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/graphql/graphiql
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • GraphiQL

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

    Build StatusCDNJSnpm

    正在启动

    使用 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主题,将它的应用于 QueryEditorResultViewervariables 窗格。 默认为 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 规范中阅读更多内容。



    文章标签:EXP  bro  浏览  IDE  graphql  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语