amplify push does not work when existing GraphQL API is added

[lukasulbing]

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

20.9.0

Amplify CLI Version

12.10.0

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

I have added an existing GraphQL API with amplify add codegen --apiId xxxxxxxx. No other "manual" changes were made.

Describe the bug

I want to use Amplify in my JS web app to utilize authentication with Cognito and query data from DynamoDB tables via a GraphQL API (AppSync).

amplify status returns the following:

As you can see, I have already added the authentication with amplify add auth.

I have an existing GraphQL API in AppSync and I want to add it to my Amplify configuration. I use amplify add codegen --apiId xxxxxxxx to generate the necessary code and the API gets added to my local backend as follows.

So far so good... but when I run amplify push to also transfer this configuration to my remote backend in Amplify, basically nothing happens. Except that the operation changes from No Change to Create:

Then I tried to force push this with amplify push --force to see what happens, but it didn't go any further than this:

After 30 minutes I stopped this with CMD + C, but I found my GraphQL API in Amplify Studio:

Even though the GraphQL API seems deployed I cannot access it within my backend.

Expected behavior

Whenever I add a GraphQL API to my project with amplify codegen add ... it also shows up when I run amplify status. So when I push these changes I expect it to be correctly pushed to the amplify backend.

Reproduction steps

1. Add Authentication - amplify add auth
2. Add existing GraphQL API - amplify add codegen --apiId xxxxxxxx
3. Push local backend - amplify push

Project Identifier

Project Identifier: 79f15d992b5c3e5a87865affa94191ba

Log output

``` # Put your logs below this line ```

Additional information

No response

Before submitting, please confirm:

• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

[AnilMaktala]

Hey @lukasulbing, Thanks for raising this. I'm unable to reproduce the problem; it appears to be related to a potential network issue. Could you confirm if your app and API are in the same region?

[lukasulbing]

Hey @AnilMaktala, thanks for your reply. Yes, my Amplify project as well as my AppSync API are in the same region (eu-west-1). The following is my amplifyconfiguration.json:

{
  "aws_project_region": "eu-west-1",
  "aws_cognito_region": "eu-west-1",
  "aws_user_pools_id": "eu-west-1_xxxxxx",
  "aws_user_pools_web_client_id": "xxxxxxxxx",
  "oauth": {
    "domain": "xxxxxxx.auth.eu-west-1.amazoncognito.com"
  },
  "aws_cognito_username_attributes": [
    "EMAIL"
  ],
  "aws_cognito_social_providers": [],
  "aws_cognito_signup_attributes": [
    "EMAIL"
  ],
  "aws_cognito_mfa_configuration": "ON",
  "aws_cognito_mfa_types": [
    "TOTP"
  ],
  "aws_cognito_password_protection_settings": {
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": [
      "REQUIRES_LOWERCASE",
      "REQUIRES_UPPERCASE",
      "REQUIRES_NUMBERS",
      "REQUIRES_SYMBOLS"
    ]
  },
  "aws_cognito_verification_mechanisms": [
    "EMAIL"
  ],
  "aws_appsync_graphqlEndpoint": "https:/xxxxxxxxx.appsync-api.eu-west-1.amazonaws.com/graphql",
  "aws_appsync_region": "eu-west-1",
  "aws_appsync_authenticationType": "API_KEY",
  "aws_appsync_apiKey": "da2-xxxxxxxx"
}

[lukasulbing]

Whenever I try to push this configuration it says No AppSync API configured. Please add an API at the end like in the screenshot above.

[lukasulbing]

By the way, I've found a similar issue here, but it has been closed without providing a solution: https://github.com/aws-amplify/amplify-cli/issues/8394

[dpilch]

I also was not able to reproduce the issue. Did you try removing the API like suggested in issue you linked?

[lukasulbing]

Yes, I removed the API with amplify api remove and linked it again with amplify add codegen --apiId xxxxxx but this didn't help.

