GraphQL のおすすめの教材8選！ 【 2023年3月 最新版】

本コースでは、フロントエンドに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

1. はじめに
2. Overview
3. コースで必要なツール
4. GitHub (本コースのソースコード)
5. Hasura Cloud
6. [補足] Project name
7. Hasura Cloud : create table
8. Hausra Cloud : One to Many relationships
9. [注意] Hasura仕様更新 One to One relationship
10. Hasura Cloud : One to One relationships
11. Hasura Cloud : Many to Many relationships
12. Apollo Client + Nextjs
13. ReferenceError document is not defined 対処法
14. [注意] Tailwind CSS ver3.0
15. [注意] Install libraryのversion指定
16. [エラー対策] ComponentをJSXコンポーネントとして使用することはできません
17. Nextjs project setup
18. Automatic types generation by codegen
19. Nextjs ver11.0対応
20. Layout component
21. State management in Apollo Client
22. makeVar + useReactiveVar
23. Integration of Nextjs/Apollo client with Hasura
24. Direct access to cache (@client)
25. Full understanding of fetch policy
26. CRUD(Hasura) cache.modify
27. CRUD(Hasura) memo
28. [補足] yarn build時の missing display name error
29. SSG + ISR with Apollo client
30. Custom Hook + useCallback + memo
31. React-testing-library with GraphQL
32. ReferenceError: setImmediate is not defined 対処法
33. [注意] NavBar Test FAIL
34. Test code of navigation + useQuery
35. Test code of CRUD + SSG pages
36. Deploy to Vercel
37. Protection of Hasura endpoint
38. [注意] env.test.localの読み込みエラー
39. Deploy to Vercel
40. 更に学びたい人向け
41. ボーナスレクチャー

REST APIに代わるモダンAPI「GraphQL」を初めて触る人に向けたコース構成になっています。

■ 本コースの対象者

・GraphQL完全初心者の方

・GraphQLを学んでREST APIとの違いを明確に理解しておきたい方

・GraphQLの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・クエリやリゾルバ等の難しい概念をサクッと理解したい方

RESTに代わることで近年注目されているGraphQL。

余計な情報を取得しないスマートなWebAPI構築が実現できます。

バックエンドエンジニアとしてはキャッチアップしておきたい最新技術の１つ。

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・すでにGraphQLの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・フロントエンド側の実装は行っておりません。バックエンドAPI構築に注力しています。

1. はじめに
2. 本講座で学ぶこと・デモ
3. 本講座を学習する流れ
4. GraphQL入門
5. GraphQLって何？
6. GraphQLとREST APIの違いって何？メリットは？
7. Apolloって何？
8. GraphQLサーバー構築【簡単なクエリ編】
9. GraphQLサーバー用にプロジェクトを作成しよう
10. ApolloServerを使ってローカルサーバを構築する準備をしよう
11. リゾルバを定義してリゾルバについて理解しよう
12. 実際にApolloでローカルサーバーを立ち上げよう
13. Playgroundを実際に使ってGraphQLを体感してみよう
14. スキーマ定義をHackerNews用に拡張してみよう
15. 拡張したスキーマでGraphQLを叩いて確認してみよう
16. リゾルバとは何か？
17. GraphQLサーバー構築【ミューテーション実装編】
18. ミューテーション(Mutation)をスキーマとリゾルバで定義しよう
19. 実際にMutationクエリを叩いてニュースを投稿してみよう
20. スキーマ定義を別ファイルで管理してリファクタリングしよう
21. GraphQLサーバー構築【データベース編】
22. Prismaって何？
23. Prismaでデータベースの初期化から始めよう
24. Prismaのスキーマ設定を行おう
25. Prismaクライアントでデータベース操作をしてみよう
26. データの永続化ができているかを確認しよう
27. GraphQLサーバー構築【Prismaクライアント接続編】
28. サーバーとPrismaを連携させてデータベースから情報を取り出そう
29. contextをリゾルバで利用してデータベースにアクセスしよう
30. 実際にGraphQLを叩いてデータベースに値を格納してみよう
31. PrismaStudioを使ってデータベースの中身を確認しよう
32. GraphQLサーバー構築【ユーザー認証編】
33. ユーザー認証のためのUserモデルを追加してみよう
34. UserとLinkモデルの関係を明示的に示そう(外部キー設定)
35. サインアップとログインのMutationを設定しよう
36. リゾルバを管理するためのリファクタリングしよう
37. Mutationリゾルバで新規登録のロジックを作成してみよう
38. JWTを使って新規登録するユーザーをトークン化してみよう
39. ユーザーログインのリゾルバを作成しよう
40. ニュース投稿用のリゾルバを作成しよう
41. ユーザーIDを取得するためのutil.jsファイル作成を始めよう
42. ユーザートークンを複合する関数を生成してみよう
43. ユーザーIDを全てのリゾルバで呼び出せる設定をしてみよう
44. postリゾルバを完成させよう
45. Linkリゾルバの実装を始めよう
46. リゾルバ階層って何？parent引数の意味を理解しよう
47. Userリゾルバの実装を始めよう
48. サーバー側のリゾルバコードをリファクタリングしてみよう
49. 正常に認証できるのかフローを確認してみよう
50. ログインして実際にニュースを投稿してみよう
51. 【発展編】GraphQLサーバー構築【サブスクリプション編】
52. サブスクリプション機能って何？
53. ApolloサーバーでPubSub設定を始めてみよう
54. Subscriptionリゾルバ(受信側)の設定を始めよう
55. Mutationで送信側のpostリゾルバを修正しよう
56. 実際にリアルタイム通信ができるか確認してみよう
57. ニュースに投票できる機能を追加してみよう
58. 投票用のGraphQLスキーマを作成してみよう
59. 投票用リゾルバを作成してみよう
60. 新しく投票するリゾルバの実装をはじめよう
61. 【※次のレクチャーにおける訂正】
62. VoteとLinkとUserモデルの新しい関係性を考慮しよう
63. 受信側のSubscription設定を行おう
64. リアルタイムで投票ができるのか確認してみよう
65. ボーナスレクチャー
66. ボーナスレクチャー

