Day02: GraphQL and GitHub GraphQL - Handling Data


Day01 作業我的寫法

  • 可到右邊 Docs 看 Query 細節內容
    img
  • Query
    query { 
    repositoryOwner(login:"tensorflow", ){
    avatarUrl
    id
    repository(name: "models"){
      url
     }
    }
    }
    
  • 回傳結果
     {
    "data": {
      "repositoryOwner": {
        "avatarUrl": "https://avatars1.githubusercontent.com/u/15658638?v=4",
        "id": "MDEyOk9yZ2FuaXphdGlvbjE1NjU4NjM4",
        "repository": {
          "url": "https://github.com/tensorflow/models"
        }
      }
    }
    }
    

Handling Data

  1. Ailases

    • 如果要重複使用 Field 的話可以用這招
    • 都去看 tensorflow 下面的 repo: tensorflowmodels

      { 
      repository(name:"tensorflow", owner:"tensorflow" ){
        homepageUrl
        id
       }
      repository(name:"models", owner:"tensorflow" ){
        homepageUrl
        id
       }
      }
      
      • 會出錯

        {
        "errors": [
        {
        "path": [],
        "extensions": {
        "code": "fieldConflict",
        "fieldName": "repository",
        "conflicts": "{name:\"\\\"tensorflow\\\"\",owner:\"\\\"tensorflow\\\"\"} or {name:\"\\\"models\\\"\",owner:\"\\\"tensorflow\\\"\"}"
        },
        "locations": [
        {
          "line": 7,
          "column": 1
        },
        {
          "line": 12,
          "column": 1
        }
        ],
        "message": "Field 'repository' has an argument conflict: {name:\"\\\"tensorflow\\\"\",owner:\"\\\"tensorflow\\\"\"} or {name:\"\\\"models\\\"\",owner:\"\\\"tensorflow\\\"\"}?"
        }
        ]
        }
        
    • Ailases: 改寫成這樣

      • 在query前面加上自訂的名稱

        { 
         tesnsorflowProject: repository(name:"tensorflow", owner:"tensorflow" ){
               homepageUrl
               id
           }
         modelsProject: repository(name:"models", owner:"tensorflow" ){
               homepageUrl
               id
              }
        }
        
      • 完美回傳

        {
        "data": {
        "tesnsorflowProject": {
        "homepageUrl": "https://tensorflow.org",
        "id": "MDEwOlJlcG9zaXRvcnk0NTcxNzI1MA=="
        },
        "modelsProject": {
        "homepageUrl": "",
        "id": "MDEwOlJlcG9zaXRvcnk1MTExNzgzNw=="
        }
        }
        }
        
  2. Fragments

  • 把會重覆要抓抓的 fielss 拿出來方便使用&簡潔~

    • ...寫法跟 javascript 一樣 XDD

      { 
      tesnsorflowProject: repository(name:"tensorflow", owner:"tensorflow" ){
       ...repoFields
      }
      
      modelsProject: repository(name:"models", owner:"tensorflow" ){
       ...repoFields
      }
      }
      
      fragment repoFields on Repository{
      id
      homepageUrl
      description
      }
      
    • 回傳

      {
      "data": {
      "tesnsorflowProject": {
       "id": "MDEwOlJlcG9zaXRvcnk0NTcxNzI1MA==",
       "homepageUrl": "https://tensorflow.org",
       "description": "An Open Source Machine Learning Framework for Everyone"
      },
      "modelsProject": {
       "id": "MDEwOlJlcG9zaXRvcnk1MTExNzgzNw==",
       "homepageUrl": "",
       "description": "Models and examples built with TensorFlow"
      }
      }
      }
      

很好~ 今天玩很多了 XDDD

Day02 作業 (其實懶得打了 XDD

  • 如果要query Nested fields / Pagination 怎麼半?

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








你可能感興趣的文章

Return first capital letter and its index

Return first capital letter and its index

變成rule的形狀(2) - ESLint

變成rule的形狀(2) - ESLint

JavaScript - GoToTop 作法

JavaScript - GoToTop 作法






留言討論