HOW TO GRAPHQLでGraphQLの勉強をはじめました その④

A Simple Query

GraphQLのお勉強。今日はHakcerニュースクローンを作るための最初のAPI操作を実装していきます。誰かが投稿したリンクのフィードをクエリするというものです。

Extending the schema definition

リンクのリストを取得するfeedクエリの実装をはじめていきます。やっていく方法としては、GraphQLのスキーマを拡張して、それに対応するリゾルバファンクションを〜という流れ。schema-drivenとかschema-first開発と呼ばれてたりするみたいです。

ということで、index.js の typeDefs での定義にLinkの情報を追加していきます。

const typeDefs = `
type Query {
  info: String!
  feed: [Link!]!
}

type Link {
  id: ID!
  description: String!
  url: String!
}

Linkという新しいタイプが追加され、それぞれのLinkはidとdescriptionとurlを持っていて各項目ともにnullは許可されていないですよ、と。そして、QueryタイプでLinkのリストを取得出来るようにしました。ここでもNullは許可されていません。

Implement resolver functions

続いてfeedクエリのリゾルバファンクションを実装していきます。

// 1. テスト用のデータ(Linkのリスト)
let links = [{
  id: 'link-0',
  url: 'www.howtographql.com',
  description: 'Fullstack tutorial for GraphQL'
}]

const resolvers = {
  Query: {
    info: () => `This is the API of a Hackernews Clone`,
    // 2. ルートフィールドを足したのでそれ用のリゾルバ
    feed: () => links,
  },
  // 3. 追加したLink用のリゾルバ。parentについては後述とのこと
  Link: {
    id: (parent) => parent.id,
    description: (parent) => parent.description,
    url: (parent) => parent.url,
  }
}

そして、サーバーを再起動すると👇のようにfeedクエリが有効になっていることが確認できます。

ここで👇のようなクエリを発行すると、

query {
  feed {
    id
    url
    description
  }
}

👇のような結果が返ってきます

{
  "data": {
    "feed": [
      {
        "id": "link-0",
        "url": "www.howtographql.com",
        "description": "Fullstack tutorial for GraphQL"
      }
    ]
  }
}

例えば、クエリからidを抜いたら👇のようになります。

query {
  feed {
    url
    description
  }
}

{
  "data": {
    "feed": [
      {
        "url": "www.howtographql.com",
        "description": "Fullstack tutorial for GraphQL"
      }
    ]
  }
}

The query resolution process

クエリの処理の中で行われていることを追っていきます。 例えば👇のクエリについて、全てのフィールドはスキーマで定義されているものです。そして、スキーマ定義の全てのフィールドはリゾルバによって返却されるように実装されている必要がある、と。

query {
  feed {
    id
    url
    description
  }
}

では👇のparentはなんだったのでしょうか？

Link: {
  id: (parent) => parent.id,
  description: (parent) => parent.description,
  url: (parent) => parent.url,
}

GraphQLクエリはネストされている場合があります。feedリゾルバはlinksにストアされているものを返すので、GraphQLサーバーはLinkタイプに関するリゾルバを実行します(スキーマ定義されているのでfeedはLinkのリストを返すことを知っている)。Linkの中の3つのリゾルバ(id, description, url)はlinksリストの要素を親オブジェクトにセットするように振る舞わせます。

とは言え、このLinkリゾルバはtrivialなのもので、実際は👇のようにコメントアウトしても動きます。

  // 3. 追加したLink用のリゾルバ。parentについては後述とのこと
  // Link: {
  //  id: (parent) => parent.id,
  //  description: (parent) => parent.description,
  //  url: (parent) => parent.url,
  // }