serverless-next.js: 503 Error when invoking NextJS API Route from Client

Describe the bug

I am using Amplify’s API functionality to invoke an AppSync GraphQL endpoint to resolve my API calls. But, I’m getting a GraphQL error message in my Lambda@Edge CloudWatch logs when trying to invoke my API in my application from the client side.

Error: No credentials
    at GraphQLAPIClass.<anonymous> (/var/task/pages/api/users/[username].js:163397:35)
    at step (/var/task/pages/api/users/[username].js:163243:23)
    at Object.next (/var/task/pages/api/users/[username].js:163224:53)
    at fulfilled (/var/task/pages/api/users/[username].js:163215:58)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

The weird thing is that when I try to execute the API’s internal logic on the server side, everything works properly. So, this correctly retrieves and display all data in my application.

# pages/index.js
export const getServerSideProps = async ({ req, res }) => {
  const response = await API.graphql(graphqlOperation(UserQueries.GetUser, <username>))
  
  return {
    props: {
      user: response.data,
    },
  };
};

However, if if I invoke this api route, by going to <app_id>.cloudfront.net/api/users/[username], I get the result under “Actual behavior”.

# pages/api/users/[username]/index.js

const handler = async (req, res) => {
  const { username } = req.query.username;
  const response = await API.graphql(graphqlOperation(UserQueries.GetUser, <username>))
  res.status(200).json(response.data);
};

This tells me that I have set up my Cognito and identity pools correctly. For now I am just developing using an API Key, so I expect there to be no permissions barriers.

Actual behavior

If I go to <app_id>.cloudfront.net/api/users/[username] I receive the following error page:

Expected behavior

API query response should be returned when invoked client side.

Steps to reproduce

1. Deploy a GraphQL API using CDK (separately, not using Amplify)
2. Create. NextJS application (https://nextjs.org/docs/getting-started)
3. Put the AppSync Endpoint URL in the config and set up a custom “_app.js” file using Amplify.configure(config);
4. Add an API Route to the NextJS Application using the instructions here: https://nextjs.org/docs/api-routes/introduction.
5. Handle the API route by using Amplify’s API client: const response = await API.graphql(graphqlOperation(operation, params))
6. Add a serverless.yaml at the root of the project with the following content:

# serverless.yml
App:
  component: "@sls-next/serverless-component@1.18.0"

1. Deploy the application by running the command serverless. See: https://github.com/serverless-nextjs/serverless-next.js
2. Go to https://<app_id>.cloudfront.net/api/<path_to_your_api_route>.

This will result in the 503 error above.

Screenshots/Code/Logs

# serverless.yml
App:
  component: "@sls-next/serverless-component@1.18.0"

Versions

• OS/Environment: MacOS Catalina v10.15.6
• @sls-next/serverless-component version: “@sls-next/serverless-component@1.18.0”
• Next.js version: 10.0.8

Additional context