GraphQL 渐进学习 02-GraphQL-组件构成知识整理

最新推荐文章于 2019-09-23 15:29:43 发布
最新推荐文章于 2019-09-23 15:29:43 发布
阅读量159 收藏
点赞数
分类专栏： GraphQL

GraphQL

GraphQL 渐进学习 02-GraphQL-组件构成知识整理

目标

  • 对 GraphQL 构成的组件进行知识精要整理
  • 组件构成有 5 个方面 
    • 查询变更 queries
    • Schema 和类型 schema
    • 验证 validation
    • 执行 execution
    • 内省 introspection

方便日后当手册查阅

代码

融合上述特性写了个代码，方便记忆

查询变更 queries

查询变更都是客户端代码

字段（Fields）

{
  authors {
    id
    firstName
    lastName
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

参数（Arguments）

{
  author(id: 1) {
    id
    firstName
    lastName
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

别名（Aliases）

{
  author(id: 1) {
    id
    name: firstName
    lastName
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

片段（Fragments）

{
  author(id: 1) {
    ...authorFields
  }
}

fragment authorFields on Author {
  id
  firstName
  lastName
  posts {
    title
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

操作名称（Operation name）

query findAuthors {
  authors {
    id
    firstName
    lastName
    posts {
      title
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

变量（Variables）

输入

# query
query findAuthor($id: Int!) {
  author(id: $id) {
    id
    firstName
    lastName
    posts {
      title
    }
  }
}

# variables
{
  "id": 1
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

输出

Operation name

默认变量（Default variables）

query findAuthor($id: Int = 2) {
  author(id: $id) {
    id
    firstName
    lastName
    posts {
      title
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

指令（Directives）

# query
query findAuthor($id: Int = 1, $withPosts: Boolean!) {
  author(id: $id) {
    id
    firstName
    lastName
    posts @include(if: $withPosts) {
      title
    }
  }
}

# variables
{
  "withPosts": false
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

  • @include(if: Boolean) 仅在参数为 true 时，包含此字段。

  • @skip(if: Boolean) 如果参数为 true 时，跳过此字段。

变更（Mutations）

# query
mutation upPost($id: Int!) {
  upvotePost(postId: $id) {
    id
    title
    votes
  }
}

# variables
{
  "id": 1
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

变更中的多个字段（Multiple fields in mutations）

# query
mutation upPost($id: Int!) {
  upVotePost(postId: $id) {
    id
    title
    votes
  }
  clearVotePost(postId: $id) {
    id
    title
    votes
  }
}

# variables
{
  "id": 1
}

# output
{
  "data": {
    "upVotePost": {
      "id": 1,
      "title": "Introduction to GraphQL",
      "votes": 1
    },
    "clearVotePost": {
      "id": 1,
      "title": "Introduction to GraphQL",
      "votes": 0
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 多个变更，按顺序先后执行，但是查询是并行的

内联片段（Inline Fragments）

query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

元字段（Meta fields）

{
  authors {
    __typename
    id
    firstName
    lastName
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  • __typename 显示类型名称

  • 其它元字段，用于描述 内省 系统

Schema 和类型 schema

schema 定义是服务端代码

对象类型和字段（Object Types and Fields）

  type Author {
    """
    流水编号
    """
    id: Int!
    firstName: String
    lastName: String
    """
    用户发布的文章
    """
    posts: [Post]
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  • type 定义对象

  • """ 标记注释

  • Int String 系统对象

  • ! 不能为空

  • […] 数组

  • String! 字符串不为空

  • [String]! 数组不为空

默认标量类型

  • Int 有符号 32 位整数

  • Float 有符号双精度浮点值

  • String UTF‐8 字符序列

  • Boolean true 或者 false

  • ID ID 标量类型表示一个唯一标识符，通常用以重新获取对象或者作为缓存中的键。ID 类型使用和 String 一样的方式序列化；然而将其定义为 ID 意味着并不需要可读型。

自定义类型 scalar

scalar Date
  • 1

详细请移步 03-GraphQL-scalar-自定义类型

枚举类型（Enumeration Types）

  enum Country {
    CN
    ENG
    JP
    UK
    CA
  }

  type Author {
    """
    流水编号
    """
    id: Int!
    firstName: String
    lastName: String
    state(state: Country = CN): String
    """
    the list of Posts by this author
    """
    posts: [Post]
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • state 字段指定了枚举类型，默认值 CN

接口（Interfaces）

  interface Message {
    content: String
  }

  type Notice implements Message {
    content: String
    noticeTime: Date
  }

  type Remind implements Message {
    content: String
    endTime: Date
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

详细请移步 04-graphql-resolvers-interfaces-接口的使用

联合类型（Union Types）

union MessageResult = Notice | Remind
  • 1

详细请移步 05-graphql-resolvers-union-联合的使用

输入类型（Input Types）

# 定义输入类型 `AuthorInput`
input AuthorInput {
  firstName: String
  lastName: String
  state: String
}

# 指定变更变量类型
type Mutation {
  addAuthor (
    author: AuthorInput!
  ): Author
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

验证 validation

通过使用类型系统，你可以预判一个查询是否有效。这让服务器和客户端可以在无效查询创建时就有效地通知开发者，而不用依赖运行时检查。

执行 execution

一个 GraphQL 查询在被验证后，GraphQL 服务器会将之执行，并返回与请求的结构相对应的结果，该结果通常会是 JSON 的格式。

Query: {
  human(obj, args, context) {
    return context.db.loadHumanByID(args.id).then(
      userData => new Human(userData)
    )
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

  • obj 上一级对象，如果字段属于根节点查询类型通常不会被使用。

  • args 可以提供在 GraphQL 查询中传入的参数。

  • context 会被提供给所有解析器，并且持有重要的上下文信息比如当前登入的用户或者数据库访问对象。

内省 introspection

__schema 查询哪些对象可用

# 查询
{
  __schema {
    types {
      name
      kind
    }
  }
}

# 输出
{
  "data": {
    "__schema": {
      "types": [
        {
          "name": "Query",
          "kind": "OBJECT"
        },
        {
          "name": "Post",
          "kind": "OBJECT"
        },
        {
          "name": "Int",
          "kind": "SCALAR"
        },
        {
          "name": "String",
          "kind": "SCALAR"
        },
        {
          "name": "Author",
          "kind": "OBJECT"
        },
        {
          "name": "Country",
          "kind": "ENUM"
        },
        {
          "name": "Message",
          "kind": "INTERFACE"
        },
        {
          "name": "MessageResult",
          "kind": "UNION"
        },
        {
          "name": "Notice",
          "kind": "OBJECT"
        },
        {
          "name": "Date",
          "kind": "SCALAR"
        },
        {
          "name": "Remind",
          "kind": "OBJECT"
        },
        {
          "name": "Mutation",
          "kind": "OBJECT"
        },
        {
          "name": "AuthorInput",
          "kind": "INPUT_OBJECT"
        },
        {
          "name": "__Schema",
          "kind": "OBJECT"
        },
        {
          "name": "__Type",
          "kind": "OBJECT"
        },
        {
          "name": "__TypeKind",
          "kind": "ENUM"
        },
        {
          "name": "Boolean",
          "kind": "SCALAR"
        },
        {
          "name": "__Field",
          "kind": "OBJECT"
        },
        {
          "name": "__InputValue",
          "kind": "OBJECT"
        },
        {
          "name": "__EnumValue",
          "kind": "OBJECT"
        },
        {
          "name": "__Directive",
          "kind": "OBJECT"
        },
        {
          "name": "__DirectiveLocation",
          "kind": "ENUM"
        }
      ]
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • __Schema, __Type, __TypeKind, __Field, __InputValue, __EnumValue, __Directive - 这些有着两个下划线的类型是内省系统的一部分

queryType 查询对象名称

# 查询
{
  __schema {
    queryType {
      name
    }
  }
}

# 输出
{
  "data": {
    "__schema": {
      "queryType": {
        "name": "Query"
      }
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

__type 查询对象

# 查询
{
  __type(name: "Notice") {
    name
    kind
    description
    fields {
      name
      type {
        name
      }
      description
    }
    interfaces {
      name
      description
    }
  }
}

# 输出
{
  "data": {
    "__type": {
      "name": "Notice",
      "kind": "OBJECT",
      "description": "通知对象",
      "fields": [
        {
          "name": "content",
          "type": {
            "name": "String"
          },
          "description": "通知内容"
        },
        {
          "name": "noticeTime",
          "type": {
            "name": "Date"
          },
          "description": "通知时间"
        }
      ],
      "interfaces": [
        {
          "name": "Message",
          "description": "消息接口"
        }
      ]
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

所有的查询对象

# 查询
{
  __type(name: "Query") {
    name
    kind
    fields {
      name
      description
      args {
        name
        description
        defaultValue
      }
    }
  }
}

# 输出
{
  "data": {
    "__type": {
      "name": "Query",
      "kind": "OBJECT",
      "fields": [
        {
          "name": "posts",
          "description": "所有文章",
          "args": []
        },
        {
          "name": "authors",
          "description": "所有作者",
          "args": []
        },
        {
          "name": "author",
          "description": "",
          "args": [
            {
              "name": "id",
              "description": "作者ID",
              "defaultValue": null
            }
          ]
        },
        {
          "name": "searchInterface",
          "description": "",
          "args": [
            {
              "name": "text",
              "description": "",
              "defaultValue": null
            }
          ]
        },
        {
          "name": "searchUnion",
          "description": "",
          "args": [
            {
              "name": "text",
              "description": "",
              "defaultValue": null
            }
          ]
        }
      ]
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

参考

beichen3997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据
会煮咖啡的猫咪
05-27 1182
GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据 目标 开启 graphql mock数据 模式 采用 mock.js 组件进行数据模拟 模拟数据配置 对象 接口 自定义类型 联合 查询 代码 graphQL-example/mock.js 步骤 1. 安装 mock.js 依赖包 npm -S install moc...
fullstack-nextjs-graphql-app
03-31
【Next.js】Next.js是一个由Vercel公司维护的开源JavaScript框架，基于React，专为服务器端渲染(SSR)和渐进式Web应用(PWA)而设计。它简化了React应用的开发流程，提供了开箱即用的功能，如代码分割、静态导出、自动...
谈谈 GraphQL 的历史、组件和生态系统
360linker
09-23 317
多年来，RESTful web 服务一直在为简单查询结构提供基本支持。但是，这些服务没有提供对数据的细粒度控制，从而允许开发人员可以灵活运用而无需创建大量不必要的调用。 GraphQL 最初由 Facebook 构建，它是用于 API 的查询语言，允许开发人员选择他们想要发出的请求类型，并在单个请求中接收所需的信息。 本文中将解释 GraphQL 是什么、它是怎样开始的以及它如何成...
OneGraph开源GraphiQL Explorer大幅增加GraphiQL功能
weixin_34228662的博客
01-29 568
2019独角兽企业重金招聘Python工程师标准>>> ...
GraphQL初探:从REST到GraphQL，更完善的数据查询定义
weixin_34342905的博客
06-21 217
Github 系列文章Repo Introduction GraphQL is Facebook’s new query language for fetching application data in a uniform way. GraphQL并不是一个面向图数据库的查询语言，而是一个数据抽象层，包括数据格式、数据关联、查询方式定义...
GraphQL 在微服务架构中的实践
Docker的专栏
07-19 2086
在过去的将近半年的时间里，作者一直在使用 GraphQL 这门相对新兴的技术开发 Web 服务，与更早出现的 SOAP 和 REST 相比，GraphQL 其实提供的是一...
GraphQL的踩坑之路
phantom_111的博客
05-10 7791
为了更好的支持前端能够自由组合、展示收到的数据，笔者使用graphql-go 框架开发了负责的模块，但测试过程中发现，使用GraphQL会有n+1 query的问题。经过调研发现两种解决方案： 使用graphql-gophers下的graphql-go，已经支持如下特性： minimal API support for context.Context support for the Open...
GraphQL 渐进学习 08-graphql-采用eggjs-服务端开发
会煮咖啡的猫咪
05-27 1923
GraphQL 渐进学习 08-graphql-采用eggjs-服务端开发 软件环境 eggjs 2.2.1 请注意当前的环境，老版本的 egg 可能配置有差异 目标 创建 graphql 服务 用户登录授权 用户访问鉴权 代码 ducafecat/eggjs-graphql-example/egg-server 步骤 1 使用 egg...
GraphQL 渐进学习 09-graphql-apollo-client-vue-客户端开发
会煮咖啡的猫咪
05-27 1100
GraphQL 渐进学习 09-graphql-apollo-client-vue-客户端开发 软件环境 vue > 2.5.x 目标 创建 graphql 客户端 封装请求处理 基于 token 验证 代码 ducafecat/eggjs-graphql-example/vue-client 步骤 1 安装依赖包 npm instal...
mevn-apollo-graphql
03-31
MongoDB是NoSQL数据库，Express是用于构建Web应用的轻量级框架，Vue.js是渐进式前端框架，Node.js则是后端开发的JavaScript运行环境。 2. **GraphQL**：学习GraphQL的概念，如查询、突变、订阅和模式定义，以及如何...
抱怨：找到吃饭的地方。 一个React，GraphQL，MongoDB，Typescript PWA。 帮助用户找到附近的就餐场所（WIP）
02-06
标题 "抱怨：找到吃饭的地方" 是一个基于React、GraphQL、MongoDB和Typescript的渐进式Web应用程序（PWA），其目标是协助用户查找附近的餐饮场所。该项目尚处于开发阶段，意味着它是一个工作中的进程（WIP）。 ...
ssr-sample：服务器端渲染，单页应用程序和渐进式Web应用程序的最小示例
02-01
服务器端渲染，单页应用程序和渐进式Web App的最小样本 这是什么项目 该项目介绍了如何实现SSR，SPA和PWA。 文章 只有日语 特征 该项目显示了如下几种实现。 服务器端渲染 单页申请 渐进式Web应用 GraphQL RESTful...
使用NestJS和GraphQL的Node.js服务
04-07
NestJS是一个基于 TypeScript 的渐进式 Node.js 框架，它融合了 OOP（面向对象编程）、FP（函数式编程）以及 FRP（函数响应式编程）的概念，为开发高质量的后端应用提供了强大的支持。而GraphQL是一种强大的查询语言...
Crypto_30_vHsm_Types.h
07-09
Crypto_30_vHsm_Types
vmware虚拟机安装教程.pdf
最新发布
07-10
VMware虚拟机安装教程是一个详细且系统的过程，涵盖了从下载、安装到配置虚拟机的多个步骤。以下是一个详尽的VMware虚拟机安装教程，旨在帮助用户顺利搭建自己的虚拟环境。
11111111111
07-10
11111111111
nvidia平台torch-2.0.0.nv23.05-cp38-cp38-linux-aarch64安装包
07-09
特定版本的 PyTorch 包，专为 NVIDIA 的 Jetson 平台优化，并且适用于使用 Python 3.8 的 ARM64 架构（如 NVIDIA Jetson 系列设备）上的 Linux 操作系统 PyTorch 是一个广泛使用的开源机器学习库，主要用于深度学习和神经网络的构建和训练。它由 Facebook's AI Research Lab (FAIR) 开发和维护。 提供了强大的张量计算功能以及支持 GPU 加速的计算能力。
计算机试卷2.doc
07-10
### 内容概要 《计算机试卷1》是一份综合性的计算机基础和应用测试卷，涵盖了计算机硬件、软件、操作系统、网络、多媒体技术等多个领域的知识点。试卷包括单选题和操作应用两大类，单选题部分测试学生对计算机基础知识的掌握，操作应用部分则评估学生对计算机应用软件的实际操作能力。 ### 适用人群 本试卷适用于： - 计算机专业或信息技术相关专业的学生，用于课程学习或考试复习。 - 准备计算机等级考试或职业资格认证的人士，作为实战演练材料。 - 对计算机操作有兴趣的自学者，用于提升个人计算机应用技能。 - 计算机基础教育工作者，作为教学资源或出题参考。 ### 使用场景及目标 1. **学习评估**：作为学校或教育机构对学生计算机基础知识和应用技能的评估工具。 2. **自学测试**：供个人自学者检验自己对计算机知识的掌握程度和操作熟练度。 3. **职业发展**：帮助职场人士通过实际操作练习，提升计算机应用能力，增强工作竞争力。 4. **教学资源**：教师可以用于课堂教学，作为教学内容的补充或学生的课后练习。 5. **竞赛准备**：适合准备计算机相关竞赛的学生，作为强化训练和技能检测的材料。 试卷的目标是通过系统性的题目设计，帮助学生全面复习和巩固计算机基础知识，同时通过实际操作题目，提高学生解决实际问题的能力。通过本试卷的学习与练习，学生将能够更加深入地理解计算机的工作原理，掌握常用软件的使用方法，为未来的学术或职业生涯打下坚实的基础。
graphql-java
04-18
GraphQL-Java是一个用于Java语言的GraphQL实现库。它提供了一组API和工具，用于构建和执行GraphQL查询、定义GraphQL模式以及处理GraphQL请求和响应。 GraphQL-Java的主要特点包括： 1. 强类型：GraphQL-Java使用强...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值