GraphQL メモ

始め方

このチュートリアルが非常にわかりやすかったので、そのメモ。

サンドボックス環境を公開してくれてる。
GraphQL のコンソールで試すのが一番よい。

qiita で graphql のハイライト対応してほしい。
もしくは、なんかうまいこと似た構文のもの無いだろうか。

query

サーバ側で type を定義する

const Post = new GraphQLObjectType({
  name: "Post",
  fields: () => ({
    _id: {type: new GraphQLNonNull(GraphQLString)},
    title: {type: new GraphQLNonNull(GraphQLString)},
    content: {type: GraphQLString}
  })
});

この type に対する query を定義する

const Query = new GraphQLObjectType({
  name: 'BlogSchema',
  fields: () => ({
    posts: {
      type: new GraphQLList(Post),
      resolve: () => PostsList // これがデータ
    }
  })
});

schema に登録

const Schema = new GraphQLSchema({
  query: Query
});

取得

{
  posts
}

これを補完すれば、こうなる。

{
  posts {
    _id
    content
  }
}

結果

 "data": {
   "posts": [
     {
       "_id": "0176413761b289e6d64c2c14a758c1c7",
       "content": "Most developers and companies..",
     },
     {
       "_id": "03390abb5570ce03ae524397d215713b",
       "content": "Here is a common feedback...",
     },
     {
       "_id": "0be4bea0330ccb5ecf781a9f69a64bc8",
       "content": "<script type=\"text/javasc...",
     }
   ]
}

属性は、横並びでも良い。カンマは無くても良い。

nest

Post に Author をひもづける

type 定義

const Author = new GraphQLObjectType({
  name: "Author",
  fields: () => ({
    _id: {type: new GraphQLNonNull(GraphQLString)},
    name: {type: GraphQLString}
  })
});

紐づけ

const Post = new GraphQLObjectType({
  name: "Post",
  fields: () => ({
    ...
    author: {
      type: Author,
      resolve: post => AuthorsList.find(a => a._id == post.author);
    }
  })
});

とれる

{
  posts {
    _id
  }

  authors {
    _id
  }
}

同じリソースの結果を別の塊でとりたい場合は、名前をつける。

{
  names: authors {
    name
  },

  ids: authors {
    _id
  }
}

fragment

共通部の切り出しと埋め込み

{
  post1: post(_id: "03390abb5570ce03ae524397d215713b") {
    ...postInfo
  },
  post2: post(_id: "0176413761b289e6d64c2c14a758c1c7") {
    ...postInfo
  }
}

fragment postInfo on Post {
  title,
  content,
  ...authorInfo
  comments {
    content,
    ...authorInfo
  }
}

fragment authorInfo on HasAuthor {
  author {
    _id,
    name
  }
}

引数あり

これも query と呼ばれてる。
パラメータを引数にとる。

const Query = new GraphQLObjectType({
  name: 'BlogSchema',
  fields: () => ({
    posts: {
      ...
    },

    recentPosts: {
      type: new GraphQLList(Post),
      args: {
        count: {
          type: new GraphQLNonNull(GraphQLInt),
        }
      },
      resolve: function(source, {count}) {
        PostsList.sort((a, b) => {
          var bTime = new Date(b.date['$date']).getTime();
          var aTime = new Date(a.date['$date']).getTime();

          return bTime - aTime;
        });

        return PostsList.slice(0, count)
      }
    },
  })
});

これを叩く。 (author には comments がある前提)

{
  recentPosts(count: 2) {
    title,
    comments(limit: 1) {
      content
    }
  }
}

この引数を動的に指定したい場合。

query getFewPosts($postCount: Int!, $commentCount: Int) {
  recentPosts(count: $postCount) {
    title,
    ...comments
  }
}

fragment comments on Post {
  comments(limit: $commentCount) {
    content
  }
}

query variable はこう

{
  "postCount": 3,
  "commentCount": 2,
}

mutation

関数名(引数) {戻り値} みたな感じ。

type 定義のようなもの

mutation insertFirstPost {
  post: createPost(
    title: "GraphQL is Awesome",
    content: "Yep, it's purely awesome."
  ) {
    _id,
    title
  }
}

query 定義のようなもの

const Mutation = new GraphQLObjectType({
  name: "BlogMutations",
  fields: () => ({
    createPost: {
      // 戻り型
      type: Post,
      // 引数
      args: {
        title: {type: new GraphQLNonNull(GraphQLString)},
        content: {type: new GraphQLNonNull(GraphQLString)}
      },
      // ロジック
      resolve: (source, args) => {
        let post = _.clone(args);
        post._id = Date.now() + Math.ceil(Math.random() * 9999999);
        post.author = "arunoda";
        PostsList.push(post);
        return post;
      }
    }
  })
});

schema に登録

const Schema = new GraphQLSchema({
  query: Query,
  mutation: Mutation
});

更新に使う
やっぱり 関数名(引数) {戻り値} みたな感じ。

mutation {
  createAuthor(
    _id: "jxck",
    name: "Jxck",
    twitterHandle: "@jxck"
  ) {
    _id
    name
  }
}

複数

mutation {
  sam: createAuthor(
    _id: "sam",
    name: "Sam Hautom"
    twitterHandle: "@sam"
  ) {
    _id
    name
  },

  chris: createAuthor(
    _id: "chris",
    name: "Chris Mather"
    twitterHandle: "@chris"
  ) {
    _id
    name
  }
}

ちょっと慣れてきた。