學習 GraphQL 筆記（二）Query Schema

上一篇學完了怎麼定義看得到的資料格是，這一篇就要來學習 Front End 要怎麼取得資料。下面是 Query Schema 的格式：

Operation

GraphQL 提供三個 operation type — query、mutation、subscription。operation type 省略不寫的話，預設會使用 query 來處理。如果一次有多個操作的話，則不能省略。但是建議不要省略，這樣在維護上比較易讀。Operation Name 沒有特別意義，只是幫助區分和維護。

// 不能省略
query {

  search {
    name

  }

}

mutation {
  create(text: "man") {
    text

  }

}

Arguments

Schema 也跟 Object Type 一樣可以帶入參數，來搜尋特定的資料。也可以在參數傳入 Scalar，告訴 GraphQL 在回傳給前端時幫沒做型態的轉換。

{

  human(id: "1000") {

    name

    height(unit: FOOT)

  }

}

Alias

從上面的 Argument，我們可以搜尋出特定條件下的參數。但是有時候我們需要找尋不只一個特定條件的資料，但是相同的名稱又會造成衝突，這時候就可以使用 Alias 來避免這個問題

{
  son: cat(name: "popping") {
    name
    color

  }
  daughter: cat(name: "hino") {
    name
    color

  }

}

Fragment

上一篇在 Interface & Union 內有提到的 Inline Fragment 就是屬於這邊的範疇。Fragment 主要是用於當查詢的結構重複的時候，可以避免冗長的方法。不適用於 Input、Scalar 和 Enum。以上面為例：

fragment basic on Cat {
   name
   color

}

{
  son: cat(name: "popping") {
    ...basic

  }
  daughter: cat(name: "hino") {
    ...basic

  }

}

另外 Fragment 也是可以嵌 Fragment 的，上面的例子可以再改為下面的範例，輸出都是一樣的：

fragment min on Cat {
  color

}

fragment basic on Cat {
   name
   ...min

}

{
  son: cat(name: "popping") {
    ...basic

  }
  daughter: cat(name: "hino") {
    ...basic

  }

}

Inline Fragment

主要搭配 Interface & Union 來做使用，可以取出特定 Object Type 的資料，當 Type 和 Object Type 有匹配時，才會回傳資料

Variables

上面介紹的 Argument 是屬於靜態的傳入，值是固定的。但是大多數的使用情境還是動態的傳入資料，這時候就需要使用 Variables。變數需要在 Operation Name 先宣告，如果沒有使用的話就需求移除，不然會檢驗不過。

# 變數須以 $ 為前綴，Scalar 後面可設定預設值
query HeroNameAndFriends($episode: Episode = "JEDI") {
  # 上方只是定義，這邊才是真的把變數傳入

  hero(episode: $episode) {

    name

    friends {

      name

    }

  }

}

Directives

在有些使用情境下，有時候會依靠變數去改變的不是搜尋特定的資料，而是要去改變查詢資料的結構。GraphQL 就有提供 Directives 來去使用，內建提供 @skip 和 @include 。

@include ：當參數為 true 時包含此 Field
@skip ：當參數為 true 時略過此 Field

# 需要定義使用的地方，且只能使用在定義的地方
# 不確定是否真的需要定義，有試過沒定義也能使用

directive @skip(if: Boolean!) on FIELD | FRAGMENT_SPREAD | INLINE_FRAGMENT

query myQuery($someTest: Boolean) {

  experimentalField @skip(if: $someTest)

}

額外資訊

這邊要特別提到，其實 GraphQL 背後還是使用 HTTP 在傳輸請求的，所以 Server 需要可以支援 GET 和 POST。GraphQL 是把參數轉換成 JSON 的格式

{  
  **"operationName"**:"myQuery",
  **"variables"**:{  

  },
  **"query"**:"query myQuery($someTest: Boolean = true) {\n  animal {\n    name\n    weight @skip(if: $someTest)\n    height\n  }\n}\n"
}

operationName：定義的 operation name
variables：上面介紹的變數，在這邊傳給 Server
query：GraphQL 的操作，用 JSON.stringify來字串化

學習 GraphQL 筆記（二）Query Schema

Comments

GraphQL

學習 GraphQL 筆記（一）Object Type

More from this blog

如何開始入門軟體工程領域 - 名詞解釋（長期更新）

我的 MacBook Pro (Apple Silicon) 設定

ChatGPT 下的發展預想

一些覺得有用的工具蒐藏

LeetCode Solution, Medium, 607. Sales Person

Operation

Arguments

Alias

Fragment

Inline Fragment

Variables

Directives

額外資訊

Command Palette

Comments

GraphQL

學習 GraphQL 筆記（一）Object Type

More from this blog

Operation

Arguments

Alias

Fragment

Inline Fragment

Variables

Directives

額外資訊