AWS Amplify: "InvalidApiName: API name is invalid"

Question

Dear aws enjoyers, i am currently running into an error using the hosted version of my react amplify app. I manually added a new api to the amplifyconfiguration.json recently. This works well on my local development server. I have github connected to amplify to use CI/CD. So i definitely have pushed the updates on that json file (i checked the git, file is also not in gitignore) to the branch that amplify pulls to build the app. When the app is built and i try to trigger the api call i get the error: "InvalidApiName: API name is invalid."
I am pretty sure that has something to do with the configuration not being updated on amplify? Maybe i have to use the amplify cli in some way? Appreciate any help!

```
// amplifyconfiguration.json
"aws_cloud_logic_custom": [
    {
      "name": "first_api",
      "endpoint": "https://xxxxxx.execute-api.xxx-central-1.amazonaws.com/xxxxxx",
      "region": "xxxxxx"
    },
    {
      "name": "second_api",
      "endpoint": "https://xxxxxx.execute-api.xxx-central-1.amazonaws.com/xxxxxx",
      "region": "xxxxxx"
    }
  ]
}

// react
import config from "./amplifyconfiguration.json";
Amplify.configure(config, {
   API: {
   REST: {
      headers: async () => {
         const session = await fetchAuthSession();
         const token = session.tokens?.idToken;
         return { Authorization: token };
      },
   },
  },
});
```

Buzdar · Answer

Verify Amplify Deployment:
Ensure that your recent changes, including the addition of the new API in the amplifyconfiguration.json file, have been successfully deployed. You mentioned that you have connected GitHub to Amplify for CI/CD. Double-check your deployment logs on the Amplify console to confirm that the changes have been picked up and deployed correctly.

Check Amplify Environment:
Make sure you're using the correct Amplify environment. Sometimes, if you're using different environments (e.g., development, staging, production), the configuration might be different in each environment. Verify that the API configuration exists in the correct environment.

Amplify CLI:
If you suspect that the configuration might not have been updated properly on the Amplify backend, you can try using the Amplify CLI to manually push the changes. Run amplify push in your project directory to ensure that the latest configuration is deployed.

Clear Cache:
Sometimes, caching issues can cause problems with the updated configuration not being recognized. Try clearing your browser cache or using a private browsing window to see if the issue persists.

Check API Name:
Ensure that the API name you're using in your code matches exactly with the name specified in the amplifyconfiguration.json file. Even a minor difference can cause the "InvalidApiName" error.

Verify API Gateway Setup:
Double-check the setup of your new API in the AWS API Gateway console. Make sure that the API is deployed and accessible, and that there are no issues with permissions or configurations on the AWS side.

By following these steps, you should be able to identify and resolve the issue with accessing your newly added API in your React Amplify app. If the problem persists, feel free to provide more details, and I can assist you further!

AWS Amplify: "InvalidApiName: API name is invalid"

Add your answer

Relevant content