この記事のターゲット
- GraphQLって聞いたことしかない
- ちょっと触ってみたい
環境
- macOS Mojave 10.14.5
- express ^4.17.1
- express-graphql ^0.9.0
- graphql ^14.6.0
下準備
1.node.jsを使うので手元にない場合はinstallしてください。
$ brew install node
2.プロジェクトのディレクトリを用意してください。npmからgraphqlなどをinstallするのでnpm initまで。
$ mkdir gql-sample
$ cd gql-sample
$ npm init
3.必要なパッケージをinstallします。
具体的には以下の3つ。
- graphql
- express
- express-graphql
$ npm install graphql express express-graphql -save
実践
下準備ができましたので早速GraphQLサーバーを立ててみましょう。
まずはサーバー側のJavaScriptを作ります。
server.js
const express = require('express');
const express_graphql = require('express-graphql');
const { buildSchema } = require('graphql');
// GraphQL schema
const schema = buildSchema(`
type Query {
hello: String
}
`);
// Root resolver
const root = {
hello: () => 'world!'
};
// Create an express server and a GraphQL endpoint
const app = express();
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000, () => console.log('GraphQL server running on localhost:4000/graphql'));
consoleからnodeを実行。
$ node server.js
うまくいっていればブラウザで以下を開くことで画面が出ているはずです。
localhost:4000/graphql
早速クエリを投げてみましょう。
画面の左側がクエリを書く場所で、右側が結果が表示される場所です。
左側に以下を入力して画面左上にある再生ボタンをクリック。
{
hello
}
右側に結果が表示されれば成功です。
簡単にソースコードをみていきましょう。
ここでGraphQLサーバーが受け付けるクエリの形を宣言しています。
今回はStringで'hello'のみ受け付けるようになってます。
画面でhelloではなくworldなどをクエリに入れるとエラーが出るはずです。
// GraphQL schema
const schema = buildSchema(`
type Query {
hello: String
}
`);
クエリを受け取って何を返すかが以下で宣言されてます。
今回はhelloというクエリがきたら文字列の'world!'を返すという単純なものです。
// Root resolver
const root = {
hello: () => 'world!'
};
ちょっとだけ書き換えてみましょう。
function foo() {
return 'hoge'
}
// Root resolver
const root = {
hello: () => foo()
};
helloを受けたらfoo関数を実行するようにしてみました。
レスポンスは相変わらず文字列ですが、関数を呼び出せるならできることの幅が大きく広がりますね。
実行してhogeが取得できれば成功です。