「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」

この本はそんなスキマを埋めるべく書きました。

近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。

GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。

v1.10 refactor github deploy

GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう

本書でのGraphQLの学び方 - ブログサイト構築を通して

バックエンドから見たGraphQL

フロントエンドから見たGraphQL

GraphQLバックエンドを構築するねらい

NestJS でGraphQLバックエンド - コードファーストアプローチ

Next.js で GraphQLフロントエンド - urql による GraphQL Query

NestJSとPrismaでローカルのPostgreSQLと接続する〜seedまで

NestJSのConfigurationを使ってGraphQL と Prisma を設定する

実践：トップページ

デプロイ：Terraform で Google Cloud へデプロイする準備

デプロイ：Cloud SQL に対して Prisma Migration を実行する

デプロイ：NestJS バックエンドを Cloud Run へデプロイする

デプロイ：Next.js フロントエンドを Cloud Run へデプロイする

実践：記事一覧のブラッシュアップ - MUIの導入

実践：記事一覧のブラッシュアップ - AliasesとFragmentの利用

実践：記事詳細 - フィールドに対するResolver

実践：プロフィール - microCMSからデータ取得

実践：コメント機能 - Mutationの利用

実践：全記事の一覧 - Relay style Pagination

おわりに | 参考文献

付録：記事を Cloud Storage から取り込むMutation

付録：変更点を反映してデプロイ

GraphQL スターターパック 兼 函館スレッド

graphql

nextjs

prisma

nestjs

Claude Code / Claude Code Action を Google Cloud Vertex AI 経由で使う

waddy_u

2025年の最も大きなチャレンジ

Auth0 for AI Agents を理解するために Google カレンダーと連携するサンプルアプリを動かす

Zennfes2025・テーマ「業務でのインフラ・セキュリティ」

ZennのRSSで流れてきた記事をGeminiでレビューしてSlackへ投稿する

記事投稿コンテスト「今年の最も大きなチャレンジ」

Cloud Buildトリガーのサービスアカウントをデフォルトから作成したものへ付け替える

記事投稿コンテスト「Google Cloud」