GraphQL in playground

記錄一下怎麼操作playground，以及語法格式

只記錄client怎麼撈資料，所以想找server端怎麼寫的朋友可以速速離去XD。

大概記錄

1 query / mutation 的格式

2 如果要輸入input的格式

3如果output的類型是interface，我要怎麼接

測試用平臺

playGround：架的人比較麻煩，但是使用者就無痛使用囉，通常就是一段網址，也不用額外再安裝任何套件了，例如下網址

GraphQL Playground

(來源自：https://blog.logrocket.com/complete-guide-to-graphql-playground/)

postman：一樣也可以用，截圖來自官方，可點圖示下方網址進postman官方文件說明

https://learning.postman.com/docs/sending-requests/supported-api-frameworks/graphql/

GraphQL格式(In playground)

大概記錄一下使用playground，graphQL格式如何輸入，避免失憶括號怎麼括 XD

1 query / mutation 格式

基本都一樣

query {
    SOME_SCRIPT
}
mutation {
    SOME_SCRIPT
}

2 如果要輸入input的格式

input怎麼輸入 / 怎麼知道我要輸入什麼

附上圖例，點選畫面右方的DOC，依數字順序可看到我應該要輸入什麼格式。

例：我想拿到user的資訊(2)，我發現要拿user資訊，要先打input，而且格式還是UserInput(3)，這時候我可以把往下滑到底(4)，看到我的UserInput(5)實際其實就是要打一個userName，而且格式是String(6)。

好，學會看input是什麼了，所以我要怎麼打給server？

query {
user(input: { userName: "USER_NAME" }) {
    id
    uuid
  }
}

可以看到如果有input的話，格式就變成

query {
  SOME_API_NAME (para: { key1: value1 }) {
    some value you need 
  }
}

我要打的api是user，第一個參數是input(見圖，數字3 or 5)，這個input要吃的類型是UserInput，參數key是userName，並且要給一個字串(見圖6)

那麼some value you need，就是打這支api，我想要拿到的內容，並沒有要全拿，可以自己選要拿哪個，在圖4，滑鼠滾動的過程中，中間那一大截都是這支user API可以拿到的值

3 如果output的類型是interface，我要怎麼接

格式是interface，第一次遇到「…」，他是格式內容沒錯哦!!

可以看到我的node拿到的是個Interface (1)，這時候格式就變成

query {
  
  user (input: {userName: "USER_NAME"}) {
    
     edges {
        node {
          id
          unread
          ... on ArticleNotice {
            type
          }
          ... on UserNotice {
            id
          }
        }
      }
  }
  
  
}

也就是要拿interface的話，格式寫法是

SOME_API_NAME {
  some value you need
  ... on SOME_IMPLEMENTATIONS_NAME_1 {
    some value you need
  }
  ... on SOME_IMPLEMENTATIONS_NAME_2 {
    some value you need
  }
}

要注意

「…」是格式之一