GraphQL + Node.js -Query編-

先ほどのイントロダクションで使ったsrc/index.jsをまずは変えていきます。

         
// src/index.js

const typeDefs = gql` 
    type Query {
     hello: String!
     users: [User!]!
     user(id: ID!): User!
    }

    type User {
      id: ID!
      name: String!
      posts: [Post!]
    }

    type Post {
      id: ID!
      title: String!
      authorId: ID!
    }`      

すでにあるルート型のQueryに加え、新しくid,name,postsを持つUser型,title,authorIdを持つPost型を追加します。ここはこの通りでなくても各々の好きなように付け足してください。また、Queryに複数のユーザ位を取得するusersフィールドと ひとりのユーザーを取り出すuserフィールドを追加します。

続いて、resolversを変えていきますがその前にユーザーデータを作っておきます。dataディレクトリを作りその中にuser.jsを作成します。

mkdir data

touch data/user.js

作成するユーザーデータは先ほどの自身で作ったスキーマに合わせて作ってください。とりあえずここではこんな感じで適当に作成します。

        
 // data/user.js

 const Users = [
   {
     id: 1,
     name: "Messi",
     posts: [
       {
           id: 1,
           title: "Post1",
           authorId: 1
       },
       {
           id: 2,
           title: "Post2",
           authorId: 1
       }
     ]
   },
   {
    id: 2,
    name: "Mane",
    posts: [
       {
           id: 3,
           title: "Post3",
           authorId: 2
       },
       {
           id: 4,
           title: "Post4",
           authorId: 2
       }
    ]
  },
  {
    id: 3,
    name: "Kimmich",
    posts: [
       {
           id: 5,
           title: "Post5",
           authorId: 3
       },
    ]
  }
]

module.exports = {
   Users
};
      

resolversは先程つくったhelloのresolver関数に加えてQueryで定義したusersとuserを書いていきます。

        
 // src/index.js

  const resolvers = {
     Query: {
       hello: () => 'Hello world!',
       users: () => Users,
       user: (_, { id }) => {
           return Users.find((user) => user.id == id)
       }
     }
   }
              

usersのresolver関数に関してはとてもシンプルでわかりやすいと思います。一方でuserの方は引数を渡す必要があり、少しわかりづらいと思います。そもそもresolver関数は4つの引数を受け取ります。

fieldName: (parent, args, context, info) => data;

以下は4つの引数を簡単にまとめました。

  • parent: 親 resolver から受け取ったオブジェクト。
  • args: field に対して渡された引数。
  • context: GraphQL operation の resolver 全体で共有されるオブジェクト。
  • info: 実行したオペレーションに関する状態等の詳細情報。あまり使われない。

しかしながら、使わない引数は省略できるため下記のusersのresolver関数ように何もか書かなくても良い場合もあります。

users: () => Users

一方で、userではidという引数を渡すために以下のようになります。

user: ( _,  { id } ) => data

ここではidは第二引数のargsに該当しています。この場合は第一引数であるparentは記述しなくではならずここでは_を使っていますが普通にparentと記述しても大丈夫ですが筆者は使わない引数をよく"_"で置き換えているのでご了承を。

usersで全てのユーザーを取り出します。以下のようになるはずです。

続いて、idが1のユーザーを取り出します。

ここまでが簡単なQueryの説明です。特にresolver関数の引数のところはわかりずらかったかもしれません。しかしながら慣れていけば違和感なく コードを書くことができます。引き続き手を動かしながら進めていきましょう。
そして次はMutationです。