从 Schema 和 Schema 从 GUI 生成 GraphQL GUI

Posted 2023-03-08

【中文标题】从 Schema 和 Schema 从 GUI 生成 GraphQL GUI

【英文标题】：Generating GraphQL GUI from Schema and Schema from GUI

【发布时间】：2018-07-17 07:56:09

【问题描述】：

虽然使用 GraphiQL 效果很好，但我的老板要求我实现一个用户界面，用户可以在其中检查通过 UI 元素（如复选框、映射关系和获取数据）呈现给他们的元素，这样做将为该人生成一个 graphql 输入，调用 API 并将结果返回给用户。

所以，基本上这涉及到 2 代。从 GraphQL 模式生成用户界面，并根据用户的选择生成 GraphQL 输入查询。

我进行了搜索，但找不到任何已经执行此操作的工具。我的服务器在 Node 中，我正在使用 Express GraphQL。我使用 https://github.com/graphql-cli/graphql-cli 将我的 express 模式转换为 GraphQLSchema 语言，并使用 https://github.com/sheerun/graphqlviz/blob/master/cli.js 的自省函数自省了 GraphQLSchema 语言

我得到的对象是这样的（下面只给出部分模式输出） `

"data": 
        "__schema": 
            "queryType": 
                "name": "Query"
            ,
            "mutationType": 
                "name": "Mutation"
            ,
            "subscriptionType": null,
            "types": [
                "kind": "OBJECT",
                "name": "Query",
                "description": null,
                "fields": [
                    "name": "employee",
                    "description": null,
                    "args": [
                        "name": "ecode",
                        "description": null,
                        "type": 
                            "kind": "SCALAR",
                            "name": "String",
                            "ofType": null
                        ,
                        "defaultValue": null
                    ],

`

我正在循环尝试生成 UI 的元素，但我很卡住。

最好的方法是什么？提前致谢。

【参考方案1】：

对于从自省查询生成 ui 的部分，我认为响应包含足够的数据以提供足够的 ui（每个字段的描述可以用作每个字段输入框的占位符）。如果您要问如何从内省响应中生成动态表单，您可以查看其他创建从 json 到 html 表单的转换器以获得灵感/使用的项目（请查看 https://github.com/brutusin/json-forms/blob/master/README.md#cdn）。对于复杂的字段（不是原始类型），您可能需要做更多的工作。

对于从 ui 生成模式，您可以使用任何查询构建器工具，并根据用户输入构建查询。每个组合框都将映射到特定的 SCHEMANAME.FIELDNAME 并且值将是输入框的值。

我希望它有所帮助。顺便说一句，这听起来是一个有趣的工具，所以如果你成功了，请告诉我们！