AmplifyでGraphQLクエリを実行時に「No api key configured」が発生する問題

AWS　AmplifyからAPI KEYを認証方式としてAppsyncのクエリを実行時した際に発生したエラーです。
エラーの再現方法としてはnpm startを実行し、API呼び出しを行う処理を実行した際にブラウザのコンソール上に「No api key configured」と表示されました。

コード

ユーザー追加のMutationを実行時に認証方式としてAPI_KEYを設定しています。
ちなみに　「authMode: "API_KEY"」なしだとNo credentialsのエラーが発生します。

App.tsx

function App() {
.
.
.
const res = await API.graphql<GraphQLQuery<CreateUserMutation>>({
      query: createUser,
      variables: {
        input: {
          name: input.name,
          email: input.email,
        },
      },
      authMode: "API_KEY",
});
.
.
.
}

aws-exports.jsonには認証方式の指定、API_KEYも設定されていました。

aws-exports.json

const awsmobile = {
  aws_project_region: <REGION>,
  aws_appsync_graphqlEndpoint: <GRAPHQL_ENDPOINT_URL>
  aws_appsync_region: <REGION>,
  aws_appsync_authenticationType: "API_KEY",
  aws_appsync_apiKey: <API_KEYのID>,
};

export default awsmobile;

原因

コード内でAmplify.configure(awsconfig);の記述が抜けていた

App.tsx

Amplify.configure(awsconfig); // aws-exports.jsの設定が反映されていなかった！

function App() {
.
.
.
const res = await API.graphql<GraphQLQuery<CreateUserMutation>>({
      query: createUser,
      variables: {
        input: {
          name: input.name,
          email: input.email,
        },
      },
      authMode: "API_KEY",
});
.
.
.
}

対処

対象ファイルにAmplify.configure(awsconfig);を追加する。
インポートエラーが発生する場合は以下の記事を参考にaws-exports.jsの拡張子をtsに変更してみてください！
https://qiita.com/higuuu/items/980b1c90ecb8ae347c24

以上です。読んでいただき、ありがとうございます。