如何在 React App 中从外部 /src 导入函数答案

【问题标题】：How can I import functions from outside /src in React App如何在 React App 中从外部 /src 导入函数
【发布时间】：2021-03-06 16:58:21
【问题描述】：

我的项目文件夹：

-.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 文件夹

【问题讨论】：

标签： javascript node.js reactjs aws-amplify amplifyjs

【解决方案1】：

查看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);

【讨论】：