Apollo ServerとNowで作るGraphQLモックサーバ #2 実装編

モックサーバの実装

前回

nomusiclife.hatenablog.jp

1. 型の定義を行う

import { ApolloServer, gql } from 'apollo-server'

const typeDefs = gql`
  type Person {
    id: ID
    name: String
    phone: String
  }

  type Query {
    people: [Person]
  }
`

const mocks = {
  Query: () => ({
    people: () => new MockList([2, 5]), // 2~5件の[Person]が返る
  }),
}

const server = new ApolloServer({
  typeDefs,
  mocks,
  playground: true,
})

const port = 4004

server.listen(port).then(({ url }: { url: string }) => {
  console.log(`Server ready at ${url}`)
})

型定義をしただけでQueryの中身(resolver)を書いていないのだから このままでは動かないんじゃないか...と思うが動く。

Apollo ServerはMockingの仕組みによってresolverが設定されていなくてもそれらしい値を返すようになっている。

2. devサーバを起動

package.jsonに以下のscriptを追加して yarn dev で起動する

  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts"
  },

ts-node-devの --respawn オプションにより、ファイルが更新されると実行されているサーバが自動的に再起動する

3. Playgroundで確認

起動したサーバの / にアクセスするとPlaygroundが表示される。 こういうのが最初から用意されているのもapollo-serverのいいところ。

一応値は返ってきているが、nameやphoneが全て "Hello World" なのが気になる

4. Mockを調整

nameは名前っぽい、phoneは電話番号っぽい値が返ってほしいので、 mockの設定をもう少し弄ってみる

「っぽい」値を得るためにfakerを使う

import * as faker from 'faker'

const typeDefs = gql`
  scalar Name
  scalar Phone

  type Person {
    id: ID
    name: Name
    phone: Phone
  }

  type Query {
    people: [Person]
  }
`

const mocks = {
  Name: () => faker.name.findName(),
  Phone: () => faker.phone.phoneNumber(),
  Query: () => ({
    people: () => new MockList([2, 5]), // 2~5件の[Person]が返る
  }),
}

それっぽい値が返ってくるようになった

---

デプロイ編に続く

nomusiclife.hatenablog.jp