LoginSignup
0
0

More than 1 year has passed since last update.

Hasura・GraphQLについて勉強してみた

Posted at

年始に時間を取れたので、Hasura・GraphQLについて学んでみました。
Hasuraは初見、GraphQLは業務(AWS・AppSync)で少し使った程度で、
勉強を進めるにあたって、Next.jsのアプリケーションを通じてCRUDなどを体感してみたものになります。

勉強に使ったアプリ構成

  • アプリケーション
    • TypeScript: 4.2.4
    • React: 17.0.2
    • Next: 11.1.2
    • graphql: 15.5.0
    • apollo/client: 3.3.15
  • バックエンド・DBサーバ
    • Hasura
  • デプロイサーバ
    • Vercel

勉強で作成したもの

簡単な顧客管理機能みたいなものを作成しました。
(ユーザーの追加・削除・ユーザー名変更・詳細表示など)

Hasuraってなに?

HasuraとはGraphQLサーバーをコードレスで準備できるサービスみたいです。
またロールを使ってPermission機能も備わっています。
データソース自体はPostgreSQLのようです。
Githubのスター数推移からみても注目度の高いOSSだと思っています。

Hasuraは何がいいの?

サーバの準備の負担がかなり少ない

大規模開発のようなサービスなら、大変な部分もあるかもしれませんが、個人開発(もしくは小・中規模くらいのもの)であればすぐサーバの準備ができます。
私はGithubのアカウントで連携しすぐに使用することができました。
また、データソースとして PostgreSQLを使用していることもあり、RDBMSのような感覚で使用できるので、導入時の学習コストもかなり要らなかった印象です。

GraphQLサーバーをすぐに使用できる

上の内容と重複している部分もありますが、Tableを定義するだけでクエリも含めてHasuraが用意してくれるので、サーバ処理をほとんど実装せずに使用可能です。

集計クエリやページングなどのクエリも用意してくれる

これ結構驚いたのですが、定義したテーブル情報からpkでの取得用のクエリや集計用のクエリを
Hasura側で自動で生成してくれます。
項目の変更等はGUIでぽちぽちいじるだけでできてしまいます。

query lookupCustomerOrder {
  users_aggregate(distinct_on: group_id) {
    aggregate {
      count
    }
  }
}
{
  "data": {
    "users_aggregate": {
      "aggregate": {
        "count": 3
      }
    }
  }
}

またCRUDに関しても簡単に生成してくれます。

mutation MyMutation {
  insert_users_one(object: {name: "testです"}) {
    id
  }
}
{
  "data": {
    "insert_users_one": {
      "id": "fabb1ca3-5f5b-4784-86d3-bf58153951b2"
    }
  }
}

APIの実装が不要などころか、定義を作るだけですぐにデータのやり取りができそうな感じです。

ロールでの制御をかけることができる

管理者・編集者・参照者などのロールを作った場合でも、各ロールごとに機能の権限を
Hasura側で制御をかけることができます。

また自分のIDのデータのみしか表示させない、みたいな制御もかけられるようです。(便利!)

総括

個人開発をする際のDBはFirebaseのfirestoreを使うことが多いのですが、NoSQLは便利なことも多いのですが、RDBで普段開発している自分としてはDBはこっちの方が便利な印象でした。
データ取得周りをほとんどになってくれるのも好印象です。
認証基盤はFirebaseのAuth、DBはHasuraで作るのもありだなぁと勉強になりました。
記載内容に不備ありましたらご指摘ください。
お読みいただきありがとうございました!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0