如何在Amplify React组件中调用自定义Lambda函数？

你之前的导入思路本身存在根本性错误：Lambda是部署在AWS云端的后端服务代码，本身就不应该被导入前端React项目中，React默认禁止导入src目录外的文件只是表层报错原因，更核心的问题是强行导入不仅会导致逻辑错误，还可能泄露Lambda中存储的外部API鉴权密钥等敏感信息。

以下是两种符合Amplify安全规范的实现方案：

方案1：通过REST API关联Lambda（最简实现） #

这是Amplify官方推荐的标准实现方案，步骤如下：

• 执行CLI命令添加REST API：amplify add api，按提示选择配置：
  • 服务类型选REST
  • 自定义API名称（后续调用会用到）
  • 自定义接口路径，例如/get-external-data
  • 关联已存在的Lambda函数时选择你创建的getExternalData
  • 鉴权方式选择和现有Amplify Auth一致的配置（例如Cognito用户池），自动实现接口鉴权，未登录用户无法调用
• 执行部署命令：amplify push，执行后Amplify会自动把相关配置写入src/aws-exports.js，无需手动修改配置
• 在MyReactComponent.js中调用代码示例：

import { API } from 'aws-amplify';

// 按钮点击事件处理函数
const handleClick = async () => {
  try {
    // 第一个参数是你之前自定义的API名称，第二个参数是自定义的接口路径
    const data = await API.get('你的API名称', '/get-external-data', {});
    console.log('获取到的外部数据：', data);
    // 后续处理拿到的数据即可
  } catch (err) {
    console.error('调用失败：', err);
  }
}

方案2：关联为GraphQL Resolver（符合你期望在graphql文件夹下调用的需求） #

如果你现有项目用的是GraphQL API，可以直接把Lambda绑定为自定义查询的Resolver：

• 打开Amplify自动生成的GraphQL schema文件（默认路径为amplify/backend/api/你的API名/schema.graphql），添加自定义查询声明：

type Query {
  getExternalData: String! # 返回类型可按你的实际需求修改
}

• 执行amplify update api，选择你的GraphQL API，选择配置解析器，找到刚添加的getExternalData查询，关联getExternalData Lambda作为数据源
• 执行amplify push，Amplify会自动在src/graphql/queries.js中生成对应的查询语句，你可以直接在组件中调用：

import { API, graphqlOperation } from 'aws-amplify';
import { getExternalData } from '../graphql/queries';

const handleClick = async () => {
  try {
    const res = await API.graphql(graphqlOperation(getExternalData));
    const data = res.data.getExternalData;
    // 处理拿到的数据
  } catch (err) {
    console.error(err);
  }
}

补充说明 #

现有getExternalData的核心业务逻辑不需要修改，仅需要调整返回结构符合AWS API网关的响应格式即可，例如REST场景下返回{ statusCode: 200, body: JSON.stringify(你的业务数据) }。

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