Tag: GraphQL

  • HasuraCon’22にてHASURAwards受賞しました!

    HasuraCon’22にてHASURAwards受賞しました!

    まえがき この度、会津ラボはHasuraを用いた高齢者向け医療用アプリを開発し、毎年開催されているHasuraCon’22においてHasuraを用いた素晴らしいプロジェクトに贈られる”Open Source Hero”賞を受賞しました。 HasuraCon’22についてはこちら 定期的に開催される無料のオンラインカンファレンスで、Hasuraが世界でどのような使われ方をしているか、またHasuraを用いたチーム開発ではどのような構築がされているか等を発表するイベントです。 Hasuraとは 正式名称はHasura GraphQL Engineであり、DB(Postgres)をもとにGraphQL APIを構築するオープンソースです。 PostgreSQLサーバーを建てるだけでHasura内でテーブルの作成やリレーションの設定等も可能です。 また、公式がHasura用のDockerを用意していて、起動してすぐローカル環境でHasuraが使えるようになります。 Hasuraを使った感想 GraphQLを使用することでフロント内で完結する作業が増え、バックエンドの負担を軽くすることができます。クエリを作ってすぐに実行できたり、テーブルの設定もHasuraから行えるのでシームレスに運用ができます。 また、外部APIが必要になったとしてもHasura Actionsという外部APIと連携できる機能があります。エンドポイントはあくまでGraphQLのエンドポイントだけでいいので、すっきりとした実装が可能になります。 そして、Hasuraは認証周りがしっかりしており、ユーザーレベルでの制御が容易です。JWTを読み込み取得してくる値に制限をかけるといった動作を実装できます。 Hasuraは新進気鋭の技術ということもあり、日本ではあまり情報が出回っていませんが、上記の機能を魅力的に感じたのであれば検討する価値はあると思いました。

  • JWT(JsonWebToken)を使った認証付きGraphQL APIを作る

    JWT(JsonWebToken)を使った認証付きGraphQL APIを作る

    以前にGraphQL+MongoDB+graphql-composeという構成のGraphQL APIの実装についてご紹介させていただきました。 この構成のGraphQL APIにユーザ認証が必要になりましたのでJWT(JsonWebToken)を使った認証機構を追加しました。 JWT認証を作る JWTのパッケージをインストールします。 auth.jsを作成しJWT認証を実装していきます。 内容を見ていきます。まず、/login以外のURLで認証が必要になるように設定します。 JWTをリクエストヘッダに含んだ状態でアクセスしてもらうのでヘッダにトークンが存在しない(もしくはフォーマットが違う)場合はフォーマットエラーを返します。 ヘッダにトークンが含まれていればトークンをチェックして、可否を返します。今回は”secret”をシークレットワードとしています。 server.js server.jsを修正します。 先ほど実装したauth.jsをimportしましょう。 /loginをPOSTで設定し、リクエストパラメータ(user_id, password)を受け取って認証します。 今回はサンプルなので固定値でチェックし、ログインできればJWTを作成して返却します。 authentication(app)をgraphqlの前に追加することで/graphqlはログインが必要となります。 サーバを起動しPostmanからログインAPIを叩いてみますが・・・。 パラメータが取得できません。。。 bodyParser 毎回忘れるのですが、bodyParserのurlencodedを設定しないとパラメータ取得ができません。以下をserver.jsに追加します。 もう一度Postmanで試します。 これでログイン認証に成功し、JWTを取得することができました。 取得したJWTをヘッダに設定してGraphQLのQueryをPOSTしてみます。 無事、データを取得することができました。 ヘッダを設定しない場合は以下のようにエラーとなりますので、これで認証付きGraphQL APIの完成です。 まとめ GraphQLにアクセスする前にログインAPIを叩くのではなくGraphQLで認証する方法もあるようです。 そちらについても機会があれば検証を行い、記事にしてみたいと思います。 今回使用したコードはこちらです。 https://github.com/aizulab-igarashi/graphql_compose_auth

  • 【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する

    【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する

    こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.js Express MongoDB Mongoose GraphQL Express まずは必要なパッケージをインストールし、Expressのアプリケーションを作成します。 メインとなるserver.jsを実装していきましょう。 server.jsを実行し、http://localhost:8080/helloにアクセスするとHello Worldが表示されます。 MongoDB MongoDBとの接続を行います。 Mongooseを使用したいので、以下のコマンドで必要なパッケージをインストールしましょう。 次にutilsディレクトリを作成し、その中にDBとの接続を行うdatabase.jsを作成します。 utils/database.js database.jsをimportし、DB.connect()を実行することでMongoDBに接続されるようになりました。 GraphQL GraphQLを実装していきます。 まずはGraphQL関連の必要パッケージをインストールします。 スキーマとモデルのディレクトリを作成します。 今回はサンプルとして本のタイトルと著者のデータとします。 タイトルと著者をString型として定義したモデルを作成します。 models/book.js さらにスキーマも作成します。 ここで本記事の主役であるgraphql-composeを使用します。 graphql-composeはGraphQLのスキーマを作成するToolkitとのことで、 簡単にスキーマを作成することができます。 schemata/book.js これだけでCRUDのGraphQL APIになります。 最後にserver.jsを修正してGraphQLを有効にします。 server.js 再度server.jsを実行して以下のURLを開いてみましょう、GraphQLの実行環境が表示されます。 http://localhost:8080/graphql DBにデータが存在していないのでGraphQLでデータを新規登録してみます。 【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する実行環境の左上に以下のmutationを入力します。 さらに左下のQUERY VARIABLESの部分に以下を入力し実行しましょう。 作成されたデータのIDがレスポンスとして返却されます。 データが作成できましたのでGraphQLでデータを取得してみます。 実行環境の左上に以下のqueryを入力して実行してみます。…