AWS Amplify Gen 2 中解决 GraphQL API 的 "Cannot read property 'create' of undefined" 错误

在 React Native 应用开发中，使用 AWS Amplify Gen 2 版本时，开发者可能会遇到一个常见错误："TypeError: Cannot read property 'create' of undefined"。这个错误通常发生在尝试通过 GraphQL API 创建数据记录时，表明客户端未能正确初始化数据模型。

错误原因分析

这个错误的核心问题在于 Amplify 客户端未能正确初始化数据模型。具体表现为：

1. 开发者已经定义了数据模型（如 Profile 模型）
2. 使用 generateClient 生成了客户端实例
3. 但在调用 client.models.Profile.create() 时出现 undefined 错误

根本原因通常有以下几种：

1. Amplify 配置未在应用启动时初始化
2. 客户端生成时机过早
3. 模型定义与实际 GraphQL schema 不匹配

解决方案

1. 确保 Amplify 正确配置

在应用的入口文件（通常是 App.tsx 或 index.js）中，必须首先调用 Amplify.configure() 方法：

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';

Amplify.configure(amplifyconfig);

2. 检查客户端生成时机

确保 generateClient 调用发生在 Amplify.configure() 之后。最佳实践是在组件外部生成客户端单例：

import { generateClient } from "aws-amplify/data";
import type { Schema } from "./amplify/data/resource";

const client = generateClient<Schema>();

3. 验证模型定义

检查你的数据模型定义是否与 GraphQL schema 一致。在 Gen 2 中，模型定义通常位于 amplify/data/resource.ts 文件中：

const schema = a.schema({
  Profile: a
    .model({
      username: a.string(),
      personalRecord: a.string()
    })
    .authorization(allow => [allow.owner()])
});

4. 完整的正确代码示例

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "./amplify/data/resource";

const client = generateClient<Schema>();

const ProfileScreen = () => {
  const [username, setUsername] = useState('');
  const [personalRecord, setPersonalRecord] = useState('');

  const handleCreateProfile = async () => {
    try {
      const { data, errors } = await client.models.Profile.create({
        username,
        personalRecord
      });
      
      if (errors) {
        console.error(errors);
        return;
      }
      
      console.log("Profile created:", data);
    } catch (error) {
      console.error("Error creating profile:", error);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        value={username}
        onChangeText={setUsername}
        placeholder="Username"
      />
      <TextInput
        value={personalRecord}
        onChangeText={setPersonalRecord}
        placeholder="Personal Record"
      />
      <Button title="Create Profile" onPress={handleCreateProfile} />
    </View>
  );
};

最佳实践建议

1. 初始化顺序：确保 Amplify.configure() 在应用启动时最先执行
2. 错误处理：完善 GraphQL 操作的错误处理逻辑
3. 类型安全：充分利用 TypeScript 类型检查，确保模型定义与操作一致
4. 环境检查：在开发和生产环境使用不同的配置
5. 日志记录：添加详细的日志记录，便于调试

常见问题排查

如果按照上述步骤仍然遇到问题，可以检查以下方面：

1. 确认 amplifyconfiguration.json 文件存在且内容正确
2. 检查 AWS 控制台，确认 API 已成功部署
3. 验证 IAM 权限设置是否正确
4. 检查网络连接，确保能够访问 AWS 服务端点

通过以上步骤，大多数情况下可以解决 "Cannot read property 'create' of undefined" 错误，使 GraphQL API 能够正常工作。