【GraphQL入門 #2】チュートリアル

前回より、GraphQLに入門しています。

yushi-dev.hatenablog.com

今回は、下記のApollo Serverの公式チュートリアルに取り組みます。

Get started with Apollo Server - Apollo GraphQL Docs

型の定義

APIで扱う型を定義します。

  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }

type Bookは書籍のタイトル（title）と著者（author）を持つ型です。
REST APIにおけるリソースであり、多くはDBのテーブルで管理されるようなものです。

type Queryは、APIでのリクエスト方法を表します。
REST APIにおいては /booksというエンドポイントを定義しているイメージです。

JS上は、下記のように定義します。

const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

型の詳しい説明は、下記のページで参照できます。

GraphQL schema basics - Apollo GraphQL Docs

Resolversの定義

次は、APIへのリクエストを処理するロジックを定義します。

GraphQLではこれをResolversと言います。

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Author',
  },
];

const resolvers = {
  Query: {
    books: () => books,
  },
};

const booksは、ただのデータ管理用の配列です。本来はDBなどで管理するものですが、今回は簡易にメモリ管理することにします。

const resolversがResolversの本体です。

「型定義」で用意したtype Queryと構造が対応しています。

Resolversの詳しい情報は、下記より参照できます。

Resolvers - Apollo GraphQL Docs

サーバの初期化・起動

先に用意した型とResolversを利用して、GraphQLサーバを初期化します。

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

最後に、サーバを起動します。

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

動作確認

実際に動かしてみます。

まずはサーバを起動します。

node index.js

curlでリクエストしてみます。

# リクエスト
curl --request POST \
  --header 'content-type: application/json' \
  --url http://localhost:4000/ \
  --data '{"query":"query { books { title }}"}' | jq

# レスポンス
{
  "data": {
    "books": [
      {
        "title": "The Awakening"
      },
      {
        "title": "City of Glass"
      }
    ]
  }
}

事前に定義した const booksの内容が返却されています。

開発者ツール

次に、開発者ツールにアクセスしてみます。

ブラウザで http://localhost:4000 を開きます。

「Query your server」のボタンをクリックします。

OperationというConsoleで下記のようにクエリを記述します。

query GetBooks {
  books {
    title
    author
  }
}

GetBooks という実行ボタンが表示されるので、これをクリックすると、Responseが表示されます。

Pull Request

https://github.com/nek0meshi/graphql-learn/pull/2

あとがき

GraphQLの概要がわかりました。