Add existing AppSync API to AWS Amplify

The problem

When I run CodeBuild inside of Amplify, my AppSync credentials are overwritten, breaking the build.

Details

I'm building a ReactJS site using AWS Amplify as the backend. The project is being deployed using the Amplify built-in CodeBuild. The AppSync API was created separately to Amplify, and doesn't directly appear in the Amplify console.

When I run amplify codegen add --apiId xxx, the aws-exports.js file is generated, with the following fields:

const awsmobile = {
    "aws_project_region": "eu-west-2",
    "aws_appsync_graphqlEndpoint": "https://xxxxx.appsync-api.eu-west-2.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "xxxxx"
};

However, when the Amplify Frontend CodeBuild job runs, the AppSync fields are not present. Running amplifyPush --simple during the Backend job overwrites the aws-exports.js file with the following:

const awsmobile = {
    "aws_project_region": "eu-west-2"
};

This is the same format which the amplifyPush --simple command seems to be generating. The result of this is during the build, React cannot find the variables it needs.

> react-scripts build
  [INFO]: Creating an optimized production build...
  [INFO]: Failed to compile.
  [INFO]: /codebuild/output/src143434459/src/site/src/index.tsx
          TypeScript error in
          /codebuild/output/src143434459/src/site/src/index.tsx(12,20):
          
          Property 'aws_appsync_graphqlEndpoint' does not exist on type 
          '{ aws_project_region: string; }'.  TS2339

          10 |
          11 | export const client = new AWSAppSyncClient({
        > 12 |     url: awsconfig.aws_appsync_graphqlEndpoint,
             |                    ^
          13 |     region: awsconfig.aws_appsync_region,
          14 |     auth: {
          15 |         type: AUTH_TYPE.API_KEY,

My aim

I want the aws_appsync variables within the aws-exports.js file to be present after being generated by CodeBuild. I don't want to keep the API key in version control, so having it provisioned during the build process is ideal.

What I've tried already

Looking into if it's possible to run the amplify codegen add --apiId xxx job during the front-end build, but since it takes parameters I'm not sure how do achieve this.
Looking into trying to add the API to Amplify itself, since I created it separately to Amplify. Then amplify env pull would get these environment details correctly.

Screenshot showing empty API tab in Amplify

Files involved

amplify.yml

This is the default file which comes with a new ReactJS / Amplify project.

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import AWSAppSyncClient, { AUTH_TYPE } from 'aws-appsync';
import awsconfig from 'aws-exports';


export const client = new AWSAppSyncClient({
    url: awsconfig.aws_appsync_graphqlEndpoint,
    region: awsconfig.aws_appsync_region,
    auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: awsconfig.aws_appsync_apiKey,
    }
});

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();