How can I make a request to AppFlow from my React App?

Question

so I've been working with Fivetran for a while and I've gotten used to hitting their API endpoints. But now, I've got to switch gears and work with AWS AppFlow, which is totally new territory for me.

Right now, I'm working on a React App and I'm struggling to figure out how to make it talk to AppFlow. I tried installing 'aws-sdk', but when I tried to import AWS from it, all I got was a nasty error message.

This is my aws-config.js file inside my React application:

import AWS from 'aws-sdk';

    AWS.config.update({
      region: process.env.NX_REACT_APP_REGION,
      credentials: {
        accessKeyId: process.env.NX_REACT_APP_ACCESS,
        secretAccessKey: process.env.NX_REACT_APP_SECRET,
      },
    });
    
    export const appflow = new AWS.Appflow();

Then I'm importing it inside my component import {appflow} from '../../../../../aws-config'; but when I reload the page I get this error

TypeError aws_sdk__WEBPACK_IMPORTED_MODULE_0___default(...).Appflow is not a constructor

I've been searching around online trying to figure out how to make requests to AppFlow, but I gotta admit, I'm pretty stumped. Can anyone lend a hand? Any advice or guidance would be really appreciated.

Thanks in advance!

*** UPDATE ***

I could solve the problem by importing AppFlow directly from aws-sdk as follow :

import * as Appflow from "aws-sdk/clients/Appflow";
import AWS from 'aws-sdk';

Here is my file for future reference:

import * as Appflow from "aws-sdk/clients/Appflow";
import AWS from 'aws-sdk';
console.log("HELLO FROM AWS FILE")
AWS.config.update({
    region: process.env.NX_REACT_APP_REGION,
    credentials: {
        accessKeyId: process.env.NX_REACT_APP_ACCESS,
        secretAccessKey: process.env.NX_REACT_APP_SECRET,
    },
});

const amplitudeKey = process.env.NX_REACT_APP_AMPLITUDE_API_KEY;
const amplitudeSecret = process.env.NX_REACT_APP_AMPLITUDE_SECRET_KEY;

const appflow = new Appflow();
const createConnectorProfileParams = {
    connectorProfileName: "connector-profile-test",
    connectorType: "Amplitude",
    connectionMode: "Public",
    connectorProfileConfig: {
        connectorProfileCredentials: {
            Amplitude: {
                apiKey: `${amplitudeKey}` ,
                secretKey: `${amplitudeSecret}`
            },
        },
        connectorProfileProperties: {
            Amplitude: {}
        },

    }
}

appflow.createConnectorProfile(createConnectorProfileParams, (err, data) => {
    if (err) console.log('Error creating flow:', err);
    else console.log('Flow created successfully:', data);
});

score 1 · Answer 1 · answered Jul 20 '23 at 15:42

I had trouble with this too, did you setup up aws-sdk and if so, how?

You could try this:

In your React app, create a file (e.g., aws-config.js) to store your AWS credentials and configuration. Import the AWS SDK and set your credentials like this:

import AWS from 'aws-sdk';

AWS.config.update({
  region: 'YOUR_AWS_REGION',
  credentials: {
    accessKeyId: 'YOUR_ACCESS_KEY_ID',
    secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
  },
});

Replace 'YOUR_AWS_REGION', 'YOUR_ACCESS_KEY_ID', and 'YOUR_SECRET_ACCESS_KEY' with your actual AWS region and credentials.

Once your AWS configuration is set up, you can start making requests to AWS AppFlow. For example, you can use the createFlow method to create a new flow in AppFlow:

import AWS from 'aws-sdk';

AWS.config.update({
  // Your AWS configuration...
});

const appflow = new AWS.Appflow();

const createFlowParams = {
  flowName: 'YOUR_FLOW_NAME',
  description: 'YOUR_FLOW_DESCRIPTION',
  triggerConfig: {
    triggerType: 'Scheduled',
    triggerProperties: {
      schedule: 'cron(0 18 ? * MON-FRI *)', // Example: Trigger flow every weekday at 6:00 PM UTC
    },
  },
  // Add other required parameters for your flow creation here...
};

appflow.createFlow(createFlowParams, (err, data) => {
  if (err) console.log('Error creating flow:', err);
  else console.log('Flow created successfully:', data);
});

Do the same replacing thing explained before and it should work but also, the appflow documentation has some samples if not you could check out in the AWS Development Community page, here: https://community.aws/

Hope this works and wish you the best of lucks, have a great day!

Thank you for your response Juan P. Romano, but I end up with the same error. I've updated my question with the code that I'm using. Have a great day as well ! — Amauri Santos, Jul 20 '23 at 16:42
Did the code u posted worked? if so, congrats man! if not, let me know and we can try another thing, now I'm curious to make it work, best of luck! — Juan P. Romano, Jul 21 '23 at 19:17

score 0 · Answer 2 · answered Jul 20 '23 at 15:44

0

You can check this npm package.

answered Jul 20 '23 at 15:44

Arda Örkin

121
3
8

How can I make a request to AppFlow from my React App?

2 Answers2