在上一篇文章，我簡單介紹了 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 的威力！

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