こんにちは。きんくまです。
最近よく見るGraphQLって何なのかなー？と思って、公式チュートリアルをやってみたメモです。
>> Running an Express GraphQL Server
あと詳細な入門は、昨日はてブに上がってたこちらの記事のを読まれた方が良いと思います。
>> 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ
GraphQLって何？
公式のトップページによると “A query language for your API” だそうです。
> GraphQL | A query language for your API
SQLと名前が近そうだからサーバー操作と関係しているのかな？と思ったんですが、そうじゃなくてAPIのためのクエリー言語だそうです。実際にチュートリアルをやってみると、サーバーに関しては特に何も書いてなくて、そこは好きな実装してねってことみたいです。
同じカテゴリのものとしてはREST APIになります。HTTPのエントリーポイントがGraphQLを使ったものになります。
特定のプログラミング言語に限定されているわけではないので、色々な言語でのライブラリが用意されています。
>> Code
今回はJavaScriptを使ったものになります。
>> Getting Started With GraphQL.js
ただこのページにあるGraphQL.jsだけだとコマンドライン上で1行書いて終わりぐらいのものしかできないので、次のページのGraphQL HTTP Server Middlewareをみてみます。
>> Running an Express GraphQL Server
サーバー側
まずはnpmのインストール
npm install express express-graphql graphql --save
query1.js
const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');
//スキーマ
const schema = buildSchema(`
type Query {
name: String
age: Int
}
`);
//デモデータ
const demoDB = {
name: "Mario",
age: 25
};
//実装
const root = {
name(){
return demoDB.name
},
age(){
return demoDB.age
}
};
/*
上のはES6の書き方なので、ES5まではこれです
const root = {
name:function(){
return demoDB.name
},
age:function(){
return demoDB.age
}
};
*/
//サーバーの設定
var app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
スキーマというのがGraphQLの型を定義している部分です。
みていただくとわかると思うのですが、今回はデモデータと実装という部分で単純に文字列と数値を返しているだけです。チュートリアルではこんな感じにコードが書いてあります。
なので、実際の案件で使うときはこの実装部分で、サーバーとのつなぎこみを書いてあげれば良いということになります。
それではターミナルから実行します。
node query1.js
ブラウザで http://localhost:4000/graphql にアクセスしてみます
なんか立ち上がったー!
これは GraphiQL というエディタで、コード補完( Ctrl + スペース )もききます。
>> graphql/graphiql
expressサーバーのオプション設定で、 graphiql: true にしていたので、これが立ち上がりました。
ここで左側にコードを入力してCtrl + Enterを押すと上のキャプチャと同じような状態になります。
GraphQLのクエリを入力したら、サーバーから実際のデータが送られてきた状態です。
クライアント側
さきほどはGraphiQLエディタからデータを見てみました。
今度はブラウザからアクセスしてみます。
ブラウザからアクセスする場合は特別なライブラリは必要なく、fetchでできます。（対応してないブラウザの場合は適当なライブラリ使ってください）
せっかくexpressサーバーを使っているので、htmlにアクセスできるようにします。（クロスドメインエラーが起きるのも面倒なので）
query1.jsの app.listen(4000) の直前に1行追加します
app.use(express.static('public')); //追加
app.listen(4000);
これで public フォルダにある静的なリソースにアクセスできるようになりました。
ターミナルで node コマンドを立ち上げなおしてください。
publicフォルダを新規作成して index.html を追加します
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample client</title>
</head>
<body>
<script>
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({
query: '{ name\n age }'
})
}).then(function(res){
return res.json();
}).then(function(data){
console.log('returned data: ', JSON.stringify(data));
})
</script>
</body>
</html>
この状態で http://localhost:4000/ にアクセスすると以下のConsoleが出力されます。
returned data: {"data":{"name":"Mario","age":25}}
REST APIと違って、情報の取得をGETじゃなくてPOSTで行っています。さらにいうと、後から出てくるデータの新規作成/更新もPOSTで行います。
今回は長くなったのでここまでです。こんな感じにチュートリアルを続けるとデータの種類や更新方法なんかが手短に知ることができたので、おすすめです。このブログでも続きを書くかも。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
