はじめに

GraphQLを試せる環境を構築したいと思い、バックエンドとフロントエンドの開発環境テンプレートをDocker Composeを使用して作成しました。

本テンプレートの範囲は、バックエンドとフロントエンドの構築と疎通（GraphQLでデータ取得＆表示）までとします。

バックエンド構成

READMEにも記述しておりますが、一応こちらにも。

本記事の冒頭で掲載したテンプレートリポジトリが、ローカルにcloneされていることを前提に話を進めます。

バックエンドおよびフロントエンドのプロジェクトを作成します。

Ubuntu

cd script/init/
./create_src.sh

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」を押して、終了します。

localhost:4000にアクセスし、以下のように表示されていればOKです。

フロントエンドの実装については、「Get started with Apollo Client」を、Laravelのスターターキットで用意されているテーブルに合わせてカスタマイズしただけです。

localhost/graphiqlにアクセスし、GraphQLを試すことができます。

今回は、Laravel + Apollo Clientの構成でGraphQL開発環境テンプレートを構築しました。

このテンプレートをもとにちょこちょこ実装してみようと思っています。

以上、読んでいただきましてありがとうございました🫠