目次
ライブラリのインストール
まず初めにApollo-serverライブラリをインストールします。
$ npm install apollo-server graphql
Graphスキーマの定義
続いて、GraphQLスキーマの定義をしていきます。 今回はBookというオブジェクトを用意してその中にtitleとauthorというフィールドを記述します。 このオブジェクトはGraphQLで最も基本的なスキーマであり、サービスから取得できるオブジェクトの種類と、サービスに含まれるフィールドのみで表現します。
index.js
const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;
データセットの定義
スキーマの定義ができたら、同じファイルの下部にデータを定義していきます。 本来であれば、Apollo Serverから取得した値を変数に格納して利用しますが、 今回は変数booksに２つのオブジェクトを入れていきます。
const books = [
{
title: 'The Awakening',
author: 'Kate Chopin',
},
{
title: 'City of Glass',
author: 'Paul Auster',
},
];
リゾルバーの定義
上記でデータを定義しましたが、apollo server側はクエリ実行時にこのデータセットを使用することを認識していない状態です。 これを認識させるためにリゾルバーを作成していきます。 Index.js のbooksの変数のデータセットの下に以下を記述します。
const resolvers = {
Query: {
books: () => books,
},
};
Apollo サーバーのインスタンス作成
これまでにスキーマ、データセット、リゾルバーを定義してきました。 この情報を初期化する際にApollo Serverに知らせる必要があります。
const server = new ApolloServer({
typeDefs,
resolvers,
csrfPrevention: true,
});
server.listen().then(({ url }) => {
console.log(`
});
サーバーの起動
Apollo serverを起動を以下のコマンドで行います。
$ node index.js
このlocalhost:4000にアクセスしてこのような画面になっていればサーバーを起動できたことが確認できます。 そしてこの画面の”Query your server” と書かれたボタンを押すとsandboxというクエリを発行することができるsandbox UIというものが立ち上がります。
クエリの発行
このsandbox UIでクエリをリクエストしてみましょう。 Operationのタブの部分に以下のクエリをコピー＆ペーストして、 GetBooksボタンをクリックしてみると、Responseタブに先ほど定義したデータセットが出力されることがわかります。
さらにクエリのauthorを削除してもう一度GetBooksボタンをクリックすると Titleのデータのみが返却されます。 これでGraphQL特有のフロント側で欲しいデータを能動的に選択し、より効率的に値を得ることができることがわかりました。
まとめ
今回はGraphQLをapollo serverを利用して動かしてみました。 他にも様々なnodeを用いたサーバーがありますが、どれが動かしやすいか確認してみると面白いかもしれません。