One of the staff members over on the Amplify discord server suggested to add the output of amplify push --debug to this issue.

I see some error messages on here, could this lead to a problem?

[lukasulbing]

Also, I am willing to set up a completely fresh amplify app to see if it's related to my local machine. In that case, it would be kind of you to tell me the commands you when you tried to reproduce the issue.

[AnilMaktala]

Hey @lukasulbing, Thank you for providing the additional information. I've performed the following steps to replicate the problem:

1. amplify init
2. amplify add auth
3. amplify add codegen --apiId xxxxxxxx
4. amplify push

Please let me know if I am missing anything in my approach here.

[lukasulbing]

Alright, I have created a new Amplify app and js project to test this. I've even left out adding the authentication.

I've run the same commands you provided (except add auth) and the only thing I did additionally was to enable Amplify Studio and pull this backend into the project (I'm not sure if this is even necessary, because the backend is empty at this point).

Then I added the GraphQL API from AppSync and pushed everything. The result was the same, nothing happened in Amplify Studio under the GraphQL tab...

This basically summarizes the steps I've taken to reproduce the issue:

1. create new Next.js project
2. install dependencies
3. amplify init
4. enable Amplify Studio
5. amplify pull --appId xxxxxx --envName dev
6. amplify add codegen --apiId xxxxxxxx
7. amplify push

I can't tell if it's related to my machine unfortunately. Do you have any more ideas what I could do to find the root cause?

[lukasulbing]

Hi, I've also tested this on a computer of my colleague (also Mac). I followed the exact same steps as mentioned above and it resulted in the same problem. After amplify push it says No AppSync API configured. Please add an API and no API is showing in Amplify Studio.

[ykethan]

@AnilMaktala @dpilch I think i have a repro for this issue, was testing multiple things.

1. on the AWS AppSync console, created a new API in eu-west-1. New API -> API type(GraphQL APIs, Design from scratch) Specify API details -> added some name(testApi) Specify GraphQL resources -> Create type backed by a DynamoDB table now. Model name(test) -> created some fields -> Resolver runtime(default: AppSync JavaScript (APPSYNC_JS)) -> Configure model table(Todo) -> create API
2. amplify init (didnt create a frontend app in my test and forget my profile was for us-east-1)

   ✖ Getting API details
   AppSync API was not found in region us-east-1
   ? Do you want to choose a different region Yes
   ? Choose AWS Region EU (Ireland)
   ⠏ Getting API detailsSuccessfully added API tesimp to your Amplify project
   ✔ Getting API details
   ? Choose the code generation language target javascript
   ? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
   ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
   ? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
   ✔ Downloaded the schema
   ✔ Generated GraphQL operations successfully and saved at src/graphql 

3. amplify add codegen --apiId <apiId>
4. amplify push

5. amplify status shows the API is in create

   
   
   Current Environment: dev

┌──────────┬───────────────┬───────────┬─────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼───────────────┼───────────┼─────────────────┤ │ Api │ tesimp │ Create │ │ └──────────┴───────────────┴───────────┴─────────────────┘

@lukasulbing is this config of the AppSync API similar to the reproduction steps above?

[lukasulbing]

@ykethan Yes, this is also what I've done. There are some differences in GraphQL API linking, but I don't think they can have an impact.

I'll let you know about them just in case: The code generation language target in my project is typescript and I've changed the file name pattern to app/graphql/**/*ts. Also, I see the option to change the location of API.ts which I've updated to app/API.ts.

Other than that, this is exactly what I'm seeing and when I try to push it, nothing changes in Amplify Studio under the GraphQL API tab.

[AnilMaktala]

Hey @lukasulbing, Can you verify the region from which you're attempting to import? Additionally, consider adding the -region in the import command as suggested here to check if it resolves your issue..

[lukasulbing]

Hey @AnilMaktala, I have been using the command from the Webinterface of AppSync npx @aws-amplify/cli codegen add --apiId xxxxxxxxxx --region eu-west-1 to import the GraphQL API.