最近 Hasura に入門していて，その前に GraphQL 自体を学べる Hasura のチュートリアル「GraphQL Tutorial」を実施してみた❗️

Hasura の話はほとんど出てこなくて，GraphQL と REST / gRPC の比較・GraphQL オペレーションの解説などを基礎から学べる．また実際に GraphiQL で GraphQL クエリを実行しながら体験もできるので「GraphQL ってたまに聞くけどわからんぞー🔥」という GraphQL 未経験者におすすめできる入門コンテンツだった＼( 'ω')／

ちなみに日本語もあるけど最新ではなく（例えば GraphQL vs gRPC がなかったり）英語を翻訳して実施するのが良いと思う．

hasura.io

ちなみに僕自身は GraphQL の基本的なことは理解できているはずだけど（例えば過去に GraphQL 本を読んだり・GraphQL でポケモンを検索したり），今回は復習も兼ねて「GraphQL Tutorial」を実施してみた❗️

GraphQL 基礎

以下のアジェンダにある通り，REST / gRPC との比較・GraphQL オペレーション（クエリ・ミューテーション・サブスクリプション）の解説など GraphQL 未経験者でもわかるようにまとまっていた．

Course Introduction
What is GraphQL?
GraphQL vs REST
GraphQL vs gRPC
GraphQL Core Concepts
GraphQL Comments
GraphQL Introspection
GraphQL Queries - Fetching data
GraphQL Mutations - Writing data
GraphQL Subscriptions - Realtime updates
GraphQL Servers
GraphQL Clients
GraphQL Tag
GraphQL Concepts
What next?

また GraphQL イントロスペクションの便利さと危険性をどちらも紹介してるところも良かった🔐 Hasura Cloud / Hasura Enterprise だと無効化できそう．

hasura.io

ちなみに GraphQL イントロスペクションの無効化は GraphQL の OWASP Cheat Sheet Series にも載っている💡

cheatsheetseries.owasp.org

TODO アプリケーション

GraphQL オペレーション（クエリ・ミューテーション・サブスクリプション）を試すトピックでは TODO アプリが題材になっていて，アプリケーションとしては以下から実際に試せる．GraphQL オペレーションを実行する前にアプリケーションを触っておくとイメージしやすくなると思う👌

learn-hasura-todo-app.netlify.com

GraphiQL

GraphQL オペレーション自体は Hasura にホスティングされた Public GraphiQL を使う．以下にキャプチャを抜粋して載せておく❗️

hasura.io

「クエリ」はシンプルなものから limit・変数・where などを試せる．「ミューテーション」では実際に insert_todos / update_todos / delete_todos を実行してデータを操作できる．「サブスクリプション」では online_users でオンラインユーザーを確認するのでタイミング次第で誰かしら（アプリケーションにアクセスしてるユーザー）を取得できたりしておもしろい😀

あとサブスクリプションのトピックで紹介されてた Live Queries（ライブクエリ）という仕組みは知らなかった💨（GraphQL 自体の仕様ではないとのこと）

query @live {
  todos {
    id
    created_at
    is_completed
    is_public
    title
  }
}

次は!?

What next? のトピックで紹介されているけど，次に実施するべきチュートリアルとして「バックエンドコース」と「フロントエンドコース（React / Vue / Angular / Typescript React から選べる）」が紹介されている💡 実は既にバックエンドコースの「Hasura GraphQL Tutorial」を実施してて，非常に勉強になる内容だったからまた別の記事で紹介したいと思う❗️

hasura.io