[淺談]在 Laravel 中使用 GraphQL(一)

圖片來自： https://blog.pusher.com/graphql-laravel/

前言

有許多人會問，為什麼要使用 GraphQL ，而不是直接使用傳統的 RESTful API 就好了呢？簡單的在 Google 上谷歌 GraphQL 優勢或好處，自然就會看到許多文章，或許你也是從這裡看到這篇文章也不一定。

稍微簡介一下， GraphQL 與 RESTful API 不同的地方是， GraphQL 可以更直覺的對資料庫進行資料的要求，跟資料庫下 SQL 一樣，設定好 select 、 from 、 where 就能夠要求到需要的資料。在這個優勢下，以往一個頁面可能需要請求三到四支 API 才能夠得到足夠渲染的資料， GraphQL 可能只需要向後端伺服器請求一次就能夠獲取足夠的資料，能夠省去前後端溝通的時間及次數。

那為什麼會有這篇文章呢？簡單來說就是因為「潮」， Github 、 Shopify 、 Coursera 、 Twitter 等大型的公司都開始在用了，那我們也要來嘗試看看。

廢話不多說就開始淺談這次的教學。

XAMPP + Laravel

一開始我們需要先有能夠運行 php 的環境來執行 Laravel 的專案。

這裡我們採用的是 Xampp ，Xampp 裡面包含了很多東西，其中有 MySQL 可以當作是存取的資料庫。若有自己已經有資料的資料庫，也可以使用自己熟悉的資料庫。

Xampp 的下載畫面，網址： https://www.apachefriends.org/zh_tw/index.html

下載完後，開啟 XAMPP Control ，把 Appche 與 MySQL 起動。啟動之後就可以打開瀏覽器前往 http://localhost/dashboard/，會看到 Xampp 的介紹頁。

Xampp 啟動 Apache 與 MySQL

接下來我們要去安裝 Laravel ，是一個 PHP 的框架。在這之前需要先去安裝 Composer ，我們需要透過 Composer 來管理套件的相依性。

首先，使用 Composer 下載 Laravel installer：

composer global require "laravel/installer"

然後在指定的目錄下新增 Laravel 專案：

laravel new GraphQL

新增 Laravel 專案

這裡我們是透過 Apache 來執行我們的專案，所以需要做一些設定。先到 xampp/apache/conf/httpd.conf 以及 xampp/apache/conf/extra/httpd-vhosts.conf 設定 Apache 的虛擬站台，這樣可以在瀏覽器看到我們專案的成果。

• 在 xampp/apache/conf/httpd.conf 確保 Include conf/extra/httpd-vhosts.conf 沒有備註解掉。
• 在 xampp/apache/conf/extra/httpd-vhosts.conf 我們要去新增我們的虛擬站台。在 http-vhosts.conf 中加入：

之後，我們去 C:\Windows\System32\drivers\etc\hosts 設定 hosts ，需要在最下面加上 127.0.0.1 GraphQL.local ，需要有系統管理員才能修改檔案。

全部設定完後打開瀏覽器到 http://graphql.local/ 就能夠看到大大的 Laravel了，也就完成了基礎的設定了。

設定完後，看到Laravel 初始頁面

Laravel → migratons → 資料庫新增資料表

GraphQL 是要從資料庫中去獲取資料，因此我們需要先有一個資料庫，而且資料庫裏面需要有一小筆的資料。

首先我們在 Xampp 的控制面板上，點擊 MySQL 上 Admin 按鈕，打開 phpMyAdmin ，新增一個新的資料庫叫做 GraphDB ，我們會將資料寫入這個資料庫。

MySQL 在 php 上的控制板

我們在資料庫中會新增 products 、 product_tags 、 product_category 、 product_tag_related 這四張資料表，來表達商品的種類、標籤等等關係。

首先要先到 .env 檔案中，設定要連接的資料庫、使用者名稱以及密碼。

接者我們需要建立 model 與資料庫中的資料表互動，因此我們需要執行下列命令：

$ php artisan make:model Product -fmr
$ php artisan make:model ProductTag -fmr
$ php artisan make:model ProductCategory -fmr
$ php artisan make:model ProductTagRelated -fmr

上述每個指令後面的 -fmr 可以讓我們在產生 model 時，同一時間產生相對應的 migration 、 factory 。 migration 可以自動地在資料庫中產生資料表，而 factory 則是可以在資料表中自動地產生資料。

利用指令產生的 model 、 migration 以及 factory

接者打開每一個 migration ，我們要開始寫 code 了。Laravel 會根據 migration 在資料庫中建立對應的資料表。

在 migration 中會的 class 中會有 up 跟 down 兩個函式，分別代表建立資料表以及丟棄資料表。

// 建立資料表
up(){ 
    Schema::create([你的資料表名稱], function(Blueprint $table){
        $table->bigIncrements('id');  // 設定表格的欄位名稱以及欄位型別
    })
}
// 丟棄資料表
down(){ 
    Schema::dropIfExists([你的資料表名稱])
}

欄位型別可以參考 Laravel 的官方文件。

1. product 的 migration 會建立 product 資料表的各個欄位以及型別。依此類推 product_tag 、 product_type 、 product_tag_related。
2. 建立 product_tag_related 的目的是要能夠在資料庫中可以連接 product 以及 product_tag ，是屬於關聯式資料庫中 ER-model 中的 R 。

資料夾位置：database\migrations

接者就可以透過指令來在資料庫中建立資料表。

執行所有未完成的migrations

php artisan migrate

還原最後的migration動作

php artisan migrate:rollback

還原指定次數的migration動作

php artisan migrate:rollback --step=5

還原所有的migrations

php artisan migrate:reset

回到 phpMyAdmin ，進入 graphql 資料庫，我們可以看到透過指令建立的四個資料表。其中會看到 migrations 資料表，是用來記錄到目前為止各個資料表修改的次數，可以用來回朔資料表的狀態。

透過指令產生的四個資料表

這次的淺談，我們談到如何透過 Laravel 在 MySQL 上建立以及新增資料表。透過上述的方式，雖然前置動作有點多，但是我們可以自動化的產生資料表，也能夠回朔；當測試階段到了一定程度就可以把測試的假資料丟棄，或是開發階段發生錯誤，也可以把資料庫回到正確的時候。

下一次的淺談，我們會談如何透過 factory 跟 seeder 來自動的產生假資料，以及如何用 GraphQL 取得資料庫中的資料。

謝謝各位的觀看，如有任何問題或是有寫錯的部分也可以在下方留言。

相關參考資料：

[分享] Laravel

[分享] Laravel

多面體工作室 Dometi — Laravel

Laravel 彙整 - 多面體工作室 Dometi

Laravel 官方文件

安裝