Call the List API

Hi Jay,

just wanted to check if pagination is in scope in the near future. tried myself but wasn’t successful.

Thanks,
Bharat Chand

@iGrimJack Sometimes this error can really be unrelated to CORS. I would suggest checking out the API Gateway and Lambda logs. That might give you an idea of what is going on.

@19bharatvikram Yeah it is still on our list. If you are having problems with it, maybe we’ll try and put something out next week hopefully.

on componentDidMount(), this.props.isAuthenticated may still be false even for an authenticated user as Auth.currentSession is asynchronous. I was easily able to reproduce this just by refresh home page for an authenticated user. I just used componentDidUpdate to come to fix this:

componentDidMount() {
    if (!this.props.isAuthenticated) {
      return;
    }
  
    this.fetchNotes();
  }

  componentDidUpdate(prevProps) {
    /*     on componentDidMount() authentication state may still being verified 
    (try refresh home screen while authenticated) so componentDidUpdate is a better to place to check if authentication state changed */
    if (this.props.isAuthenticated &&
      this.props.isAuthenticated !== prevProps.isAuthenticated) {
      this.fetchNotes();
    }
  }

  async fetchNotes() {
    try {
      const notes = await API.get("notes", "/notes");
      this.setState({ notes });
    } catch (e) {
      alert(e);
    }

    this.setState({ isLoading: false });
  }

Hmm when you refresh the home page as an authenticated user, does it log you out?

If i refresh the home page as an authenticated user, without the componentDidUpdate function, it does not load the notes because this.props.isAuthenticated is still false (and nothing happens when became true). I’m only able to reproduce this when i refresh the home page, i.e., when i login and get redirect to the home page, it loaded the notes as expected.

I’m also struggling with API.get() call. I noticed when I print out the AWS Lambda event’s json payload that the cognito identifer section is all null. No information about the currently logged in user gets passed to the API Gateway / Lambda. How do I pass the JWT token or whatever correct identifying information is needed in order to access an endpoint with authorizer enabled to aws_iam?

That’s really strange because without the componentDidUpdate it works fine in our demo app - https://demo2.serverless-stack.com

I wonder what is different in your setup.

The Amplify library should be handling this automatically. You just need to ensure that you are logging the user in correctly and that mandatorySignIn is set to true.

Wow. I figured out the issue. I had a trailing / on my API Gateway in my config file.

1 Like

Wow that’s annoying. Glad you figured it out.

Hi Jay,

I’m having trouble with the API.get("notes", "/notes"); call.
The front end is throwing this error:

TypeError: Cannot read property 'trim' of undefined

I figured the url for api gateway was misconfigured so I added a trailing ‘/’ to the url in the config file but that throws a network error.

I redeployed my apis and checked the endpoints against what I have in the config file and they match.

Still, the only thing I can think of is that the get request isn’t populating the note object because its not hitting the api properly. Do you have any idea where the problem can be coming from?

Thanks in advance! :slight_smile:

Have you created a note with no content?

1 Like

Yep that was it. Good eye.

For some reason I set the key to ‘note’ in create.js instead of ‘content’ in the API set up.

Thanks for the assist.

1 Like

Hi there,

I have a doubt.

I did everything you did for the pages forms and layouts. So, everything is working fine through the Call the List API, but I realized in the previous step that, apparently I am not sending (or saving) the file in the bucket. The code is exactly the same you posted, so, I think I did something wrong when configuring the API on AWS or setting up the S3 bucket.

I am going to show what is displayed at my S3 page at AWS:

Do you have any ideas of how I can fix this?

Can you inspect the developer console in your browser to see if the request to upload the file is successful?

I am having an issue.

I can create a note and upload it with an attachment no problem. But when I try to list the notes I get a error 500



My config does not have a trailing “/”

500 errors are easier to debug because they are usually caused by our own code. I’d enable logging and add some console.log statements to see what is causing it.

Hi, thank you for the amazing tutorial. I have been struggling with a strange bug for some weeks now. The notes will not render unless I navigate away from the page and the hit the back button. Moreover, if I hit the refresh button after I have successfully rendered the notes, they will fail to be rendered again, and I have to leave the page and then return to be able to see them.

Have you experienced this type of behavior before?

Hmm no. Can you post a GIF maybe with what is going on? Also, can you check if the demo version - https://demo2.serverless-stack.com does the same thing for you?

Hi, thank you for coming back to me. I made a GIF that you can see here - http://www.giphy.com/gifs/XcdqDHpPhxbjpYQU1m. I tried the demo version and it was working as intended.