Day 02 - GraphQL and GitHub GraphQL - Handling Data (第 01 屆 Coder Blogathon Taiwan)

我都不會 GraphQL

CoderBridge 網址 Day02

---

Day01 作業我的寫法

• 可到右邊 Docs 看 Query 細節內容
• 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: tensorflow 和 models

     { 
     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 怎麼半?

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

Linkedin Learning

七天～　逼一下自己