本コースでは、GraphQLの技術についてDjango(graphene-django)によるサーバー実装と、React Hooks/Apollo Clientによるフロントエンド実装について学んでいきます。セクション2でGraphQLの基礎を学び、セクション３、４で実践編としてオリジナル従業員管理システムを作成しながらGraphQLのサーバーサイドとクライアントの連携も含めて学習していきます。

⭐️学習ポイント

Section 2 :  基礎

• GraphQL理論

• GitHub GraphQL API の ドキュメント理解とハンズオン

  　query, mutation, フィルター、フラグメント、変数、Node, Edge, Connection, Relay Server Specification, Cursor based pagination

  
  

Section 3:  Djangoを使ったGraphQLサーバーサイド実装

• DjangoでGraphQLサーバー実装(Schema)

• 従業員管理システムのハンズオン (CRUD, フィルター、Pagination)

• JWT認証の実装

  
  

Section 4: React Hooks/Apollo Client を使ったフロントエンド実装

• React Hooks + Apollo Client 3.0

• サーバーサイドとの連携

• useQuery, useLazyQuery, useMutationの使い方

• useContext + useStateによるグローバル状態管理

1. はじめに
2. はじめに
3. コースで必要なツールインストール
4. Graph QL入門 (GitHub API)
5. GraphQLとRelay Server Specification
6. Query : GitHub API
7. [訂正] Private repository
8. Node, Edges, Connection : GitHub API
9. Mutation : GitHub API
10. [実践前半] Graphene-djangoサーバー実装
11. GitHub Link
12. [注意]PyJWTのversion
13. Django Project 作成
14. Models
15. Query Schema
16. Mutation Schema
17. GraphQL Views
18. GraphiQLで動作確認(Department)
19. GraphiQLで動作確認(Employee)
20. [実践後半] React + Apollo Client フロントエンド
21. GitHub Link
22. [注意] react-router-dom ver6.0以降 + "--legacy-peer-deps"オプション
23. React Project 作成
24. useMutation + JWT
25. SignOut
26. useQuery (Employees)
27. useMutation (Create + Update employee)
28. useMutation (Delete employee)
29. [修正]useLazyQuery
30. useLazyQuery (Single Query)
31. useQuery (Departments)
32. Filtering
33. Pagination
34. 更に学びたい人向け
35. ボーナスレクチャー

RESTful Web API（REST）の持つ問題を解決するために開発されたGraphQLは、
近年、益々注目を浴びてきています。
2020年 GraphQLは、さらに注目されることは間違いないでしょう。
このコースでは、そんな注目度の高いGraphQLを実際にサーバーを建て
CRUD処理を体系的に学んでいきます。

1. はじめに
2. 第1回 はじめに
3. 概要
4. 第2回 GraphQLとは
5. セットアップ
6. 第3回 アプリケーションのセットアップ
7. アプリケーション作成
8. 第4回 Schema定義
9. 第5回 mongoDBへの接続
10. 第6回 Query - GraphQLでデータを取ってこよう
11. 第7回 Mutation - GraphQLでデータを挿入しよう
12. 第8回 Directorデータの追加・取得
13. 第9回 リレーションの追加
14. 第10回 一覧データの取得
15. 第11回 mutationによるデータの更新
16. 第12回 mutationによるデータの削除
17. 終わりに
18. 終わりに

本コースでは、HasuraのPermission機能、JWTによるエンドポイントの保護(Firebase Auth)とReact-queryによるGraphQL CRUD操作、React-queryとNextjs (SSG + ISR)の連携方法を中心にReactのGraphQL Web開発について学習します。

***注意点***

本コースでは、Firebase Cloud functionsを使用する為、Blazeプランにアップグレード時にクレジットカード情報が必要になります。

本コースの学習ポイント

• Firebase Authによるユーザー認証

• Firebase AuthとHasura JWTの連携 (custom claims)

• Hasura Permission機能

• react-queryによるサーバーデータ状態管理(GraghQL)

• redux-toolkitによるクライアント(UI)状態管理 in Nextjs

• Nextjsとreact-query連携(SSG + ISR) : Hydration/Dehydration

• useQuery + useMutationによるGraphQL CRUD処理 (react-query <---> Hasura server)

  
  

技術トピック

Nextjs, Hasura, react-query, Firebase(Cloud function, authentication, cloud store), TypeScript, Redux-toolkit, TailwindCSS

1. はじめに
2. コース概要
3. コースに必要な準備
4. Node version
5. Firebase + Hasura JWT 認証機能
6. GitHub Repo
7. New Hasura project
8. GraphQL API
9. 環境構築の注意点(3点)
10. New Nextjs project
11. Firebase setup
12. JWT config
13. useUserChanged (custom hook)
14. useFirebaseAuth + useLogout (custom hook)
15. Auth component
16. React-query + Hasura CRUD機能
17. Redux toolkit in Nextjs
18. GraphQL query + mutation
19. useQuery (custom hook)
20. useMutation (custom hook)
21. News List
22. News Edit
23. Task List + Task Edit
24. onError + removeQueries
25. React-query with SSG + ISR
26. [訂正] NewsList + TaskList コンポーネント
27. Deploy to Vercel
28. 更に学びたい人向け
29. Firebase SDK ver9以降対応
30. ボーナスレクチャー