npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zl-create-graphql-type

v1.0.3

Published

在编写graphql接口时,自动解析接口实际参数和返回值,创建对应的graphql类型

Downloads

2

Readme

zl-create-graphql-type

在使用node编写graphql接口时:自动解析数据结构,动态生成对应的graphql类型

1. 模块基本说明

  • 此模块即可在浏览器环境下运行,也可在node环境下运行
  • 在浏览器环境下运行,将会返回生成的graphql类型字符串内容
  • 在node环境下运行,即可返回字符串内容也可直接生成文件到需要的位置处

演示: https://zhangluzhanglu.github.io/code/create_graphql_type.html

alt 属性文本

2. 起因

在开发中,需要将一个项目原本的rest风格接口转换为graphql方式的接口,如下:

  • java的dubbo接口----》node中间层处理生成rest接口----》前端页面调node的rest接口 变为
  • java的dubbo接口----》node中间层处理生成graphql接口----》前端页面调node的graphql接口

由于graphql中每个接口的参数,返回值等,都需要显示的声明graphql对应的类型,且grahpql的类型就 String、Int、Float、Boolean 和 ID 几种,比较单调.

而手动构建graphql接口所需要的类型也比较麻烦,所以这里写了个 graphql类型生成器,自动解析数据结构,然后生成相应的graphql类型。

3. 安装模块

  • 使用script标签就进行引入使用

       <script src="https://cdn.jsdelivr.net/npm/[email protected]/create_graphql_type.js"></script>
  • 使用import方式引入使用

    
        1. 安装: npm i  zl-create-graphql-type -S
    
        2. 引入: import createGraphqlType from 'zl-create-graphql-type'
  • 使用require方式在nodejs中引入使用

    
        1. 安装: npm i  zl-create-graphql-type -S
    
        2. 引入: var createGraphqlType = require("zl-create-graphql-type")

4. 使用示例

  const parObj = {
  typeObj: { // typeObj表示要转换的类型对象
    code: 200,
    data: {
      ext: {},
      size: 10,
      items: [
        {
          recommendType: 'ali',
          index: 1,
          style: 'word_1',
          strategyId: 'alirecmd',
          productType: 'hot_word'
        }
      ]
    },
    message: 'success'
  },
  typeWay: 'type', // type表示输出类型,input表示输入类型
  typeName: 'testType' // 定义的graphql类型名字
}

// 执行
createGraphqlType(parObj)
  .then((d) => {
    // d为成的结果
    console.log('执行完成,生成的graphql类型如下:\n', d)
  })

下面是执行结果:
/*
执行完成,生成的graphql类型如下:
 type testType {
  code:Int
  data:testType_dataObj
  message:String
}

type testType_dataObj {
  ext:testType_dataObj_extObj
  size:Int
  items:[testType_dataObj_itemsObj]
}

type testType_dataObj_extObj {
}

type testType_dataObj_itemsObj {
  recommendType:String
  index:Int
  style:String
  strategyId:String
  productType:String
}
*/

5. createGraphqlType函数参数说明

/**
* @function 直接暴露给用户使用的函数模块
* @description 自动识参数数据结构,动态生成graphql类型定义
* @param paramObj {Objectl} 接收一个对象参数
* @param paramObj.filePath {String|Boolean} 类型定义将输出到此string代表的路径文件,如果值为false:返回字符串到函数调用处,默认为false
* @param paramObj.rewrite {Boolean} 表示是否以覆盖原文件内容的方式写入。true表示是,false表示以追加的方式写入文件. 默认为false:追加
* @param paramObj.typeWay {String}  typeWay字段值为:input或type,input表示是输入类型,type表示输出类型
* @param paramObj.typeName {String} 要构建的graphql类型的名字
* @param paramObj.typeObj {Objectl} 要转换为graphql类型的实际数据结构(注意:为了识别正确的类型,数据示例的字段值不能为undefined或者null)
* @return graphql类型定义字符串 / void(生成graphql类型定义文件)
* @author 张路 2021/08/08 
* @example
* {
*     "code": 200,
*     "data": {
*         "ext": {},
*         "size": 10,
*         "items": [
*             {
*                 "ext": ""
*             }
*         ]
*     },
*     "message": "success"
* }
*/

