Apollo Server 4 | Getting Started

>> 發文日期 : 2023/8/9

> 說明

終於有機會在專案開發上接觸到GraphQL,雖然是負責前端的工作,但同時也一起學習一下,順便比較看看跟之前寫Restful的差異。


> 前置準備

因為已經習慣用Typescript開發,就先把Typescript的環境建好,接著安裝Apollo Server 4,並且安裝相關的套件。


> STEP. 1 建立Apollo Server

建立一個index.ts,並且在裡面建立一個Apollo Server,另外我們需要建立兩個typeDefs跟resolvers,這兩個是Apollo Server必須要的,typeDefs是定義GraphQL的Schema,而resolvers則是定義Schema的實作。

> STEP. 2 建立Schema

建立一個typeDefs,需要注意兩個比較特別的type,Query跟Mutation,Query是用來查詢資料,Mutation則是用來修改資料,這邊我們先建立一個Query,並且定義一個type為String的hello。

> STEP. 3 建立resolvers

建立一個resolvers,並且實作hello的功能,這邊我們先回傳一個字串。

> STEP. 4 執行

執行npm start,並且在瀏覽器輸入http://localhost:4000,就可以看到GraphQL的介面,這邊我們可以在左邊的Query輸入hello,並且按下執行,就可以看到右邊的結果。


> 總結

這次的範例主要只是快速建立個簡單的Apollo Server來實作GraphQL,當然上方的Github範例裡有其他功能,像是Mutation,資料的處裡與型別的定義,有興趣的可以參考看看。