Day 03: GraphQL and GiHub GrapQL - Operations, Variables, and Mutations


Day02 作業我的寫法

{ 
 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加進去去查詢。
    img 

  • 多個參數的設計
    img

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
    img

  • 把剛剛自己塞的 comment 加上 可愛的moji

回家作業

  • 自己在 GitHub 找一個愛的地方,塞 commentsmoji~

其實我也是跟著影片學 XD 
Linkedin Learning
七天~ 逼一下自己








你可能感興趣的文章

ASP.NET Core Web API 入門教學 - 基本上傳檔案

ASP.NET Core Web API 入門教學 - 基本上傳檔案

元件介紹-Day04 #  Props 向內層元件傳遞資料狀態

元件介紹-Day04 # Props 向內層元件傳遞資料狀態

來學 React 吧之八_部署 React App

來學 React 吧之八_部署 React App






留言討論