添加Schema字段后AWS Amplify Client生成失败求助

问题描述 #

原本运行正常的Next.js项目，在为Schema添加新字段后出现异常：AWS Amplify Client无法生成，浏览器提示传递给Amplify.configure()的配置缺少GraphQL Provider配置。

已排查的关键信息：

• 严格遵循初始创建代码和Schema的步骤，核对过AWS AppSync到本地代码的配置
• amplify_outputs.json配置正确，包含新字段；运行npx ampx sandbox和部署均成功，AppSync控制台能看到新字段
• /app/layout.tsx中调用Amplify.configure(outputs)返回undefined，但Amplify.getConfig().API.GraphQL.modelIntrospection能正常获取到包含新字段的模型信息
• 调用generateClient<Schema>()后，client.models为null，调用client.models.NewCustomerInformation.create()触发错误

解决方案 #

1. 确保Amplify配置与客户端生成的执行顺序 #

必须在生成客户端前完全完成Amplify配置初始化，Next.js App Router中推荐在客户端组件内按顺序执行：

'use client';

import { Amplify } from 'aws-amplify';
import outputs from '@/amplify_outputs.json';
import { generateClient } from 'aws-amplify/api';
import type { Schema } from '@/amplify/data/resource';

// 先完成配置初始化
Amplify.configure(outputs, { ssr: true });

// 再生成客户端
const client = generateClient<Schema>();

export default function CustomerComponent() {
  const createCustomer = async () => {
    try {
      await client.models.NewCustomerInformation.create({
        // 传入包含新字段的数据
      });
    } catch (err) {
      console.error(err);
    }
  };

  return <button onClick={createCustomer}>创建客户信息</button>;
}

2. 清除缓存并重新生成客户端代码 #

执行命令清除旧生成文件，重新生成适配新Schema的客户端代码：

rm -rf amplify/data
npx ampx generate client

（若使用旧版Amplify CLI，替换为amplify codegen）

3. 检查amplify_outputs.json的GraphQL配置完整性 #

确认amplify_outputs.json的API.GraphQL部分包含以下必填字段，缺失会导致Provider配置识别失败：

"API": {
  "GraphQL": {
    "endpoint": "你的AppSync端点URL",
    "region": "你的AWS区域",
    "defaultAuthMode": "apiKey", // 或你使用的认证模式，如amazon-cognito-user-pools
    "modelIntrospection": { /* 完整的模型结构 */ }
  }
}

4. 验证SSR模式下的配置参数 #

若项目启用SSR，配置时必须传入ssr: true，避免客户端与服务器端配置不一致：

Amplify.configure(outputs, { ssr: true });

5. 统一依赖版本避免兼容性问题 #

确保aws-amplify相关依赖版本一致，执行命令更新到最新兼容版本：

npm install aws-amplify@latest @aws-amplify/api@latest

内容的提问来源于Stack Exchange，提问作者Thomas