Day 03 - GraphQL and GiHub GrapQL Operations, Variables, and Mutations (第 01 屆 Coder Blogathon Taiwan)

我都不會 GraphQL

CoderBridge 網址 Day03

---

Day02 作業我的寫法

• 下面的 edges 代表　repositories 是個 list
• 可以參考 GraphQL Cursor Connections Specification

{ 
 repositoryOwner(login: "tensorflow"){
  id
  repositories(first: 5) {
    edges {
      node {
        id
        name
        url
      }
    }
  }
 }
}

• 回傳 tensorflow 裡面__前五個__repository 的 id, name, url

   {
  "data": {
    "repositoryOwner": {
      "id": "MDEyOk9yZ2FuaXphdGlvbjE1NjU4NjM4",
      "repositories": {
        "edges": [
          {
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk0NTcxNzI1MA==",
              "name": "tensorflow",
              "url": "https://github.com/tensorflow/tensorflow"
            }
          },
          {
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk0NjQ0MzYxMw==",
              "name": "skflow",
              "url": "https://github.com/tensorflow/skflow"
            }
          },
          {
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk1MDQ2MTcwMQ==",
              "name": "serving",
              "url": "https://github.com/tensorflow/serving"
            }
          },
          {
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk1MTExNTk5Nw==",
              "name": "rust",
              "url": "https://github.com/tensorflow/rust"
            }
          },
          {
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk1MTExNzgzNw==",
              "name": "models",
              "url": "https://github.com/tensorflow/models"
            }
          }
        ]
      }
    }
  }
  }
  

  ---

Operation Names

• 比如要重複使用同一種 query 可以給予名稱，比較好使用

  query checkFirstFiveRepo { 
    repositoryOwner(login: "tensorflow"){
  id
  repositories(first: 5) {
    edges {
      node {
        id
        name
        url
       }
     }
   }
  }
   }
  

Variable definitions

• 就像是加上參數的概念啦~

  query checkFirstFiveRepo($login: String!)	 { 
    repositoryOwner(login: $login){
  id
  repositories(first: 5) {
    edges {
      node {
        id
        name
        url
      }
    }
  }
   }
  }
  

• 在坐下角，可將自己設計好的variable加進去去查詢。 　
• 多個參數的設計

Mutations

• 想成　PUT 或　DELETE　在 REST 的架構下。
• 丟 payload
• 不是所有 GraphQL API 有 mutations
• GitHub API 有喔！

用講師：eveporcello 的練習

{
  repositoryOwner(login: "eveporcello"){
    repository(name: "graph-ql-testing"){
      issues(first: 1){
        edges{
          node{
            id 
            title
            body
          }
        }
      }
    }
  }
}

• 回傳

  {
  "data": {
    "repositoryOwner": {
      "repository": {
        "issues": {
          "edges": [
            {
              "node": {
                "id": "MDU6SXNzdWUyMDkwMTAxOTg=",
                "title": "Creating Mutations",
                "body": "This is a good place to add mutations to issues."
              }
            }
          ]
        }
      }
    }
  }
  }
  

• 塞 comment
  • 哈哈哈，真的塞進去了～
• 把剛剛自己塞的 comment 加上 可愛的moji
  • 先撈回剛剛自己 comment 的 id
  • 哈哈哈，真的塞了一個愛心～ 　　

回家作業

• 自己在 GitHub 找一個愛的地方，塞 comments 和 moji~

其實我也是跟著影片學　ＸＤ　

Linkedin Learning

七天～　逼一下自己