理解を深めるためにまとめ。あと今後Vue.jsとHyperappでも実装できるように記録する。
環境構築
Dockerの公式を参考にしながらDocker-ComposeでDjango + Postgresの環境を構築。
Writing your first Django app, part 2 | Django documentation | Django
クライアント側はすでに手元にあったDockerfileを流用してUbutuntuにnode.jsとReactをぶちこんだ。
Django + Grapheneでサーバ側を構築
Graphene-Pythonの公式を参考にしながらDjango側の設定を行った。
Grapheneのための下準備
APIのサービスをDjangoに追加して、そのサービスにModelを作成し、マイグレートする。その後、Admin機能を使ってデータベースに練習用のデータをねじ込む。こういうときにDjangoのAdminはホント便利！いつもsuperuserの作り方を忘れるのでDjangoの公式ドキュメント置いておく。
Writing your first Django app, part 2 | Django documentation | Django
Grapheneの設定
ついにGrapheneを触っていくよ。先程追加したAPIサービスのルートディレクトリにschema.pyを追加する。公式の場合は以下のコードになる。
次はAPIではなくプロジェクトのルートにschema.pyを追加。
INSTALLED_APPSにgraphene_djangoと以下のコードを追加する。
続いてエンドポイントの設定をurls.pyで行う。この部分は、Graphene Djangoの公式のコードではうまく動作しなかった。クロスドメイン問題が発生したのだ。以下のサイトを参考にしてなんとかこの問題を解決したので参考に貼っておく。
現状、手元で動かしているだけだからいいが、２つ目のリンクではdjango-cors-headerをインストールして使っている。このdjango-cors-headerの設定は、もしアプリケーションをウェブで公開するときには再検討する必要がある。どのURLからでもアクセスできる設定になっているので。気をつけて。
それで以下のコードが最終的なurls.pyです。
クエリを実際に投げてテストする
さて、ここまで来たらついにクエリを投げる準備ができました。localhost:8000/graphqlにアクセスすると以下のようなページがある。左のフォームにクエリを書いて、上の実行ボタンを押すと右のカラムにレスポンスが表示される。無事表示されたらGOOD⭐
React + Apollo Client
次はクライアント側の実装をしていきます。Qiitaに日本語の記事がいくらか上がっていたので参考にしました。以下の二つは普通に記事として面白いので読んでなかったらぜひ。Apollo Clientでどんなことができるか、そのポテンシャルのすごさを知れると思う。
以下のコードは僕が上の二つを参考に書いたやつで、上述したGraphene Djangoのデータベースと互換性がないです。必要に応じて、クエリとかを書き換えればさっき作ったDjangoとも正常に通信できる。
メインポイントはhttpLinkでエンドポイントを指定して、GraphQL-tagでクエリを作成して、<Query query={GraphQL-tagで作ったクエリ}>でリクエストしているところ。
あとApollo ProviderはApollo Clientが適応される範囲ってことでいいのかな？アプリ全体のコンポーネントを括ればいいってリンク先にあった。名前的にもそんな感じかな。
これで無事、ReactとDjango間をGraphQLを使ってデータをやりとりできました。GraphQLめっちゃ便利すぎ🔥🔥
今後の課題
とまぁ、駆け足で実装してみて、駆け足でこんな記事を書きましたがまだ課題がいくつかあります。箇条書きでまとめておく。
- GraphQLのArgumentsがうまく処理されずエラーになる
- ソートしてレスポンスを返したい
- Graphene DjangoとApollo Clientの知識がまだまだ足りない
- そもそもデータベースの設計をもっとうまくならなきゃ
これらの問題に取り組む時はまた記事を書きます。
