设置 GraphQL Mock 服务器

# Web 开发 # 教程 # 生产率

介绍

本教程将指导您为 JavaScript 应用程序创建 GraphQL 模拟服务器。模拟服务器对于本地开发非常有用，可以在后端不可用或运行 E2E 测试时实现无缝测试。

先决条件

继续之前，请确保您的系统上安装了以下工具：

Node.js

npm/yarn/pnpm

循序渐进指南

1.安装依赖项

首先使用 npm 或 yarn 安装必要的依赖项：

npm install --save-dev graphql graphql-tag graphql-tools @apollo/server node-fetch

2. 设置项目结构

按如下方式设置您的项目目录：

/graphql-mock-server
  |-- localSchema.ts
  |-- schema.graphql
  |-- server.ts

3. 本地模式

在 localSchema.ts 中定义本地架构。此架构将覆盖特定查询或突变的远程架构定义。提供解析器以返回预定义的模拟数据。

// 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});

4. 远程模式

远程模式从本地文件“schema.graphql”加载。此文件应包含模式定义，可从 GraphQL 游乐场导出。

// filepath: /graphql-mock-server/schema.graphql
type Query {
  myQuery: String
}

5.模拟服务器实现

模拟服务器将本地和远程模式连接起来，优先考虑本地模式指定的查询或变异。

// 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();

如果您已经到达这里，那么我已经尽力让您继续阅读。请留下任何评论或分享更正。

CLIS.CC