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

Question

My project folders:

-.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)

I am trying to use one of the methods in amplify/backend/functions/src/cognitoActions.js in my App.js file, But I am getting errors for importing outside of src. What would be a good solution for it (Considering that I also might want to deploy it in the fututre )?

The Error I am getting

./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.

Please notice that there are two /src folders

Answer 1

Check out https://docs.amplify.aws/cli/auth/admin#example

You should use the API from "@aws-amplify/api" to call the Admin Queries

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