はじめに
GraphQLを試せる環境を構築したいと思い、バックエンドとフロントエンドの開発環境テンプレートをDocker Composeを使用して作成しました。
本テンプレートの範囲は、バックエンドとフロントエンドの構築と疎通（GraphQLでデータ取得＆表示）までとします。
バックエンド構成
- Laravel v10（もうv11出ましたね...）
- Lighthouse
フロントエンド構成
- Vite
- Apollo Client
Apollo Clientを表示するまでの手順
READMEにも記述しておりますが、一応こちらにも。
本記事の冒頭で掲載したテンプレートリポジトリが、ローカルにcloneされていることを前提に話を進めます。
前提環境
プロジェクト作成
バックエンドおよびフロントエンドのプロジェクトを作成します。
Ubuntu
cd script/init/
./create_src.sh
CORS設定
Laravelの以下のファイルを編集します。
/src/backend/config/cors.php
// 'paths' => ['api/*', 'sanctum/csrf-cookie'],
'paths' => ['api/*', 'graphql', 'sanctum/csrf-cookie'],
コンテナ立ち上げ
Ubuntu
docker compose up
テーブル作成
docker compose upで各コンテナが起動している状態で実行してください。
Ubuntu
docker compose exec -u $(id -u):$(id -g) backend php artisan migrate
usersテーブルにレコードを追加。
※ Laravelのスターターキットで用意されているテーブルです。
Ubuntu
docker compose exec -u $(id -u):$(id -g) backend php artisan tinker
入力待ちになるので、以下を入力します。
Ubuntu
\App\Models\User::factory(10)->create();
処理が終了したら「q」と「Enter」を押して、終了します。
表示確認
フロントエンド（Apollo Client）
localhost:4000にアクセスし、以下のように表示されていればOKです。
フロントエンドの実装については、「Get started with Apollo Client」を、Laravelのスターターキットで用意されているテーブルに合わせてカスタマイズしただけです。
LaravelのGraphQLクライアント
localhost/graphiqlにアクセスし、GraphQLを試すことができます。
さいごに
今回は、Laravel + Apollo Clientの構成でGraphQL開発環境テンプレートを構築しました。
このテンプレートをもとにちょこちょこ実装してみようと思っています。
以上、読んでいただきましてありがとうございました🫠