GraphQL 客戶端開發

時間  2019-11-06
標籤 graphql 客戶端 開發 简体版
原文   原文鏈接

4.1 基本查詢

按需獲取須要的數據bash

// 定義類型
const typeDefs = gql`
  type Hero {
    name: String
    age: Int
  }

  # 查詢類型
  type Query {
    hero: Hero
  }

`;

// resolver 函數
const resolvers = {
  Query: {
    hero: () => {
      return {
        name: 'nordon',
        age: 18
      }
    }
  },
};

複製代碼
// 查詢 hero 對象的 name 屬性
{
	hero {
		name
	}
}

// 結果
{
  "data": {
    "hero": {
      "name": "nordon"
    }
  }
}
複製代碼
  • 注意事項
    • GraphQL 只有一個utl地址、客戶端查詢的全部信息都經過該地址獲取數據
    • 能夠更具須要按照實際的需求獲取特定的數據

4.2 操做名稱

有多個操做時、操做名稱是必須的、爲了調試方便最好添加操做名服務器

  • 規則 — 操做類型 操做名稱(操做名稱自定義)
  • 操做類型主要有兩種
    • query 用於查詢
    • mutation 用於數據變動 — CRUD
# 定義數據類型
const typeDefs = gql`

  # 輸入類型
  input UserInfo {
    name: String
    pwd: String
  }

  # 用戶類型
  type User {
    id: ID
    name: String
    pwd: String
  }

  # 變動類型
  type Mutation {
    addUser(userInfo: UserInfo): User
  }

  # 查詢類型
  type Query {
    hello: String
    msg: String
  }

`;



// 3. 解析數據類型對應的具體數據
const resolvers = {
  Query: {
    hello: () => 'hi query',
    msg: () => 'msg query'
  },
  Mutation: {
    addUser: (parent, args) => {
      return {
        id: uuid(),
        name: args.userInfo.name,
        pwd: args.userInfo.pwd
      }
    }
  }
};

複製代碼
# 須要定義 每一個查詢的類型名稱、存在多個查詢前面必須存在 query、

query helloInfo {
  hello
}

query msgInfo {
  msg
}

mutation addUser {
  addUser(userInfo: {
    name: "nordon",
    pwd: "123123"
  }){
    id
    name
    pwd
  }
}
複製代碼

01.png 函數

  • 注意事項
    • 推薦全部的查詢和變動操做都添加操做名稱

4.3 查詢參數

有時候須要根據特定的條件查詢數據、此時能夠使用查詢參數post

const typeDefs = gql`
  # 學生類型
  type Student {
    name: String
    age: Int
    gender: Boolean
  }

  # 查詢類型
  type Query {
    hello: String
    stu(id: Int, name: String): Student
  }

`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
    stu: (parent, args) => {
      let stu = null;

      if(args.id === 1 && args.name === 'nordon'){
        stu = {
          name: 'norodn',
          age: 18,
          gender: true
        }
      }else {
        stu = {
          name: 'null',
          age: 0,
          gender: false
        }
      }

      return stu
    }
  },
};
複製代碼
query stu {
  stu(id: 1, name: "nordon"){
    name
    age
    gender
  }
}
複製代碼

02.png 網站

  • 注意事項
    • 查詢字段能夠攜帶參數、而且能夠攜帶多個參數、參數之間經過逗號隔開

4.4 變量

有時字段的參數須要動態提供、而不是固定的值、此時就能夠使用變量、相似函數中的形參ui

// 定義數據類型
const typeDefs = gql`
  # 課程類型
  type Course {
    cname: String
    score: Float
  }

  # 學生類型
  type Student {
    id: ID
    sname: String
    age: Int
    scores(num: Float): [Course]
  }

  # 查詢類型
  type Query {
    stu(id: Int): Student
  }

`;

// 解析數據類型對應的具體數據
const resolvers = {
  Student: {
    scores: (parent, args) => {
      return parent.scores && parent.scores.filter(item => item.score > args.num)
    }
  },
  Query: {
    stu: (parent, args) => {
      if(args.id === 1){
        return {
          id: uuid(),
          sname: 'nordon',
          age:18,
          scores: [{
            cname: '數學',
            score: 66
          },{
            cname: '英語',
            score: 55
          },{
            cname: '語文',
            score: 77
          }]
        }
      }else{
        return {
          id:0,
          sname: 'null',
          scores: null
        }
      }
    }
  },
};
複製代碼

03.png spa

04.png 3d

  • 注意事項
    • 變量類型必須是標量、枚舉型、輸入對象類型
    • 變量能夠有默認值 ($id: Int = 1)

