フロントエンド開発に役立つモックサーバー構築：@graphql-tools/mock と Faker を使った実践ガイド

mkdir express-mongodb-graphql-with-typescript
cd express-mongodb-graphql-with-typescript
npm init -y

  "dependencies": {
    "@apollo/server": "^4.11.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "graphql": "^16.10.0",
    "graphql-tag": "^2.12.6"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "4.17.2",
    "@types/express-serve-static-core": "^4.17.21",
    "@types/graphql": "^14.5.0",
    "@types/node": "^22.10.5",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.7.3"
  }

npm install

import { gql } from 'graphql-tag';

export const typeDefs = gql`
  scalar Date

  type Todo {
    id: ID!
    title: String!
    isCompleted: Boolean!
    createdAt: Date!
    updatedAt: Date
  }

  type Query {
    todos: [Todo!]
    todo(id: ID!): Todo
  }
`;

import { GraphQLScalarType, Kind } from 'graphql';

export const DateScalar = new GraphQLScalarType({
  name: 'Date',
  description: 'Date custom scalar type',
  serialize(value) {
    if (value instanceof Date) {
      return value.toISOString();
    }
    throw Error('GraphQL Date Scalar serializer expected a `Date` object');
  },
  parseValue(value) {
    if (typeof value === 'number') {
      return new Date(value);
    }
    throw new Error('GraphQL Date Scalar parser expected a `number`');
  },
  parseLiteral(ast) {
    if (ast.kind === Kind.INT) {
      return new Date(parseInt(ast.value, 10));
    }
    return null;
  },
});

npm install @graphql-tools/mock @faker-js/faker

import { faker } from '@faker-js/faker';

export const mocks = {
  Todo: () => ({
    title: faker.lorem.sentence(),
    isCompleted: faker.datatype.boolean(),
    createdAt: faker.date.past().toISOString(),
    updatedAt: faker.datatype.boolean() ? faker.date.recent().toISOString() : null,
  }),
  Query: () => ({
    todos: () => Array.from({ length: 10 }),
    todo: () => ({}),
  }),
};

import express from 'express'
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import cors from 'cors';

import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { typeDefs } from './graphql/schema';
import { mocks } from './mocks/mock';

const schema = makeExecutableSchema({ typeDefs });

const mockedSchema = addMocksToSchema({
  schema,
  mocks,
});

const app = express();
const PORT = 8080;

const server = new ApolloServer({
  schema: mockedSchema,
});

async function startServer() {
  await server.start();
  app.use(
    '/graphql',
    cors(),
    express.json(),
    expressMiddleware(server)
  );

  app.listen(PORT, () =>
    console.log(`Mock GraphQL server running at http://localhost:${PORT}/graphql`)
  );
}

startServer();

npx ts-node-dev src/mockServer.ts