客戶最近有把舊 laravel 專案改寫為 SPA 的需求，需要前後端分離

為了方便前後端溝通、改善開發者體驗，我建議＆協助他們導入 GraphQL 技術到 laravel 專案中！

實際導入＆開發半年之後，成效非常不錯！前端工程師、後端工程師都用得很開心！

今天跟大家分享一些心得＆範例程式碼！

破除迷思

很多公司聽到 GraphQL 會有點卻步，覺得太新、不成熟

其實，這技術面世八年了，在國外已經被許多公司廣泛採用，不算很新了！

很多公司會以為這是給大公司用的技術，小公司不適合使用

其實，我自己的使用經驗是，就算團隊只有兩個工程師，這技術也很好用，會讓開發速度更快，不會更慢！

laravel 社群會以為這技術在 node 社群、或其他社群比較常見

其實，laravel 社群也有很好用的套件，導入也很方便！

所以這技術非常值得學習、使用，至少了解一下！

優點介紹

我認為最大的優點就是，大幅降低了前後端溝通的成本！

傳統開發，後端寫完 API，要另外寫文件告訴前端網址是多少、回傳的資料格式

然後前端需要用 postman 之類的工具，方便測試、開發

使用 graphql 的話，後端寫完程式碼，就同時自動生成文件＆測試工具了！

為了方便讀者「親自試玩」以上描述，我準備了一個範例專案給大家！

這個專案模擬電商網站，API 可以撈 products 與 comments 兩種資料！

然後可以訂閱商家的電子報，也就是新增 subscriber 這種資料！

實務範例與 API 線上試玩

我先分享範例專案給大家！

https://graphql-laravel-example.tw/

原始碼也已公開

https://github.com/howtomakeaturn/graphql-laravel-example

以往 RESTful 的設計，「讀取資料」這種動作，在 graphql 稱之為 query

https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries

會去「更新資料庫」的動作，在 graphql 稱之為 mutation

https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Mutations

以上兩個資料夾可以翻閱一下，每支 api 會是一個檔案，所以很好管理

接著使用 graphql 社群的強大工具：graphiql，就同時得到文件＆測試工具了！

https://graphql-laravel-example.tw/graphiql

我安裝了一份 graphiql 給大家，點進去玩玩看吧！

把他當成是技術規格文件與 Postman 測試工具，身兼兩種用途！

有了這個工具，大幅減少了前後端需要溝通的事項，對於前後端合作有「巨大幫助」！

（請注意，實務上 graphiql 建議在本機執行，不要這樣線上公開，會有資安疑慮）

套件介紹

在 graphql 社群，有兩種開發 api 的哲學

分別是 schema-first 與 code-first 兩種方法

laravel 社群最知名的 schema-first 套件是這款

https://github.com/nuwave/lighthouse

laravel 社群最知名的 code-first 套件是這款

https://github.com/rebing/graphql-laravel

schema-first 與 code-first 的差異與優缺點我先不細談

總之，我個人比較喜歡 code-first，我覺得比較直觀、簡單、好導入

所以我的範例是用 https://github.com/rebing/graphql-laravel 這套件

您的 laravel 版本建議至少要是 8.0 以上版本，太舊的可能會有問題

順帶一提，兩個套件背後都是使用 https://github.com/webonyx/graphql-php

所以底層元件一樣，兩者有很多通用的觀念，不用太擔心

graphiql 是 graphql 官方的重要工具

laravel 社群已經有人寫好懶人安裝套件了

https://github.com/mll-lab/laravel-graphiql

按照說明安裝即可得到超好用的自動文件＆測試工具面板！

結論

有了以上兩個套件，按照說明分別安裝

然後參考我提供的範例程式碼 https://github.com/howtomakeaturn/graphql-laravel-example

您應該就可以在專案之中導入 graphql 基礎架構，並且開始用 graphql 寫出您的第一支 api

我在替客戶導入的時候，發現網路上 graphql 的教學、說明雖然很多

但是剛開始寫還是很困難，很少範例

所以我製作這份 open source 方便大家參考＆入門

並且直接把 graphiql 面板公開部署上線，方便大家體驗！

（此為系列文章，更多內容會在近期發佈）