iT邦幫忙

0

Laravel + GraphQL 接案心得&範例分享 Part 2:前端 Query/Mutation 與 React 串接範例

  • 分享至 

  • xImage
  •  

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

(此為系列文章,更多內容會在近期發佈)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言