Laravel GraphQL 開発 入門

# セットアップ

まずは、これから GraphQL アプリケーションを開発するために Laravel のセットアップを行いましょう。

# Laravel のセットアップ

Laravel の環境構築には、Laravel コマンドが便利です。

$ laravel new graphql-app
$ cd graphql-app

セットアップが完了したら、.env ファイルを編集します。 DB_から始まるセクションを以下のように書き換えて sqlite が利用できるように設定しておきましょう。

DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=laravel
#DB_USERNAME=root
#DB_PASSWORD=

最後に touch コマンドで sqlite のファイルを作成すれば、準備は完了です。

$ touch database/database.sqlite

データベースにテストデータを格納します。 database/seeds/DatabaseSeeder.php の run メソド内を以下のように記述し、 データベースのセットアップ時に、サンプルで 5件のユーザ情報を格納するよう指定します。

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        factory(\App\User::class,5)->create();
        // $this->call(UserSeeder::class);
    }
}

テストデータの記述が完了したら 下記のmigrate コマンドを実行して、 テストデータを格納します。

$ php artisan migrate:fresh --seed

データベースの中身を確認すると users テーブルが作成され、 中に 5件のデータが格納されているはずです。

# Lighthouse のセットアップ

Laravel での GraphQL アプリケーション開発には、 lighthouse と呼ばれるライブラリが非常に便利です。

composer を利用して、Laravel へ lighthouse のインストールを行いましょう。

$ composer require nuwave/lighthouse

lighthouse のインストールが完了したら、 サンプルの GraphQL クエリをプロジェクトに展開します。

$ php artisan vendor:publish --provider="Nuwave\Lighthouse\LighthouseServiceProvider" --tag=schema

手元に graphql フォルダが作成されていれば、作業は完了です。

GraphQL アプリケーションの開発にあたって、 PhpStorm などの IDE を利用している人は、GraphQL 用のプラグインをインストールしておきましょう。

https://plugins.jetbrains.com/plugin/8097-js-graphql

ダウンロードしたZIP（またはJAR)ファイルをPhpStormのエディタ画面にドラッグアンドドロップすることで、 プラグインをインストールできます。

参考：プラグインをPhpStormに取り入れる他の方法

IDE 用のヘルパーファイルは以下のコマンドで展開できます。 （IDE ヘルパーの生成には、haydenpierce/class-finder が必要なため、事前に composer でインストールしておく必要があります。）

$ composer require --dev haydenpierce/class-finder
$ php artisan lighthouse:ide-helper

上記のコマンドを実行すると、手元に schema-directives.graphql が生成され、 PhpStorm 等の IDE で GraphQL を記述する際に、コード補完が効くようになります。

# GraphQL クライアントのインストール

ここまでで GraphQL 開発の準備は完了です！

以下のコマンドで開発サーバを立てて、実際に GraphQL を利用してみましょう。

$ php artisan serve

GraphQL を利用するには GraphQL のクライアントソフトを利用するのが便利です。 様々な GraphQL クライアントが公開されていますが、 ここでは、以下の altair を利用してみましょう。

https://altair.sirmuel.design/

altair をインストールして、以下のような形で、

  • HTTP Methods を POST に
  • URL には http://localhost:8000/graphql を入力
  • 左端の クエリ欄に以下を記述
query{
  user(id: 1){
    name
  }
}

上記の状態で Send Request を実行して、 真ん中の欄に ユーザ情報が表示されれば、GraphQL の動作は万全です。 実際に アプリケーションの開発に着手していきましょう！

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

  • データベースの users テーブルに 5件分のユーザ情報が入っていますか？
  • php artisan serve で起動したサーバにブラウザからアクセスした際、Laravel の初期画面は表示されますか？
  • altair でクエリを発行して、データベースに保存されている ユーザ情報が 5件分 取得できますか？

タスクリスト DB の作成 →