GraphQL サーバーのモックを作る

GraphQL JavaScript

GraphQL の API と通信するアプリケーションを作る際には開発時に API サーバーのモックが必要になると思います。API 側ではまだ実現できていない Query や Mutation を呼び出すことがあるからです。そこでどのように作ればいいか紹介します。

Apollo Server を利用する

www.apollographql.com

実際にこれで API サーバーを作ってるかどうかは関係なく、フロント用のモックとして気軽に利用できます。

以下は簡単なサンプルです。ほぼ公式通りですが…。

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

const resolvers = {
  Query: {
    books: () => [
      {
        title: 'Book1',
        author: 'John',
      },
      {
        title: 'Book2',
        author: 'Mike',
      },
    ],
  },
};

new ApolloServer({
  typeDefs,
  resolvers
})
  .listen()
  .then(({ url }) => {
    console.log(`🚀  Server ready at ${url}`);
  });

これを実行するとサーバーが立ち上がります。（ポート番号は変更できます）

$ node mock/index.js
🚀  Server ready at http://localhost:4000/

サーバーにアクセスするとプレイグラウンドが立ち上がり、実際にクエリが試せます。

実際にはスキーマやリゾルバは別ファイルにして管理したほうがいいでしょう。スキーマについては別ファイルで管理してフロントとAPI側で共通で使用することが多いと思うのでそれをインポートして使えます。

f:id:kaz_shu:20200425215735p:plain

実際に Schema や Query を定義した後にダミーデータを作成してフロントとの連携のテストに使うといいと思います。難点は実際にデータの登録等はできないので Mutation の結果をクエリに反映できません。 Query や Mutation のロジックに log を仕込んで正しい API が叩かれているかを確かめる必要があると思います。

Prisma を利用する

以下の記事が詳しいです。

qiita.com

モック用というわけではないですが、試すことはできます。 スキーマを定義すると裏では docker で RDB(MySQLなど選択可能) が動いてデータを永続化できます。簡単なスキーマでは試しましたが、複雑なスキーマや複数人で開発する際に向いていないかなと判断し、上記の Apollo Server を使用しています。独自のスキーマ定義が必要となるのでスキーマは API 側と共通にしたい場合は向きません。

www.prisma.io