React+AWS AppSync/Cognito项目：Amplify 6.x配置缺失引发GraphQL异常

使用Amplify 6.x集成AppSync与Cognito时，认证功能正常但GraphQL查询触发失败，控制台报错GraphQLAPI resolveConfig - The API configuration is missing. This is likely due to Amplify.configure() not being called prior to generateClient().，可通过以下方法解决：

1. 修正aws-exports的API配置结构 #

Amplify 6.x要求API.GraphQL采用数组格式，且需明确指定API名称。修改aws-exports.js：

const awsmobile = {
  "API": {
    "GraphQL": [
      {
          "endpoint": "https://xxxxxxxxxx.appsync-api.ap-south-1.amazonaws.com/graphql",
          "region": "ap-south-1",
          "defaultAuthMode": "userPool",
          "name": "default"
      }
    ]
  },  
  // 其余原有配置保持不变
};

export default awsmobile;

生成客户端时指定对应API名称：

const client = generateClient({ apiName: 'default' });

2. 将generateClient移至组件内部执行 #

确保客户端实例在Amplify配置完成后创建，把generateClient调用移到App组件内部：

function App({signOut, user}) {
  // 在组件内生成客户端，保证配置已生效
  const client = generateClient({ apiName: 'default' });
  
  // 其余原有代码保持不变
}

也可使用useMemo缓存客户端实例，避免重复创建：

import { useMemo } from 'react';

function App({signOut, user}) {
  const client = useMemo(() => generateClient({ apiName: 'default' }), []);
  
  // 其余原有代码保持不变
}

3. 在应用入口提前完成Amplify配置 #

将Amplify配置逻辑移至项目入口文件（如index.js），确保配置在所有组件渲染前完成：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

此时App.js中可删除Amplify.configure(awsconfig);，直接生成客户端即可。

验证配置加载状态 #

在Amplify.configure后添加日志，确认配置是否正确加载：

Amplify.configure(awsconfig);
console.log('Amplify 当前配置:', Amplify.getConfig());

若输出结果中API.GraphQL字段存在且参数正确，说明配置已正常生效。

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