GraphQL EP 1：GraphQL API一種更簡單、靈活的資料輸出方式

GraphQL-API的資料查詢操作語言 / 2022-04-24 / Jovepater

What Is GraphQL

從SOAP一路進展到RESTful API，API為了更適合網路與客戶端的需求不斷地在變化，不只是PC，手機、平板與各種RDW網頁的出現，漸漸的人們遇到了API版本多樣化的問題，綜合為以下兩大類：

1. 客戶端的需求類似，但又不是100%一致
   PC、手機、平板或RDW網頁上同一個功能顯示的資料不盡相同，為了每一種終端設備都開發對應的API顯然是很簡單的作法，但卻也付出很高的成本，不僅僅是開發時的人力與時間，後續維護也是一大難題。
   
2. 需求的變化導致API版本不斷演進，難以管理
   幾個月前的一個需求，API輸出的資料有5個欄位，突然業務單位說客戶體驗不佳，要顯示8個欄位，可預見的將來，欄位會越來越多，此時API也被多個不同的客戶端呼叫，傳統做法就是在URI內加入/v1/、/v2/… 不斷地增加版本，直到天荒地老。

Facebook就遇到了這些問題，不論PC網頁、iOS App、Android App…等，每一種裝置都應該提供一致的體驗，但這之間又有一些差異，這使得API必須提供多種版本來滿足各種不同的客戶端，實在是非常的累人；若要全部整合為一個API，那輸出的欄位就會變得很多，假設全部統一後需要20個欄位，可是iOS App只需要顯示其中的8個，那剩下的12個欄位就是在浪費傳輸的流量與頻寬，對於Facebook這種大流量的服務，一個Request減少100個Byte，10多億使用者加起來就非常的可觀，所以Facebook開發了GraphQL這套新的API工具，並成立基金負責後續維護與開源。

官方網站：https://graphql.org/

開發環境

延續Spring Boot系列，不過之前使用的是Visual Studio Code，此次改用IntelliJ IDEA CE，體驗不同IDE所帶來的趣味吧！

• IDE：IntelliJ IDEA CE
• 語言：Java
• JDK：Open JDK 11

開發第一支GraphQL API吧

創建一個名為”graphqldemo”的專案，然後開始開發第一支API吧！

第1步：於pom.xml加入”Kotlin”版本參數與”graphql-java-tools”相依套件(GitHub)。

<properties>
    <kotlin.version>1.5.0</kotlin.version>
</properties>

<dependency>
	<groupId>com.graphql-java-kickstart</groupId>
	<artifactId>graphql-java-tools</artifactId>
	<version>12.0.2</version>
</dependency>

第2步：於pom.xml加入”graphql-spring-boot-starter”相依套件(GitHub)。

<dependency>
	<groupId>com.graphql-java-kickstart</groupId>
	<artifactId>graphql-spring-boot-starter</artifactId>
	<version>12.0.0</version>
</dependency>

第3步：創建一個名為”queries”的package (在VS Code是資料夾的形式)，並新增一個”HelloQuery.java”。

package com.example.graphqldemo.queries;

import graphql.kickstart.tools.GraphQLQueryResolver;
import org.springframework.stereotype.Component;

// 實作GraphQLQueryResolver，定義Query的輸入與回傳內容
@Component
public class HelloQuery implements GraphQLQueryResolver {
    public String hello() {
        return "Hello World!";
    }

    public String greeting(String name) {
        return String.format("Hello, %s", name);
    }
}

第4步：在resources新增一個”hello.graphqls”檔案。

type Query {
    hello: String
    greeting(name: String!): String
}

schema {
    query: Query
}

至此，已經完成兩支GraphQL API囉，使用Postman來測試一下API吧

第5步：使用Postman測試。

• HTTP Method：Post
• URL：http://127.0.0.1/graphql
• Body Type：GraphQL

Query內容：

{
    hello
}

回傳內容：

{
    "data": {
        "hello": "Hello World!"
    }
}

~ END ~

GraphQL, Spring Boot