[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発

Nextjs + React-query + Firebase + Hasura + Redux-toolkit + TypeScriptによるGraphQL Web開発手法を習得

4.30 (65 reviews)
Udemy
platform
日本語
language
Network & Security
category
instructor
810
students
3.5 hours
content
Mar 2024
last update
$59.99
regular price

What you will learn

react-queryを使ったServer data state management (GraphQL)

react-queryとnextjsの連携(SSG + ISR)

Nextjsとredux toolkitの連携

react-queryとHasuraの連携(CRUD)

Firebaseによるユーザー認証 (Hasura JWT)

Description

本コースでは、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

Content

はじめに

コース概要
コースに必要な準備

React-query with GraphQL (SpaceX API)

GitHub Repo
React-query with SpaceX GraphQL API

Firebase + Hasura JWT 認証機能

GitHub Repo
New Hasura project
GraphQL API
New Nextjs project
Firebase setup
JWT config
useUserChanged (custom hook)
useFirebaseAuth + useLogout (custom hook)
Auth component

React-query + Hasura CRUD機能

Redux toolkit in Nextjs
GraphQL query + mutation
useQuery (custom hook)
useMutation (custom hook)
News List
News Edit
Task List + Task Edit
onError + removeQueries
React-query with SSG + ISR
[訂正] NewsList + TaskList コンポーネント
Deploy to Vercel

Screenshots

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Screenshot_01[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Screenshot_02[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Screenshot_03[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Screenshot_04

Reviews

S
March 28, 2022
基礎編から入り、応用編に進みました。 Haslaが初めてでもついていくことができる内容です。 応用編でも急に難しくなる訳ではなく、基礎編のステップアップといった感じです。 これからも楽しく学べる良質な教材楽しみにしております。
Yuya
February 7, 2022
前提といたしまして、基礎編と応用編に分かれており、応用編のみ購入したユーザー目線でのレビューとなります。Hasura応用編というタイトルを見て、基礎編が存在するとこを認識せずに購入いたしました。 タイトルに対してコースの比重が適切ではなかったかなと感じました。Hasuraを全面に出しておりますが、あまり実運用に使用できるような使い方ではなかったと感じています。比較的フロントエンドの開発構築についての説明が比重が大きかったと思います。 DDLからgraphqlのスキーマ定義が生成されるというのはもちろんhasuraの強みではあるのですが、codegenについて一切触れていなかったと思いますのでかなり気がかりのある内容でした。hasuraプロジェクトにおける、codegenの適切な運用および設定内容は、このタイトルの講座であれば必須だったかと思います。 また、hasuraのIaCおよび運用についても説明が欲しかったかと思います。もちろん生成されるquery/mutationは誰もが使用できては困るのでpermissionを設定する必要があるのですが、実運用上ではpermissionのコード化およびそのルールについてのテストコードは必須となると思います。インフラのコード化がなされていないと、適切にstagingを用意することすら難儀かと思います。 ただ、あくまで前編を見てない目線での感想となりますので、上記について前編で説明があったりする場合はレビューの内容は不適切かもしれません。 セール時の価格は安かったため、タイトルさえ良ければより良い評価が出来たかと思います。

Charts

Price

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Price chart

Rating

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Ratings chart

Enrollment distribution

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 - Distribution chart
4100678
udemy ID
6/4/2021
course created date
6/19/2021
course indexed date
Bot
course submited by