はじめに
今回は私の勉強も兼ねてGraphQLについて、よくやる流れをまとめてみた。GraphQLはよく触るのにも関わらずいまいち理解できていないので、これを機に理解を深めたい。
GraphQLとは
APIを開発するためのクエリ言語である。サーバーにあるデータを得るためにqueryを送って欲しい情報だけ取ってくることができる、というようなざっくりとした理解をしている。
queryとmutation
GraphQLには、queryとmutationという大きく分けて二つ(三つ)の指令の種類がある。(subscriptionというのもあるが、私は使ったことがない。)
- query
データを取得するときにサーバーに送る指令。データの変更はない。 - mutation
データを追加、更新、削除をする時にサーバーに送る司令。データの変更が生じる。
このような指令を使うことで欲しいデータをとってくることができる。ECサイトであれば商品の値段、名前、在庫などなどの情報を得るときに使うことになるだろう。
queryのフィールドを追加
ではqueryやmutationのフロント側の実装を見てみよう。以下、graphqlファイル。
query GetUser {
user {
id
name
}
}
これはシンプルにユーザー情報を得るためのquery.
ユーザー情報と言っても、これではユーザーidと名前しか使うことができない。
ここで、フロントエンドでユーザーの年齢が必要になった場合を考える。
ユーザーの年齢ageが存在するかを確認する
結論から言うとageをid,nameの並びに追加する必要がある。
query GetUser {
user {
id
name
age
}
}
ただ、queryの定義でageが存在しなければ、追加しても使えるようにはならない。どんな名前のフィールドが追加できるかを確認する必要がある。
追加できるフィールド名は、サーバーを立ち上げた状態でブラウザで
localhost:####/graphiql (####はそれぞれ個別で設定した番号)
を開いて確認する。
右の方にDocumentation Explorerと言うところでデータ構造が確認できる。そこでquery>user>まで辿っていき、フィールドにageが存在していれば、上の方法でageを追加することでフロントエンドでも年齢情報が使えるようになる。
graphiqlについては以下を参照。
queryをReactで使う
reactのhookであるuseQueryでqueryを呼び出してデータをfetchする。
まずreactで使えるようにするために、先ほど書いたgraphqlファイルをJavaScriptが読み込める言語に書き換えることが必要。そのためには、generateしてgraphqlファイルに対応するJSファイル(TSファイル)を生成する。generateはコマンドを叩くと自動生成されるが、コマンド自体はおそらく開発環境による(?)ので割愛する。というか、よく分かっていませんw
ここは誤魔化すことにします。
実際には、useQueryではなくuse~Query()と言う、queryごとに使えるhookを使う方が引数なしで書けるためスッキリと書ける、と教わった。これについては自分は言語化できずよく理解もしてない。apolloと言うライブラリが関係しているので、apolloについても後日まとめたいと思う。以下は参考資料。
生成ファイル内には、queryに対応する、JS内で使えるものが書かれている。
例えば上の例では、
export function useGetUserQuery() {}
こんなようなものがあるはず。つまり、useGetUserQuery()はJavaScriptで使えるもので、これを呼ぶとuser情報が得られる。具体的には、
const { data, loading } = useGetUserQuery()
こんなふうにすると、dataにuser情報が格納されて、そのユーザーidが知りたければ、
data.id
で得られる。
まとめ
フィールドの追加などはいつもやり方があやふやになってしまうのでまとめてみた。まとめると、いろんな知識についての理解が必要だということにも気づくことができる。自分がいかに分かっていないかが体感できるのでoutput大事だなあと感じる。