在上一篇文章，我簡單介紹了 GraphQL 的好處，以及如何在 laravel 中實作
這一篇文章，接著介紹一下如何在前端使用 React 進行整合
實務範例與 API 線上試玩
上一篇文章我用 graphql + laravel 實作了簡單的電商後台 api
https://graphql-laravel-example.tw/graphiql
這次我用 Next.js 開發了簡單的電商前端 web app
https://graphql-react-example.vercel.app/
歡迎試玩看看！可以瀏覽商品、輸入信箱訂閱電子報
在前端發送 query 的程式碼，可以參考
https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/page.js
在前端發送 mutation 的程式碼，可以參考
https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/newsletter.js
我使用原生的 fetch 函數呼叫 graphql api，所以您用任何一款 http 函式庫也都可以做到
狀態管理我用 Next.js 社群的 swr 當作範例，您完全可以自由使用任何 state manager
優點介紹
我認為前端可以自主決定，要撈取哪些資料，是 graphql 最強大的功能！
後端設計好各種 type 之後，前端就可以自行根據 playground 試玩 api！
https://graphql-laravel-example.tw/graphiql
可以彈性、自由撈取資料，連關聯資料都可以巢狀撈取！
const gql = `query {
products {
id
name
description
featured_image
price
comments {
content
user {
name
}
}
},
}`;大幅減低後端開發時間、前後端溝通時間、以及處理不同情境需要新增多組類似 api 的時間！
完整程式碼
前端完整程式碼請參考
https://github.com/howtomakeaturn/graphql-react-example
上次的後端 graphql 試玩
https://graphql-laravel-example.tw/
後端完整程式碼
https://github.com/howtomakeaturn/graphql-laravel-example
結論
上面 graphql + laravel + react 的範例
我認為原始碼非常單純、易讀，容易開發、也容易維護
您應該可以根據我提供的範例，在專案中試著導入使用
我在替客戶導入 graphql + laravel + react 的時候，發現網路上教學雖然很多，但是缺少範例
所以我製作這些 sample project 方便大家參考＆入門
大家有機會的話一定要試試看 graphql 的威力！
（此為系列文章，更多內容會在近期發佈）
系列文章
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式