使用amplify mock本地测试时GraphiQL界面不显示查询结果

问题描述 #

本地使用amplify mock测试GraphQL查询时出现异常：

• Mutation操作可正常将数据插入Sqlite数据库，查询请求的HTTP响应能返回正确结果
• GraphiQL界面仅显示展开/折叠箭头，无法渲染具体查询结果
• 浏览器开发者工具控制台无报错，Chrome和Safari中均出现该问题，系统为MacOS Monterey

查询语句示例 #

query MyQuery {
  getBlog(id: "73545774-56dd-45d9-b34c-ada280cc7ef4") {
    id
    name
    updatedAt
    createdAt
  }
}

正确的HTTP响应 #

{
    "data": {
        "getBlog": {
            "id": "73545774-56dd-45d9-b34c-ada280cc7ef4",
            "name": "First Blog",
            "updatedAt": "2022-07-27T17:55:02.052Z",
            "createdAt": "2022-07-27T17:55:02.052Z"
        }
    }
}

环境版本 #

node -v
v16.13.0

npm -v
8.5.2

amplify -v
9.1.0

Google Chrome
103.0.5060.134 (Official Build) (x86_64) 

操作步骤 #

npm create-react-app myapp
cd myapp
npm install @aws-amplify/cli -g
amplify init
amplify add api

DYNAMODB_ENDPOINT='http://localhost:62224' amplify mock
...

AppSync Mock endpoint is running at http://10.0.0.180:20002

异常显示截图 #

可能原因 #

1. GraphiQL版本兼容性：Amplify CLI内置的GraphiQL版本与当前Node.js/浏览器版本存在兼容性冲突，导致结果渲染逻辑失效
2. 本地网络/绑定地址问题：mock服务绑定到局域网IP（如10.0.0.180），可能导致GraphiQL前端在解析响应时出现隐性的跨域或资源加载问题
3. Mock服务缓存或资源异常：本地mock服务的缓存数据或静态资源加载不完整，影响GraphiQL界面渲染
4. 日期格式解析异常：响应中的ISO格式日期字段（updatedAt/createdAt）可能触发GraphiQL渲染组件的隐性错误

解决建议 #

• 调整Amplify CLI版本
  升级到最新稳定版：

  npm install @aws-amplify/cli@latest -g
  

  或降级到已知兼容的8.x版本：

  npm install @aws-amplify/cli@8.5.1 -g
  

  版本调整后重新启动mock服务测试

• 强制刷新浏览器并清除缓存
  按下Cmd + Shift + R（Mac）强制刷新GraphiQL页面，清除浏览器缓存后重新执行查询

• 修改mock服务绑定地址
  启动mock时指定绑定到localhost：

  DYNAMODB_ENDPOINT='http://localhost:62224' amplify mock --hostname localhost
  

  访问http://localhost:20002进行查询测试

• 重置本地mock环境
  停止当前mock服务：

  amplify mock stop
  

  删除本地mock数据缓存：

  rm -rf .amplify/mock-data
  

  重新启动mock服务

• 绕过GraphiQL验证数据
  使用Postman、curl或React应用集成Amplify客户端直接发送查询请求，确认数据正常返回，排除GraphiQL自身的问题

• 切换Node.js版本
  使用nvm等工具切换到Node.js 14.x LTS版本：

  nvm install 14
  nvm use 14
  

  重新安装Amplify CLI并启动mock服务测试

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