概要
こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。
久々にGraphQLについて書かせて頂きます。今回はapollo-server-expressを使用したGraphQLのモックサーバーの構築方法についてご紹介します。こちらは自身が担当している新規プロダクト（Offers MGR）でもリプレイス後から現在まで約2年間使用し続けています。
初心者の方でも理解しやすいよう、できるだけ詳しく解説していきますので、ぜひ参考にしてもらえればと思います。
[AD] GraphQLが向いている現場とは？運用実践LT
弊社（株式会社overflow）が主催で開催予定のGraphQLに関するイベントになります。
なぜ導入したのかや、実運用の方法、運用してみてのメリットデメリット、どんな現場なら向いているのか？といった組織面でのお話などを深ぼってお伺いする予定ですので、ぜひご興味のある方はお申し込みください！
イベントでわかること
- GraphQLの各社の実運用事例が学べる
- GraphQLのPros,Consから、向いている現場がわかる
- GraphQLを導入した各社の背景がわかる
イベント概要
- 開催形式： オンライン
- 開催日時： 2024年2月8日（木）19:00～20:30
- 企画/運営： 株式会社overflow
はじめに
本記事では、apollo-server-expressを使用したGraphQLのモックサーバーの構築方法について紹介します。バージョンや環境依存によって正常に動作しない可能性はあります。実装の一例であり、実際のプロダクト開発等では活用できない場合があります。そのことを予めご了承の上、参考にしていただけると幸いです。
そもそもGraphQLとは？
詳しくは前回の記事で解説しているため、詳細は省きますが、GraphQLとは「クエリ言語とスキーマ言語で構成されたAPIの規格」のことです。具体的には以下のような特徴を持っています。
- アプリケーションが呼び出すエンドポイントが 1 つ
- 柔軟なリクエストで最小限のレスポンス
- 1 回のリクエストで複数のリソースにアクセス可能
- スキーマによる型付けにより、堅牢な開発ができる
なぜGraphQLが開発されたのかなどの経緯は前回の記事をご参照ください。
使用するプラグイン
apollo-server-express
今回は「apollo-server-express」を使用します。カスタマイズ性が高く、基本的な機能は一通り組み込まれているため、使用する環境に応じて柔軟に導入できます。導入方法や詳しい使い方は以下のページをご参照ください。
graphql-tools/mock
スキーマで指定された型に基づいたモックデータを自動生成してくれるプラグインです。特別な設定なども必要なく、スキーマを読み込ませるだけでモック化が完了します。
faker-js/faker
言わずと知れたダミーデータを生成できるプラグインで、モックデータをカスタマイズする際などに活用します。郵便番号やアイコン画像、メールアドレスなど多くの形式のダミーデータを生成できるため、非常に扱いやすいです。
構築する環境
- Node.js v20.10.0
実装方法
プラグインをインストールする
まずは、以下のコマンドを実行してプラグインをインストールします。今回はnpmを使用していますが、pnpmなどご利用のパッケージ管理ツールによってコマンドを随時変更してください。
$ npm i @faker-js/faker @graphql-tools/mock @graphql-tools/schema apollo-server-express express
スキーマを読み込みモック化させる
インストールが完了したらスキーマファイルを読み込めるようにして、そのスキーマを元にモックデータを生成できるようにします。スキーマファイルのパス指定は、環境にあわせて適宜変更してください。
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
const schemaString = readFileSync(
resolve('./schema.graphql'),
'utf8'
);
const schema = addMocksToSchema({
schema: makeExecutableSchema({ typeDefs: schemaString }),
});
モックデータをカスタマイズする
モックデータをカスタマイズしたい際は型ごとに任意に変更することができます。以下はIntとFloatの変更をした例になります。
import { readFileSync } from 'fs';
import { resolve } from 'path';
+ import { faker } from '@faker-js/faker';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
const schemaString = readFileSync(
resolve('./schema.graphql'),
'utf8'
);
const schema = addMocksToSchema({
schema: makeExecutableSchema({ typeDefs: schemaString }),
});
+ const mocks = {
+ Int: () => faker.datatype.number(),
+ Float: () => faker.datatype.float(),
+ };
上記以外でもUserなど実際のアプリケーションで使用するQueryも同じ要領でモック化することが可能です。
UserQueryをカスタムでモックするサンプルコード
const mock = {
id: faker.datatype.uuid(),
name: faker.name.fullName(),
email: faker.internet.email(),
};
export const user = {
User: () => mocks,
};
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { faker } from '@faker-js/faker';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
+ import { user } from '../mocks/user';
const schemaString = readFileSync(
resolve('./schema.graphql'),
'utf8'
);
const schema = addMocksToSchema({
schema: makeExecutableSchema({ typeDefs: schemaString }),
});
const mocks = {
Int: () => faker.datatype.number(),
Float: () => faker.datatype.float(),
+ ...user,
};
サーバーにデータを組み込む
モックデータを生成できたらApolloServerにスキーマとモックデータを組み込んでいきます。今回はポート番号を8080にしていますが、こちらは任意で変更していただいて問題ありません。
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { faker } from '@faker-js/faker';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
+ import { ApolloServer } from 'apollo-server-express';
+ import express from 'express';
const schemaString = readFileSync(
resolve('./schema.graphql'),
'utf8'
);
const schema = addMocksToSchema({
schema: makeExecutableSchema({ typeDefs: schemaString }),
});
const mocks = {
Int: () => faker.datatype.number(),
Float: () => faker.datatype.float(),
};
+ const app = express();
+ const PORT = 8080;
+ const server = new ApolloServer({
+ schema,
+ mocks,
+ });
ExpressにApolloServerを組み込む
最後にExpressにApolloServerを組み込んでいきます。
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { faker } from '@faker-js/faker';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { ApolloServer } from 'apollo-server-express';
import express from 'express';
const schemaString = readFileSync(
resolve('./schema.graphql'),
'utf8'
);
const schema = addMocksToSchema({
schema: makeExecutableSchema({ typeDefs: schemaString }),
});
const mocks = {
Int: () => faker.datatype.number(),
Float: () => faker.datatype.float(),
};
const app = express();
const PORT = 8080;
const server = new ApolloServer({
schema,
mocks,
});
+ (async () => {
+ await server.start();
+ server.applyMiddleware({ app });
+ app.listen(PORT, () => {
+ console.log(`Server ready at http://localhost:${PORT}${server.graphqlPath}`);
+ });
+ })();
サーバーが起動するか確認する
最後にサーバーが起動するか確認します。今回はTypeScriptで書いているため、ts-nodeで実行していますが、ここも適宜環境に合わせて変更してください。
$ ts-node mock-server.ts
上記のコマンドを実行して正常に処理できていれば、以下のようなページが表示されると思います。中央にある「Query your server」をクリックすると、Sandbox（エディター）が表示されます。
SandboxでQueryを書いてみる
最後にデータがモック化されているか確認するために、Queryを書いてみましょう。以下の画面のように左側に各QueryとMutationが表示されますので、ポチポチと取得したいデータにチェックを付けていきます。すると中央にQueryが生成されていくので、内容を確認しつつ、問題なければ「Run」をクリックします。すると右側にデータが表示されると思います。
まとめ
今回はapollo-server-expressを使用したGraphQLのモックサーバーの構築方法について紹介しました。導入しやすく、Sandbox(エディター)も扱いやすいと思いますので、ぜひお試しいただければと思います。
本記事を最後まで読んで頂き、ありがとうございました。いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion