最近Reactを学びはじめたこともあって同じFacebookが作ったGraphQLにも手を出してみました。
GraphQLの輪郭もわからない時は「NoSQLのクエリの弱さを独自の検索エンジンで全て解決してくれる魔法のクエリ言語」なんて思ってました。(浅はかなり)
GraphQLを勉強しはじめて2日目で書いた記事なのであやふやなところや間違ってる点など多々あると思います...
GraphQLとは
実際のところはクエリとレスポンスの構造に対応関係を持たせることができたり、スキーマ設定によりエディタにおける補完や型チェックなどが行えたり、REST APIと違い処理によってGETエンドポイントを分ける必要がなく冗長化を防ぐことができたりと、いわばAPIのフレームワークのような印象を受けました。
イメージ図を作ってみました↓
インストール(導入)
今回はNodeベースのexpress + apollo + GraphQLでAPIサーバーをたてていきます。
// プロジェクトフォルダを作成
$mkdir first_graphql
$cd first_graphql
// プロジェクトのセットアップ
$npm init
// 必要なモジュールをインストール
$npm i --save express apollo-server-express graphql
// index.jsを作成
$touch index.js
コードを書いていく
index.js
constexpress=require('express')const{ApolloServer,gql}=require('apollo-server-express')constapp=express()// GraphQL言語のschemaを使ったconstruct定義// レスポンスするデータの型を設定しておくconsttypeDefs=gql`
type Query {
firstQuery: String
}
`// schemaごとに取得ロジックを設定していく constresolvers={Query:{firstQuery:()=>"Hello,world!",},}constserver=newApolloServer({typeDefs,resolvers})server.applyMiddleware({app})app.listen({port:4000},()=>console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)動かしてみる
$nodemon index.js
//$node index.jsでも可
動かしたら
http://localhost:4000/graphqlにアクセス！
こんな画面が出たらうまく立ち上がっています。
これはapolloサーバーが提供しているものでGraphQLへのクエリをGUIでテストすることができます。
クエリを実行してみる
index.jsの↓の部分で設定したQueryを実行してみます。
// GrapohQL言語のschemaを使ったconstruct定義// レスポンスするデータの型を設定しておくconsttypeDefs=gql`
type Query {
firstQuery: String
}
`// schemaごとに取得ロジックを設定していく constresolvers={Query:{firstQuery:()=>"Hello,world!",},}GUIの左側のエディタに以下の通り書いて実行してみましょう。
{
firstQuery
}
右側の実行結果画面にこのように表示されればデータの引き出し成功です。
{
"data": {
"firstQuery": "Hello,world!"
}
}
最後に
少し勉強してみるとGraphQLは決して魔法の言語などではなく、型の定義やデータ取得ロジックを自分でしっかり書いていかなければならないということがわかりました。
しかしながらGETエンドポイントを1つに集約できること、フロント側からの直感的なクエリを実装できること、TypeScriptのようにコード管理を容易にしてくれることなどなど...便利なことに違いはありません！
まだまだ勉強しはじめたばかりなのでこれからどんどん知識を蓄えていきたいと思います！
それでは！