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
以上です。読んでいただき、ありがとうございます。