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

A Simple Mutation

前回はGraphQLのQueryを実装しましたが、今回はMutation。Hackernewsクローンを作っているわけですが、新しいリンクをサーバーにポストしてみましょう、といった内容。

Extending the schema definition

前回と同様にまずはGraphQLのスキーマ定義から。クエリについて書かれているindex.jsにMutationを追加していきます。

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

type Mutation {
  post(url: String!, description: String!): Link!
}

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

ちょっとスキーマ定義ファイルが大きくなってきたので、ここで少しリファクタリングしていきましょう。srcディレクトリの中にschema.graphqlというファイルを作ってそこに定義を記述します。

type Query {
  info: String!
  feed: [Link!]!
}

type Mutation {
  post(url: String!, description: String!): Link!
}

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

そして、index.jsは👇のようにこざっぱり。

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
})

Implementing the resolver function

続いて新しいフィールドに対してリゾルバファンクションに実装を加えていきます。index.jsにMutationを追加。

// リンクに付与するユニークなID
let idCount = links.length
const resolvers = {
  Query: {
    info: () => `This is the API of a Hackernews Clone`,
    feed: () => links,
  },
  // リンクオブジェクトを作ってlinksに追加
  Mutation: {
    post: (parent, args) => {
      const link = {
        id: `link-${idCount++}`,
        description: args.description,
        url: args.url,
      }
      links.push(link)
      return link
    }
  },
}

idCountというリンクに付与するユニークなID(link-の後にカウントアップされた数字)を付けてlinksに追加するというのがMutationの処理の一連の流れ。

ところでargsとは？っていう話で今回のケースはurlやdescriptionを運んでくるもの。feedやinfoではrootオブジェクトのフィールドだけで具体的なaugmentsはスキーマ定義に含めていなかったので必要なかったんだけどね、と。

Testing the mutation

ということで、サーバーを最高してPlaygroundに👇を突っ込んでみましょう。

mutation {
  post(
    url: "www.prisma.io"
    description: "Prisma replaces traditional ORMs"
  ) {
    id
  }
}

すると結果として👇が返ってきます。

{
  "data": {
    "post": {
      "id": "link-1"
    }
  }
}

mutationのリクエストを送るたびに、link-2、link-3とカウントアップされていきます。ここで、mutationがちゃんと動いたか確認するために、feedクエリを実行してみましょう👇

ここでサーバーを追加すると全てin-memoryで扱っているため上記でmutationしたデータは消えてしまいます。次のセクションではデータベースレイヤに関する処理をGraphQLサーバーに追加して永続化していきます。

Exercise

リゾルバをもっとホゲホゲしていきたい人は👇のスキーマ定義を元に実装してみましょう。

type Query {
  # Fetch a single link by its `id`
  link(id: ID!): Link
}

type Mutation {
  # Update a link
  updateLink(id: ID!, url: String, description: String): Link

  # Delete a link
  deleteLink(id: ID!): Link
}

んー、ちょっと今日は眠いので明日やってみます 😃