GraphQL入門 - Getting Started With GraphQL.js

GraphQL入門 - Getting Started With GraphQL.js - を試してみました

投稿日：2018年10月8日

こんにちは、mabuiです。
巷でREST.apiを代替すると騒がれているGraphQLのチュートリアル、Getting Started With GraphQL.jsを読みましたので、記事にしました。

GraphQLとは

チュートリアルコード紹介の前に、GraphQLについて紹介します。

GraphQLは、fackbook社が開発しているクエリ言語です。
APIを作成するときに、RESTの代わりに使用できます。

RESTの場合、/hoge/userや/hoge/itemといったapiのエンドポイントをリクエストごとに作成する必要がありますが、GraphQLではそれを1つにまとめることができます。

また、リクエストの際にクライアント側から必要なレスポンスのみを返すよう設定できるため、無駄な通信を省けます。

さらにRESTは通信プロトコルである反面、GraphQLは型を持つ言語のため、ApolloServerやGraphQL Faker等のライブラリを使用することで、スキーマを設計するのみでモックの値を返してくれるapiを簡単に用意することができ、これがフロントエンド開発において非常に生産性を高めてくれます。

チュートリアルコード紹介

ディレクトリ作成からGraphQLでクエリ結果を出力するまでのコードになります。

ディレクトリ作成

% mkdir graphql_demo
% cd graphql_demo

% mkdir graphql_demo

% cd graphql_demo

インストール

% yarn add graphql

1 2	% yarn add graphql

server.js作成

% touch server.js

1 2	% touch server.js

server.js

var { graphql, buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

// Run the GraphQL query '{ hello }' and print out the response
graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

var { graphql, buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language

var schema = buildSchema(`

type Query {

hello: String

}

`);

// The root provides a resolver function for each API endpoint

var root = {

hello: () => {

return 'Hello world!';

};

// Run the GraphQL query '{ hello }' and print out the response

graphql(schema, '{ hello }', root).then((response) => {

console.log(response);

});

チュートリアルページからのコピペですw
node server.jsコマンド実行で、下記が出力されます。

{ data: { hello: 'Hello world!' } }

1 2	{ data: { hello: 'Hello world!' } }

server.jsについて解説

buildSchemaメソッド
GraphQLのスキーマ言語から、GraphQLのスキーマオブジェクトを作成するメソッドです。スキーマとはデータベースの構造のことと考えてください。
スキーマ言語のドキュメントはこちら

 graphqlメソッド
第一引数にスキーマオブジェクト、第二引数にリクエストするクエリのキー指定、第三引数にルート値(デフォルト値、オプション)を指定して、クエリを実行します。

以上、簡単でしたがチュートリアルコードの紹介でした！