DjangoでGraphQLを学ぼう!〜JWT authenticationとReact〜

こんにちは。KOUKIです。

GraphQLの実装の続きです。前回は、Mutationの実装方法について触れました。

今回は、JWTとReactの実装について学びます。

記事まとめ

Django GraphQL JWT

Django GraphQL JWTで認証機能を付けます。

まずは、settings.pyに次の設定を行います。

次にapp/api/schema.py配下に次の設定をします。

Mutationにtokenを登録しました。

Mutationを発行して、ユーザーのTokenが取得できるか確認してください。

ユーザーを作成していない場合は、次のコマンドで作成することができます。

ブラウザをリロードして、次のMutationを実行してください。

ログイン設定

ログインの設定には2パターンあります。

1パターン目

resolve_all_books関数などには、”info”引数を指定していました。

ここには、context情報が入っており、その中にはuser情報が含まれます。

つまり、次のようにログイン機能を設定できます。

2パターン目

もう一つは、JWTモジュールの機能を利用するパターンです。こちらの方がすっきりとした実装ができます。

認証機能の実装

続いて、認証機能を実装していきましょう。

まずは、settings.pyに次の設定を追加してください。

上記は、認証時間等の設定です。

次にapp/urls.pyに次の設定を追加します。

最後にapp/api/schema.pyに次の設定を追加します。

ブラウザをリロードして動作確認をしましょう。

この機能の確認には、Tokenが必要なので、先にTokenを取得してから動作確認をします。

認証機能の実装も簡単ですね。

RelayとFilterの実装

Relayを実装します。

Relayは、データ駆動型のReactアプリケーションを開発するためのJavaScriptのフレームワークです。

Reactと同様にFacebookにて開発されています。

サーバーから取得したデータをReactコンポーネントにprops経由で渡すことができるようになるなど、かなり強力なツールです。

新たにBookNodeクラスを作成し、Queryに設定したresolve_all_booksをコメントアウトしました。

ブラウザをリロードして、次のクエリを実行してください。

EdgeとNodeが初めて出てきたので、戸惑うかもしれません。

イメージは大体こんな感じで、Relayのスキーマーはこのようになっています。

参考

この実装は、Queryクラスの巨大化を防ぐことができそうですね。

BookNodeクラスは別ファイルに記述して、importすればよいと思います。

More Filter

filterを深堀します。

filterには、細かい指定を行うことができます。

このフィルターは、django-filterの機能で実現しています。

icontainsなどの機能は、Djangoのもともと備わっている機能と同じだと思います。 ブラウザをリロードして、実際にフィルターを試してみましょう。

完全一致(exact)

部分一致

最初の文字列一致

やばすぎるほど簡単ですね。

Relay Mutation

Relay版のUpdate Mutationを実装します。

ブラウザをリロードして、以下のMutationを実行しましょう.

ページネーション

ブラウザ上のDoc->allBooksを確認すると以下のパラメータが設定されています。

beforeやlastなどページネーションの機能を提供しています.

スキーマーの検証

設定したスキーマーの検証を行うことができます。

settings.pyに次の設定をしてください。

app配下にdataフォルダを作成してください。

次のコマンドを実行してください。

上記のようにコマンド実行に成功したらdataフォルダ配下にmyschema.jsonが出力されていると思います。

Reactと結合

最後にReactと結合して終わりにしましょう。

settings.pyに以下の設定を追加してください。

デフォルトだと、Djangoのセキュリティ機能によりReactからのリクエストを拒否してしまうので、上記の設定で回避します。

urls.pyにも同じくセキュリティ回避の設定をします。

続いて、Reactの設定です。frontend/src配下に次のファイルを作成してください。

books.jsに次の設定を行います。

次にApp.jsに下記の設置を行います。

localhost:3000」にアクセスしてみましょう。

Djangoのデータベースに登録されているデータを表示することができました。

おわりに

GraphQLは、かなり便利ですね。

現在、Djangoを使ったシステム開発に従事していますが、GraphQLサーバーの実装を提案しています。

まぁ、あまり新技術に乗り気ではない会社であるため、期待薄なのですが^^;

次はGo言語を使ったGraphQLも開発してみたいですね。

参考書籍


コメントを残す