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

本コースでは、フロントエンドにNextjs、バックエンドにHasuraによるGraphQLサーバーを使ったモダンGraphQL Web開発について学習します。

• Hasura Cloudを使ってGraphQLサーバーを作れるようになる

• Nextjs + Apollo ClientのフロントエンドとHasura endpointを連携出来るようになる(CRUD操作)

• NextjsのSSG/ISRとHasuraが連携出来るようになる。

• Apollo Clientのキャッシュの理解 (4つのfetch policy, cache.modify)

• Apollo Clientにおける状態管理 (makeVar, @client)

• Custom Hooks, useCallback, memoによる最適化

• React-testing-library, Mock service worker, next-page-testerを使ったテスト手法

• GraphQL codegenによる データ型の自動生成

＊Nextjs (getStaticProps, getStaticPaths, ISR)とReact Hooks (useState, useEffect...)の基礎 (別コースや公式Tutorialなど)は事前に簡単な自習 をして頂けると助かります。

本コースで学習する主なトピック

Hasura Cloud

Understanding of Hasura Cloud and GraphQL

Table relationships in Hasura (1:1, 1:N, N:N (中間テーブル))

Integration of Nextjs to Hasura

Apollo Client

Apollo client state management by makeVar + useReactiveVar

Apollo client state management by Apollo cache (query with @client)

Apollo client manual cache update (cache.modify)

Apollo client + Hasura CRUD operations

useQuery + useMutation

4つのfetchPolicyの理解(cache-first, cache-and-network, network-only, no-cache)

Nextjs

getStaticProps + Apollo client (SSG + ISR)

getStaticPaths + Apollo client (SSG + ISR) [id] page

Custom hookによるLogicとUIの分離

useCallback + memo

React-testing-library

Write test cases by next-page-tester, react-testing-library

Mocking GraphQL response by MSW

Automatic test run before deploy

GraphQL types

Graphql codegenによるデータ型の自動生成(Typescript)

---収録機材---

Microphone : SHURE SM7B

Microphone stand : Blue compass

Audio interface : Solid State Logic (SSL 2+)

Movie editor : Screen flow 9