javascript - 如何在 React App 中从外部 /src 导入函数
问题描述
我的项目文件夹:
-.vscod
-amplify
-backend
-auth
-api
-functions
-src
-cognitoActions.js
-app.js
-node_modules
-public
-src
-App.js. (Here I am trying to import a method from outside src)
我正在尝试在我的 App.js 文件中使用 amplify/backend/functions/src/cognitoActions.js 中的一种方法,但是在 src 之外导入时出现错误。什么是一个好的解决方案(考虑到我也可能想在未来部署它)?
我得到的错误
./src/App.js
Module not found: You attempted to import ../amplify/backend/function/AdminQueries/src/cognitoActions which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
请注意有两个 /src 文件夹
解决方案
查看https://docs.amplify.aws/cli/auth/admin#example
您应该使用“@aws-amplify/api”中的 API 来调用管理查询
import React from 'react'
import Amplify, { Auth, API } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
async function addToGroup() {
let apiName = 'AdminQueries';
let path = '/addUserToGroup';
let myInit = {
body: {
"username" : "richard",
"groupname": "Editors"
},
headers: {
'Content-Type' : 'application/json',
Authorization: `${(await Auth.currentSession()).getAccessToken().getJwtToken()}`
}
}
return await API.post(apiName, path, myInit);
}
let nextToken;
async function listEditors(limit){
let apiName = 'AdminQueries';
let path = '/listUsersInGroup';
let myInit = {
queryStringParameters: {
"groupname": "Editors",
"limit": limit,
"token": nextToken
},
headers: {
'Content-Type' : 'application/json',
Authorization: `${(await Auth.currentSession()).getAccessToken().getJwtToken()}`
}
}
const { NextToken, ...rest } = await API.get(apiName, path, myInit);
nextToken = NextToken;
return rest;
}
function App() {
return (
<div className="App">
<button onClick={addToGroup}>Add to Group</button>
<button onClick={() => listEditors(10)}>List Editors</button>
</div>
);
}
export default withAuthenticator(App, true);
推荐阅读
- amazon-web-services - Cloud9 是否提供 t2.micro 实例?
- android - 将 ML 模型添加到 Android Studio
- forms - 如何为 Web 界面使用表单和 url 参数的嵌入式设备设置 nginx 反向代理?
- javascript - 使用 for .. of 循环向所有按钮添加相同的事件侦听器
- graphql - AWS AppSync 错误:模板转换产生空响应
- laravel - 仅限管理员访问
- javascript - 正则表达式匹配日期中的数字,但不应该
- java - 如何生成 AWS 格式的跟踪 ID
- .net - 追加到文件开头
- graphql - 需要身份证吗!对于 GraphQL 架构中的所有类型?