GraphQL 结合Apollo 以及vue的例子

GraphQL + Apollo + Vue 的demo

GraphQL 一些关键概念包含 Type，Schema， Query， Mutation等，下面会分别做一下简单的说明，具体还是要结合实际代码进行分析。

查询 (Query)

所谓的查询就是向服务端获取你要想的数据，比如我要查所有的用户列表

// 先定义 User 数据结构
type User {
   
  id: Int!
  name: String!
  age: Int!
}
// query 查询
query {
   
  // 返回一个User类型的集合
  userList() : [User!]
  orderUser(id: Int!) : User// 可以传参查询 // 根据id查询用户信息
}

• 在 REST 风格接口应该是这样子的

GET /api/v1/userList
GET /api/V1/userList/:id/

变更 (Mutation)

• GraphQL 中的 Mutation 是用来改变服务器上的数据的。
  
• 对应着 REST 风格中的 PUT,DELETE,POST。
  
• Mutation的语法风格和Query很类似。关键在解析Mutation过程中会有所不同。

❄️ 值得注意的是，查询字段时，是并行执行，而变更字段时，是线性执行，一个接着一个。

比如说，我要变更title 和 author

type Mutation {
   
  MutationTitleAuthor(title: String, author: String): Book
}

解析 MutationTitleAuthor

 Mutation:{
   
   MutationTitleAuthor(root, args){
     
     console.log(args)
     return {
    
       title:args.title ,
       author: