DEV Community

AK DevCraft
AK DevCraft Subscriber

Posted on

Setup GraphQL Mock Server

Introduction

This tutorial will guide you through creating a GraphQL mock server for your JavaScript application. A mock server is invaluable for local development, enabling seamless testing when the backend is unavailable or while running E2E tests.

Prerequisites

Before proceeding, ensure the following tools are installed on your system:

  • Node.js
  • npm/yarn/pnpm

Step-by-step Guide

1. Install Dependencies

Begin by installing the necessary dependencies with npm or yarn:

npm install --save-dev graphql graphql-tag graphql-tools @apollo/server node-fetch
Enter fullscreen mode Exit fullscreen mode

2. Setup Project Structure

Set up your project directory as follows:

/graphql-mock-server
  |-- localSchema.ts
  |-- schema.graphql
  |-- server.ts
Enter fullscreen mode Exit fullscreen mode

3. Local Schema

Define your local schema in localSchema.ts. This schema will override remote schema definitions for specific queries or mutations. Provide resolvers to return predefined mock data.

// filepath: /graphql-mock-server/localSchema.ts
import { makeExecutableSchema } from '@graphql-tool/schema'
import { gql } from 'graphql-tag'

const typeDefs = gql`
  type Query {
    myQuery: String
  }
`;

const resolvers = {
  Query: {
    myQuery: () => 'This is mock data'
  },
};

export const localSchema = makeExecutableSchema({typeDefs, resolvers});
Enter fullscreen mode Exit fullscreen mode

4. Remote Schema

The remote schema is loaded from the local file schema.graphql. This file should include the schema definition, which can be exported from your GraphQL playground.

// filepath: /graphql-mock-server/schema.graphql
type Query {
  myQuery: String
}
Enter fullscreen mode Exit fullscreen mode

5. Mock Server Implementation

The mock server stitches the local and remote schemas, giving precedence to the local schema-specified queries or mutations.

// filepath: /graphql-mock-server/server.ts
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { stitchSchema } from '@graphql-tools/stitch';
import { loadSchemaSync } from '@graphql-tools/load';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { localSchema } from './localSchema';
import { wrapSchema } from '@graphql-tools/wrap';
import { print } from 'graphql';
import fetch from 'node-fetch';

async function startServer(){
  const remoteSchema = loadSchemaSync('graphql-mock-server/schema.graphql',{
    loaders: [new GraphQLFileLoader()],  
  });

  const executableRemoteSchema = wrapSchema({
    schema: remoteSchema,
    executor: async ({ document, variables }) => {
      const query = print(document);
      const fetchResult = await fetch(
          'https://graphql.server.com/graphql',
          {
          method: 'POST',
          headers: { 'Content-Type': 'application/json'},
          body: JSON.stringify({ query, variables}),
          },
        );
       return fetchResult.json();
     },
   });

  const schema = stitchSchema ({
    subschema: [
        { schema: executableRemoteSchema },
        { schema: localSchema },
        merge: {
          myQuery: { //override the Query/Mutation here
            selectionSet: '{ __typename }',
            resolve: (parent, args, context, info) => {
               return localSchema
                   .getQueryType()
                   ?.getFields()
                   .myQuery.resolve(parent, args, context, info);
               },
             },
           },
          },
        },
       ],
     });

   const server = ApolloServer({ schema });
   const {url } = await startStandaloneServer( server, {
       listen: { port: 4000},
   });

  console.log(`πŸš€ Server ready at ${url}`);
}

startServer();

Enter fullscreen mode Exit fullscreen mode

If you have reached here, then I made a satisfactory effort to keep you reading. Please be kind enough to leave any comments or share corrections.

My Other Blogs:

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay