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