Using Lambda/API Gateway in ReactJS

Question

I have a frontend that I designed in ReactJS on AWS Amplify with my Senior Project team and am looking to bring in data from API Gateway. I have a link I deployed that I tested in Lambda on the AWS console which works correctly. I am looking for some guidance on pulling in the data from that url to the frontend to use for a list. I can supply more information if you would like, please let me know what you need and any tips would be great! Thank you.

Answer 1

Assumption :

As mentioned in your question i assume that you already aware how to create API Gateway,deploy API and now you have API gateway url to access rest API.

Fetch data into react :

Example you have following cruds API

     GET /students         List all students
     GET /students/1       Load a studentsby id
     POST /students        Create a students
     PUT /students         Update a students
     DELETE /students/1    Delete a students by id

Fetching data:

           import { API } from 'aws-amplify';
             API.get('students', '/students', {}).then(result => {
             this.todos = JSON.parse(result.body);
              }).catch(err => {
                 console.log(err);
              })

Security :

You need to secure rest API either use API key or Authorizer

• https://github.com/vaquarkhan/aws-amplify-workshop-react
• https://www.freecodecamp.org/news/going-serverless-with-react-and-aws-amplify-part-2-creating-and-using-serverless-services-d401ba346eeb/
• https://gerard-sans.medium.com/create-a-rest-api-integrated-with-amazon-dynamodb-using-aws-amplify-and-vue-5be746e43c22