0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?