如何将Mock Service Worker用于AWS AppSync GraphQL查询并解决调用失败问题

问题原因 #

• 操作名大小写不匹配：MSW的GraphQL请求处理器对操作名严格大小写敏感，你代码中发起查询时用的listNotarys是小写开头，而MSW处理器中写的操作名是大写开头的ListNotarys，二者不一致导致匹配失败。匹配失败后MSW返回默认错误响应，结构不符合AWS Amplify的预期，直接触发Cannot read property 'error' of undefined异常。
• 返回结构嵌套多余data层：MSW的ctx.data()方法会自动为返回结果包裹最外层的data字段，你在配置中额外多套了一层data，导致最终返回结构为data.data.listNotarys，不符合API.graphql方法期望的data.listNotarys结构，就算匹配成功也会出现解析报错。
• 未绑定AppSync专属端点：如果MSW默认GraphQL处理器没有绑定AppSync的服务端点，会导致跨端点的GraphQL请求无法被正确匹配。

解决方案 #

1. 修正操作名匹配
   先开启MSW的未处理请求警告，确认实际请求的操作名，在setupTests.ts中将server.listen的配置改为：

server.listen({ onUnhandledRequest: "warn" });

运行测试后查看控制台打印的未处理请求的operationName，将MSW处理器中的操作名改为和实际值完全一致即可。

2. 修正返回结构
   移除ctx.data参数中多余的data嵌套层，修改后的处理器代码如下：

graphql.query("listNotarys", (req, res, ctx) =>
  res(
    ctx.data({
      listNotarys: {
        items: [
          {
            id: "123",
            email: "email@gmail.com",
            name: "Name Here",
            phone: null,
            group: "GROUP_A",
            lastSigningDate: null,
            createdAt: "2021-11-12T14:06:57.492Z",
            updatedAt: "2021-11-12T14:32:07.190Z",
          },
        ],
        nextToken: null,
      },
    }),
  ),
),

3. 绑定AppSync专属GraphQL端点
   创建绑定了AppSync服务地址的MSW GraphQL处理器实例，避免和其他GraphQL端点冲突：

import { graphql } from 'msw'

// 替换为你项目中实际的AppSync GraphQL端点地址
const appsyncGraphql = graphql.link(process.env.REACT_APP_AWS_APPSYNC_GRAPHQL_ENDPOINT as string)

// 用绑定了端点的实例定义处理器
export const handlers = [
  appsyncGraphql.query("listNotarys", (req, res, ctx) => {
    // 处理逻辑
  })
]

内容的提问来源于stack exchange，提问作者Rafael Hernandez