Call the List API

Chapter Comments
41

From @jayair on Mon Apr 23 2018 17:07:02 GMT+0000 (UTC)

@mbahfauz Sorry what didn’t work for you? Are you trying to call an API that doesn’t need authentication?

42

From @nuyulcore on Mon Apr 23 2018 18:06:52 GMT+0000 (UTC)

@jayair Yap that is true bro. I want to call the note api for public who doesn’t need authentication.m

43

From @jayair on Mon Apr 23 2018 18:41:28 GMT+0000 (UTC)

@mbahfauz You need to turn off authentication here - https://github.com/AnomalyInnovations/serverless-stack-demo-api/blob/master/serverless.yml#L73.

And you would need to pass in the user id for the notes you are fetching.

44

From @nuyulcore on Mon Apr 23 2018 18:46:20 GMT+0000 (UTC)

Got it,
So the code would be like this?

list: # Defines an HTTP API endpoint that calls the main function in list.js # - path: url path is /notes # - method: GET request handler: list.main events: - http: path: notes method: get cors: true authorizer: turn_off

Or I should use other way?

Thanks

45

From @jayair on Mon Apr 30 2018 18:16:13 GMT+0000 (UTC)

@mbahfauz You can just skip the authorizer option.

46

notes() {
return API.get(“notes”, “/notes”);
}

The API.get() portion is failing with “Error: Network Error”. How can I troubleshoot this further / get a stack trace to determine what is happening? I’m on a Mac. aws-api-gateway-cli-test was successful and my API is deployed and working.

47

Hmm that’s strange. I’m not sure about a stack trace in this case but did any other frontend API calls work for you?

48

Hi jay,

Although this tutorial is pretty detailed and almost complete but one thing that I find missing is pagination at dynamoDB level as most of the modern day application are incomplete without pagination in today’s world.
Can we expect pagination in list API sometimes soon in this Serverless app architecture.

Thanks,
Bharat Chand

49

Oh that’s a good point. Yeah I’ll add it to the list.

50

Hi @jayair ,
I am making some modifications to your tutorial i have a list of projects with primary key their name. Is their a way to list on this part all the projects and not only the projects created by a user?
Thanks in advance

51

Are you trying to get all the projects (or notes in our case) that are in the table?

52

Hi. I am following your tutorial to create an application of my own. I had deploy the back end successfully and as far as I can tell the API.post function is working normally. But when I call API.get(), I’m having this error even though the serverless invoke local work nicely as well.
Access to XMLHttpRequest at ‘https://akhd9as2d6.execute-api.us-east-1.amazonaws.com/prod/funcs’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Could you suggest where the error could be?
Thank you

53

Hi Jay,

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

Thanks,
Bharat Chand

54

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

55

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

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

57

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.

58

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?

59

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.

60

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.