当前位置: 首页 > 文档资料 > GraphQL 使用指南 >

查询

优质
小牛编辑
141浏览
2023-12-01

Graphql 为查询而生,所以我们首先试试它的查询功能吧.

准备工作

  1. 克隆库:
  1. git clone https://github.com/zhouyuexie/learn-graphql
  1. 安装依赖:
  1. cd learn-graphql && npm install
  1. 运行:
  1. npm start

现在打开你的浏览器输入http://localhost:12580/graphql,或者点击这里.

GraphQL使用指南(查询) - 图1

GraphQL 初试

在左边窗口输入以下内容:

  1. {
  2. echo(message:"world")
  3. }

你会在右边窗口看到这个返回的数据:

  1. {
  2. "data": {
  3. "echo": "hello: world"
  4. }
  5. }

提示:右上角有个Docs,点击它你可以看到你可以看到有关查询的信息.

GraphQL使用指南(查询) - 图2

你可以看到上面那行echo(message:String):String,说明echo接受一个message的参数,并且返回一个string类型的数据,点击echo你可以看到更详细的内容.

有参数查询

上面 echo 只是一个简单的演示,并没有查询字段,现在我们开始根据客户端的要求返回定制的数据吧.

现在让你查询posts你应该知道怎么开始了吧?对的,我们想看文档,点击右上角开始吧.

上图就有你想要的东西,你会看到posts模式接受一个整数型的index,然后返回一个Post类型数据,我们开始试试吧:

  1. {
  2. posts(index:1){
  3. _id,
  4. title,
  5. content
  6. }
  7. }

大概返回如下数据:

  1. {
  2. "data": {
  3. "posts": [
  4. {
  5. "_id": "03390abb5570ce03ae524397d215713b",
  6. "title": "New Feature: Tracking Error Status with Kadira",
  7. "content": "Here is a ...."
  8. }
  9. ]
  10. }
  11. }

无参数查询

目前为止我们的查询都需要一个参数,毕竟查询的时候大多数都是需要参数的,现在我们来试试一个不需要参数的例子.

  1. {
  2. postsnoargs{
  3. _id,
  4. title,
  5. content
  6. }
  7. }

好了,执行一下吧!你会发现没什么不同,就是服务器返回的数据是”固定”的而已,对于获取一些首页这类数据我们不需要给定参数是非常有用的.

嵌套查询

有时候我们需要对查询到的数据进行筛选,比如限制大小,这时候就需要一个嵌套查询来实现这个功能了.

比如下面这个查询A开头的全国省市信息:

  1. {
  2. address(nameKey:"A"){
  3. ShortKey,
  4. Content(limit:5) {
  5. Id,
  6. Code,
  7. Name,
  8. FirstStr
  9. }
  10. }
  11. }

服务器返回:

  1. {
  2. "data": {
  3. "address": [
  4. {
  5. "ShortKey": "A",
  6. "Content": [
  7. {
  8. "Id": 36,
  9. "Code": "152900",
  10. "Name": "阿拉善盟",
  11. "FirstStr": "A"
  12. },
  13. {
  14. "Id": 39,
  15. "Code": "210300",
  16. "Name": "鞍山市",
  17. "FirstStr": "A"
  18. },
  19. {
  20. "Id": 105,
  21. "Code": "340800",
  22. "Name": "安庆市",
  23. "FirstStr": "A"
  24. },
  25. {
  26. "Id": 155,
  27. "Code": "410500",
  28. "Name": "安阳市",
  29. "FirstStr": "A"
  30. },
  31. {
  32. "Id": 293,
  33. "Code": "513200",
  34. "Name": "阿坝藏族羌族自治州 ",
  35. "FirstStr": "A"
  36. }
  37. ]
  38. }
  39. ]
  40. }
  41. }

其中的Content字段加上了限制返回前五个市的信息,注意其中的limit是服务器设置的,并不是Graphql的关键字.

多种查询混合

这其实很简单,也就是将上面的几个查询混合写到一起就可以了:

  1. {
  2. address(nameKey:"A"){
  3. ShortKey,
  4. Content(limit:2) {
  5. Id,
  6. Code,
  7. Name,
  8. FirstStr
  9. }
  10. },
  11. posts(index:1){
  12. _id,
  13. title
  14. }
  15. }

服务器返回:

  1. {
  2. "data": {
  3. "address": [
  4. {
  5. "ShortKey": "A",
  6. "Content": [
  7. {
  8. "Id": 36,
  9. "Code": "152900",
  10. "Name": "阿拉善盟",
  11. "FirstStr": "A"
  12. },
  13. {
  14. "Id": 39,
  15. "Code": "210300",
  16. "Name": "鞍山市",
  17. "FirstStr": "A"
  18. }
  19. ]
  20. }
  21. ],
  22. "posts": [
  23. {
  24. "_id": "03390abb5570ce03ae524397d215713b",
  25. "title": "New Feature: Tracking Error Status with Kadira"
  26. }
  27. ]
  28. }
  29. }

查询别名

有时候我们想这样查找使数据分开,方便自己各个地方调用:

  1. {
  2. postsnoargs{
  3. title
  4. },
  5. postsnoargs{
  6. _id
  7. }
  8. }

我们设想得到的数据是这样的:

  1. {
  2. "data": {
  3. "postsnoargs": {
  4. "title":[
  5. "title": "Sharing the Meteor Login State Between Subdomains",
  6. ],
  7. "_id":[
  8. "_id": "0176413761b289e6d64c2c14a758c1c7"
  9. ]
  10. }
  11. }
  12. }

但其实服务器返回的是这样的:

  1. {
  2. "data": {
  3. "postsnoargs": [
  4. {
  5. "title": "Sharing the Meteor Login State Between Subdomains",
  6. "_id": "0176413761b289e6d64c2c14a758c1c7"
  7. }
  8. ]
  9. }
  10. }

这时候我们就需要设置别名了,否则服务器返回的时候会合并你的数据:

  1. {
  2. posttitle:postsnoargs{
  3. title
  4. },
  5. postid:postsnoargs{
  6. _id
  7. }
  8. }

服务器返回:

  1. {
  2. "data": {
  3. "posttitle": [
  4. {
  5. "title": "Sharing the Meteor Login State Between Subdomains"
  6. }
  7. ],
  8. "postid": [
  9. {
  10. "_id": "0176413761b289e6d64c2c14a758c1c7"
  11. }
  12. ]
  13. }
  14. }

GraphQL使用指南(查询) - 图3

总结

以上就是你使用Graphql查询所需要知道的,下面我们开始介绍Mutations.