GraphQL使用指南(高级部分)

只要你看完了前面的查询和Mutation基本上就已经满足你的日常使用了,但是我们不能止步于此是吧,还有更美好的世界等着我们!

分片

在 GraphQL 中,分片是一段能够复用的片段.

如果我们需要查询三个不同文章的信息,那么我们可能会做如下的查询:

  1. {
  2.   first:posts(index:1){
  3.     title,
  4.     category,
  5.     layout
  6.   },
  7.   second:posts(index:2){
  8.     title,
  9.     category,
  10.     layout
  11.   },
  12.   third:posts(index:3){
  13.     title,
  14.     category,
  15.     layout
  16.   }
  17. }

我们将上面的posts查询进行了一遍又一遍,开始你可能觉得没什么,但是当需要查询的数据有几十个字段的时候你会开始头疼(相信我).

那么我们有什么方法可以复用这一块经常用到的片段呢?

接下来我来给你答案:

  1. fragment post on Post{
  2.   title,
  3.   category,
  4.   layout
  5. }

上面的就是一个分片,Post是一个已经服务器定义好的类型,你可以看右上角的文档,每个操作名称的后面都会有一个返回的类型.

下面我们就开始使用这个分片:

  1. {
  2.   first:posts(index:1){
  3.     ...post
  4.   },
  5.   second:posts(index:2){
  6.     ...post
  7.   },
  8.   third:posts(index:3){
  9.     ...post
  10.   }
  11. }
  13. fragment post on Post{
  14.   title,
  15.   category,
  16.   layout
  17. }

使用了对象展开符...,如果你了解ES6的话你肯定对这个特别的熟悉,那么我们是不是可以试试ES6类似的特性?

那我们来试试:

  1. {
  2.   first:posts(index:1){
  3.     ...post
  4.   },
  5.   second:posts(index:2){
  6.     ...post,
  7.     category
  8.   },
  9.   third:posts(index:3){
  10.     ...post,
  11.     layout
  12.   }
  13. }
  15. fragment post on Post{
  16.   title,
  17.   category,
  18. }

看起来一点问题都没有,服务器返回了正确的信息,这些我就不解释了,都是一些ES6的东西,如果你不懂ES6那么要抓紧时间了.

分片总结

分片也可以嵌套分片,所以只要是服务器定义过的数据类型,你都可以写成一个个的分片,这种模式能大量减少你写重复代码的时间.

查询变量

正如上面所说的,分片可以减少大量的时间,那么现在我准备说的查询变量就可以增加你生命(好吧我承认我在瞎扯).

对于上面的那个带参数的查询操作,我们查询了index等于1,2,3时候的数据,分片减少了你输入相同字段的时间,而查询变量减少了你写分片的时间…

废话补多少,先看代码:

  1. query getFewPosts($index: Int!) {
  2.   first:posts(index:$index){
  3.     ...post
  4.   }
  5. }
  7. fragment post on Post{
  8.   title,
  9.   category,
  10. }

然后在查询窗口中输入:

  1. {
  2.     "index":1
  3. }

这就是一个简单的变量查询,也可以和分片一起使用,你可以增加几个变量增加使用分片:

  1. query getFewPosts($index: Int!,
  2.   $index1: Int!,
  3.   $index2: Int!) {
  4.   first:posts(index:$index){
  5.     ...post
  6.   },
  7.   second:posts(index:$index1){
  8.     ...post,
  9.     category
  10.   },
  11.   third:posts(index:$index2){
  12.     ...post,
  13.     layout
  14.   }
  15. }
  17. fragment post on Post{
  18.   title,
  19.   category,
  20. }

然后在查询窗口中输入:

  1. {
  2.   "index": 1,
  3.   "index1": 2,
  4.   "index2": 3
  5. }

GraphQL使用指南(高级部分) - 图1

总结

这部分都是讲的客户端,下面开始讲服务器这部分,我们使用express搭建讲解.