GraphQL(二)

GraphQL类型

GraphQL 的类型系统分为标量类型其他高级数据类型

1、标量类型

一个对象类型有自己的名字和字段,而某些时候,这些字段必然会解析到具体数据。这就是标量类型的来源:它们表示对应 GraphQL 查询的叶子节点。
标量类型可表示的数据类型,和 JavaScript 的原始类型对应。

标量类型 :String、Int、Float、Boolean、Enum、ID


  1. Int :有符号 32 位整数。
  2. Float :有符号双精度浮点值。
  3. String :UTF‐8 字符序列。
  4. Boolean :true 或者 false。
  5. ID :ID 标量类型表示一个唯一标识符。通常用以重新获取对象或者作为缓存中的键。ID 类型使用和 String 一样的方式序列化;然而将其定义为 ID 意味着并不需要人类可读型。
  6. enum : 定义枚举。枚举类型是一种特殊的标量,它限制在一个特殊的可选值集合内。
    好处:
    1. 验证这个类型的任何参数是可选值的的某一个
    2. 与类型系统沟通,一个字段总是一个有限值集合的其中一个值。
      下面是一个用 GraphQL schema 语言表示的 enum 定义:
     enum Episode {
        onedemo
        twodemo
        threedemo
     }
    
    这表示无论我们在 schema 的哪处使用了 Episode,都可以肯定它返回的是 onedemo、twodemo 和 threedemo 之一。
2、高级数据类型
  • 对象类型 (Object)

    通过对象模型来构建GraphQL中关于一个数据模型的形状,同时还可以声明各个模型之间的内在关联(一对多、一对一或多对多)。



  • 类型修饰符(Type Modifier)

    类型系统仅仅只有类型定义是不够的,我们还需要对类型进行更广泛性的描述。类型修饰符就是用来修饰类型,以达到额外的数据类型要求控制。

    例如

  1. 列表:[Type]
  2. 非空:Type!
  3. 列表非空:[Type]!
  4. 非空列表,列表内容类型非空:[Type!]!

在描述数据模型(模式Schema)时,就可以对字段施加限制条件。
例如定义了一个名为User的对象类型,并对其字段进行定义和施加限制条件:



返回数据时,像下面这种情况就是不允许的:



下面这样的数据就是正确的:


  • 输入类型(Input Types)

输入对象看上去和常规对象一模一样,除了关键字是 input 而不是 type。更新数据时有用,与常规对象只有关键字修饰不一样,常规对象时用 type 修饰,输入类型用 input 修饰。

比如定义了一个输入类型:


前端发送变更请求时就可以使用(通过参数来指定输入的类型):


数组

数组类型[类型] 。例如:[Int]代表的是整型数组。数组定义起来会有些特殊。

  1. arr:[Int!] 如果写成 arr:[ ] 就会报错, 也就是说必须把数组里面的类型定义完全。
  2. Query里面的返回值必须严格按照type里面定义的返回, 不然也会报错。
const schema = buildSchema(`
  type Query {
    getClassMates(classNo:Int!):[String]
  }
` );
//定义查询对应的resolver,也就是查询对应的处理器
const root = {
  getClassMates({ classNo }) {
    const obj = {
      31: ['张三', '李四', '王五'],
      61: ['张大三', '李大四', '王大五']
    }
    return obj[classNo];
  }
}

我们对getClassMates发起请求:

query {
  getClassMates(classNo:31)
}



由于这里的数组是必传字段,如果不传参数的话,就会报错。


参数传递

GraphQL 对象类型上的每一个字段都可能有零个或者多个参数,它传递的所有参数都是具名的,不像 JavaScript 中,函数接受一个有序参数列表。而在 GraphQL 中,所有参数必须具名传递。例如下面的 length 字段:

在这里插入图片描述


length 字段定义了一个参数,unit。它和js传递参数一样,在小括号内定义形参,但是要注意:参数需要定义类型。 同时也需要注意:参数是必选还是可选的。当一个参数是可选的,我们可以定义一个默认值 —— 如果 unit 参数没有传递,那么它将会被默认设置为 METER。

包含参数的请求
const schema = buildSchema(`
  type Account {
    name:String
    age:Int
    sex:String
    department:String
    salary(city:String):Int
  }
  type Query {
    account(username:String):Account
  }
` );
//定义查询对应的resolver,也就是查询对应的处理器
const root = {
  account({ username }) {
    const name = username;
    const sex = 'man';
    const age = 18;
    const department = '开发部';
    const salary = ({ city }) => {
      if (city === '广州' || city === '北京' || city === '上海') {
        return 'big'
      }
      return 'small';
    }
    return {
      name,
      sex,
      age,
      department,
      salary
    }
  }
}

我们在graphql中对account进行请求:

query {
  account(username:"李四") {
    name
    age
    department
    salary(city:"北京")
  }
}



在客户端中访问graphql的接口



  1. 在文件夹根目录下创建pubic文件夹,然后创建index.html。
  2. 在server.js中使用 app.use(express.static('public')) 将public文件夹公开出去。
  3. 在index.html中使用fetch进行请求。
<button onclick="getData()">获取数据</button>
  <script>
    function getData() {
       //由于account是个自定义类型,因此在这里至少要写一个子字段
      const query = `
        query Account($username: String){
          account(username: $username){
            name
            age
            sex
            salary(city: "北京")
          }
        }
      `
      const vailables = {username:'李大四'}

      fetch('/graphql',{
        method:'POST',
        headers:{
          'Content-Type':'application/json',
          'Accept':'application/json'
        },
        body:JSON.stringify({
          query:query,
          variables:vailables
        })
      }).then(res => res.json())
      .then(data => {
        console.log(data);
      })
    }
  </script>
  1. 点击按钮之后,就会获取数据。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GraphQL是一种用于API的查询语言和运行时环境,而Postman是一种用于测试和调试API的工具。在Postman中创建和发送GraphQL查询是很简单的。您可以通过以下步骤在Postman中使用GraphQL进行测试: 1. 在Postman中导入GraphQL架构。您可以使用提供的GraphQL模式或自己创建一个。 2. 在Postman的请求部分,选择GraphQL作为请求类型。 3. 在请求体中编写GraphQL查询。您可以使用GraphQL的查询语法来描述您希望从API获取的数据。 4. 发送请求并查看响应。Postman将发送GraphQL查询到您指定的API端点,并返回相应的结果。 使用Postman进行GraphQL测试可以帮助您验证和调试API的响应,并确保您的查询正确地返回所需的数据。通过Postman的直观界面和功能,您可以轻松地创建和发送GraphQL查询,并对结果进行检查和分析。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [POSTMAN从入门到精通系列(十七):使用GraphQL](https://blog.csdn.net/u012014531/article/details/100983490)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [使用 Postman 轻松上手 GraphQL](https://blog.csdn.net/LiamHong_/article/details/131127871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值