[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発

🎓 [Hasura基礎編] Nextjs + Hasura + Apollo Clientで学ぶモダンGraphQL Web開発

コース概要

本コースでは、フロントエンドのNext.jsとバックエンドのHasuraによるGraphQLサーバーを組み合わせた現代的なWeb開発技術を学びます。このコースでは、Next.jsの革新的なSSG（Static Site Generation）とISR（Incremental Static Regeneration）、Hasura Cloudの強力なAPI、Apollo Clientの状態管理、そしてReact-testing-libraryを用いたテスト手法など、モダンなフルス택を凝縮する方法を学びます。

学習内容 📚

Hasura Cloud

• Hasura CloudとGraphQLの基本理解
• Hasuraでのテーブル間の関係性（1:1, 1:N, N:N（中間テーブル））の管理
• Next.jsとHasuraの統合方法

Apollo Client

• Apollo Clientでの状態管理の仕組み、makeVar + useReactiveVarの使用方法
• Apollo Clientのキャッシュ管理と更新手順（cache.modify）
• GraphQLクエリの実行とマルチクリアント操作（useQuery + useMutation）
• 4つのフェッチポリシー（cache-first, cache-and-network, network-only, no-cache）の理解と適用方法

Next.js

• getStaticPropsとApollo clientを使ったSSG（Static Site Generation）とISR（Incremental Static Regeneration）の実装技術
• getStaticPathsとApollo clientを使った個別ページのSSG＆ISR
• カスタムフックによるロジックとUIの分離との協力方法
• useCallback + memoの最適化技術

React-testing-library

• next-page-testerとreact-testing-libraryを用いたテストケースの書き方
• MSW（Mock Service Worker）でのGraphQL応答モックng
• CI/CDパイプラインにおける自動テストの実施

GraphQL types

• GraphQLコードジェネレータを使ったデータ型の自動生成（TypeScript）

収録機材

• マイク：SHURE SM7B
• マイクスタンド：Blue compass
• オーディオインターフェース：Solid State Logic (SSL 2+)
• 映像編集：Screen Flow 9

必須習慣

• Next.js（getStaticProps, getStaticPaths）の基礎は事前に自習しておくと良い。公式Tutorialなど参照可能です。

👩‍💻 このコースを通じて、あなたはモダンなGraphQL Web開発を導入し、フロントエンドとバックエンドの連携能力を高めることができます。現在この機会を逃さない！ 🚀

このコースは、あなたがWeb開発の新しい境界線に立ち向かう準備を整えるための理想的なスタート点となります。最新の技術とベストプラクティスを学び、実践的なプロジェクトを通じて自分のスキルを磨き上げましょう！