4.5 指令

有時候查詢的字段數量不是固定的、此時能夠經過制定的方式進行控制調試

  • 兩個指令
    • @include(if: Boolean) 僅在參數爲 true 時包含此字段
    • @skip(if: Boolean) 若是參數爲 true 時跳過此字段
// 定義數據類型
const typeDefs = gql`
  # 學生類型
  type Student {
    id: ID
    name: String
    gender: Boolean
  }

  # 查詢類型
  type Query {
    stu(id: Int): Student
  }

`;

// 解析數據類型對應的具體數據
const resolvers = {
  Query: {
    stu: (parent, args) => {
      if(args.id === 1){
        return {
          id: uuid(),
          name: 'nordon',
          gender: true
        }
      }else{
        return {
          id: uuid(),
          name: 'wangyao',
          gender: false
        }
      }
    }
  },
};
複製代碼
# 若是指令使用的、須要顯示的傳遞字段、須要在後面增長一個！歎號
query stu($id: Int, $gender: Boolean!){
  stu(id: $id){
    id
    name
    gender @include(if: $gender)
    # gender @skip(if: $gender)
  }
}
複製代碼

05.png code

06.png

  • 注意事項
    • 能夠經過這兩個指令動態的控制查詢的字段數量
    • 指令用到的變量定義時須要添加！歎號、強制必須提供該值

4.6別名

經過不一樣的參數來查詢相同的字段信息、好比查詢學生的數學和英語成績

// 定義數據類型
// Query 類型是默認客戶端查詢的類型、而且該類型在服務端必須存在而且是惟一的
const typeDefs = gql`
  # 課程類型
  type Course {
    cname: String
    score: Float
  }

  # 學生類型
  type Student {
    id: ID
    sname: String
    age: Int
    scores(cname: String): [Course]
  }

  # 查詢類型
  type Query {
    stu: Student
  }
`;
01.png
// 解析數據類型對應的具體數據
const resolvers = {
  Student:{
    scores: (parent, args) => {
      if(args.cname === '數學' || args.cname === '語文'){
        return parent.scores.filter(item => item.cname === args.cname)
      }else{
        return parent.scores
      }
    }
  },
  Query: {
    stu: (parent, args) => {
      return {
        id: uuid(),
        sname: 'nordon',
        age:18,
        scores: [{
          cname: '數學',
          score: 66
        },{
          cname: '英語',
          score: 55
        },{
          cname: '語文',
          score: 77
        }]
      }
    }
  },
};
複製代碼
query stu{
  stu{
    id
    sname
    math: scores(cname: "數學"){
      cname
      score
    },
    china: scores(cname: "語文"){
      cname
      score
    },
    all: scores{
      cname
      score
    }
  }
}
複製代碼

07.png

  • 注意事項
    • 能夠經過別名的方式獲取特定某幾項數據(查詢接口的數據格式相同)

4.7 變動

改變服務器數據須要用到mutation操做

// 2. 定義數據類型
// Query 類型是默認客戶端查詢的類型、而且該類型在服務端必須存在而且是惟一的
const typeDefs = gql`
  #輸入類型
  input UserInfo {
    uname: String
    pwd: String
  }

  # 用戶類型
  type User {
    id: ID
    uname: String
    pwd: String
  }

  # 變動類型
  type Mutation {
    addUserByParams(uname: String, pwd: String): User
    addUserByInput(userInput: UserInfo): User
  }

  # 查詢類型
  type Query {
    hello: String
  }

`;

// 3. 解析數據類型對應的具體數據
const resolvers = {
  Query: {
    hello: () => 'Hello world!'
  },
  Mutation: {
    addUserByParams: (parent, args) => {
      return {
        id: uuid(),
        uname: args.uname,
        pwd: args.pwd
      }
    },
    addUserByInput: (parent, args) => {
      return {
        id: uuid(),
        uname: args.userInput.uname,
        pwd: args.userInput.pwd
      }
    }
  }
};
複製代碼
mutation addUserByParams {
  addUserByParams(uname: "nordon", pwd: "123123"){
    id
    uname
    pwd
  }
}

mutation addUserByInput($userInput: UserInfo){
  addUserByInput(userInput: $userInput){
    id
    uname
    pwd
  }
}
複製代碼

08.png

  • 注意事項
    • 經過 mutation 關鍵字實現變動操做
    • userInput 變量並不是標量、而是一個輸入類型
    • 參數的傳遞能夠經過普通參數、也能夠使用輸入類型、通常較爲複雜的數據採用輸入類型

參考網站

grapgQL官網

apolloserver官網

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程