同时请注意:

  1. 注意:为了识别正确的类型,作为参数的数据示例的字段值不能为undefined或者null,给上一个任何的代表类型的值都可以。
  2. 对于对象数组数据,在将其解析为grphql类型数据结构时,只需要给出下标0对应的元素对象即可(当然:字段值不能为null或者undefined,否则无法识别真正的类型)
  3. 在客户端浏览器中,只能执行生成对应的graphql类型字符串,而不能写入文件中,因为客户端js无法读写本地磁盘

6. 其他使用示例

  1. ========以覆盖原文件内容的方式将graphql类型写入到文件中========
let parObj = {
    filePath: __dirname + '/test.graphql', 
    rewrite: true,
    typeObj: {
        "code": 200,
        "data": {
            "ext": {},
            "size": 10,
            "items": [
                {
                    "ext": "",
                    "resourceId": "",
                    "mediaAssetInfo": "",
                    "productId": "python工程师",
                    "reportData": {
                        "eventClick": true,
                        "data": {
                            "mod": "popu_895",
                            "extra": "{\"utm_medium\":\"distribute.pc_search_hot_word.none-task-hot_word-alirecmd-1.nonecase\",\"hotword\":\"python工程师\"}",
                            "dist_request_id": "1628386601938_69042",
                            "index": "1",
                            "strategy": "alirecmd"
                        },
                        
                        "eventView": true
                    },
                    "recommendType": "ali",
                    "index": 1,
                    "style": "word_1",
                    "strategyId": "alirecmd",
                    "productType": "hot_word"
                }
            ]
        },
        "message": "success"
    },
    typeWay: 'type',
    typeName: 'testType'
};
// 执行
createGraphqlType(parObj)
    .then(() => {
        console.log("执行完成")
    })
  1. ========以追加原文件内容的方式将graphql类型写入到文件中========
let parObj = {
    filePath: __dirname + '/test.graphql', 
    rewrite: false, //默认追加方式
    typeObj: {
        "code": 200,
        "data": {
            "ext": {},
            "size": 10,
            "items": [
                {
                    "ext": "",
                    "resourceId": "",
                    "mediaAssetInfo": "",
                    "productId": "python工程师",
                    "reportData": {
                        "eventClick": true,
                        "data": {
                            "mod": "popu_895",
                            "extra": "{\"utm_medium\":\"distribute.pc_search_hot_word.none-task-hot_word-alirecmd-1.nonecase\",\"hotword\":\"python工程师\"}",
                            "dist_request_id": "1628386601938_69042",
                            "index": "1",
                            "strategy": "alirecmd"
                        },
                        
                        "eventView": true
                    },
                    "recommendType": "ali",
                    "index": 1,
                    "style": "word_1",
                    "strategyId": "alirecmd",
                    "productType": "hot_word"
                }
            ]
        },
        "message": "success"
    },
    typeWay: 'type',
    typeName: 'testType'
};
// 执行
createGraphqlType(parObj)
    .then(() => {
        console.log("执行完成")
    })
  1. ========每次都创建新文件写入graphql类型========
// 只有每次创建时的path路径不一样即可
let parObj = {
    filePath: __dirname + "/" + new Date().toLocaleString() + '.graphql', 
    typeObj: {
        "code": 200,
        "data": {
            "ext": {},
            "size": 10,
            "items": [
                {
                    "ext": "",
                    "resourceId": "",
                    "mediaAssetInfo": "",
                    "productId": "python工程师",
                    "reportData": {
                        "eventClick": true,
                        "data": {
                            "mod": "popu_895",
                            "extra": "{\"utm_medium\":\"distribute.pc_search_hot_word.none-task-hot_word-alirecmd-1.nonecase\",\"hotword\":\"python工程师\"}",
                            "dist_request_id": "1628386601938_69042",
                            "index": "1",
                            "strategy": "alirecmd"
                        },
                        
                        "eventView": true
                    },
                    "recommendType": "ali",
                    "index": 1,
                    "style": "word_1",
                    "strategyId": "alirecmd",
                    "productType": "hot_word"
                }
            ]
        },
        "message": "success"
    },
    typeWay: 'type',
    typeName: 'testType'
};
// 执行
createGraphqlType(parObj)
    .then(() => {
        console.log("执行完成")
    })