Not Authorized to access XXXXXXX on type Query

amplify

How to resolve the error.
Not Authorized to access XXXXXXX on type Query

Operating environment

$ sw_vers
ProductName:	macOS
ProductVersion:	11.6.5
BuildVersion:	20G527

$ node -v
v16.13.0

$ npm list -g
├── @aws-amplify/cli@9.1.0
├── npm@8.1.0

Conclusion

以下のように、authMode: 'AWS_IAM’に変更したらエラーが解消しました。

const res: any = await API.graphql({
  query: gqlQueries.listTodos,
  authMode: 'AWS_IAM'
})

修正前のエラーが出ていたコードは以下の通りです。AMAZON_COGNITO_USER_POOLSにしていました。

const res: any = await API.graphql({
  query: gqlQueries.listTodos,
  authMode: 'AMAZON_COGNITO_USER_POOLS'
})

amplifyのapiの設定について、まだ経験が少ないので、backendのapiの設定を正しく変更すれば良いのかもしれないですが、amplifyはそこらへんの内容がわかりづらいです。また、ピンポイントで参考になるサイトが現在(2022年時点)でも見つけづらい状況なので、とりあえず解消した段階での記録を備忘のために書きました。

以下のコードでも大丈夫でした。

const res: any = await API.graphql(graphqlOperation(gqlQueries.listTodos))

Amplifyでの認証方式の設定にエラーの原因がありそうだと思います。CognitoかAPI Keyかを選択するところで、正しい設定をすることで今回のエラーを解消するのが、正しい答えだと思います。しかし、ここら辺のAmplifyの設定は、トライ&エラーで理解していくしかなさそうです。

POST https://cognito-identity.ap-northeast-1.amazonaws.com/ 400　fetch-http-handler.js?3f03:45

ログインしていない場合に、chrome 開発consoleに、このようなエラーが表示されます。400は不正リクエストのことです。ログインをすると、表示されなくなるので、そのままにしています。

コードの全体

pages/components/UserListSample.tsx というパスとファイルです。

import { useState, useEffect } from 'react';
import API, { graphqlOperation } from '@aws-amplify/api';
import * as gqlQueries from '../../src/graphql/queries';


const UserListSample: React.FC = () => {
  const [todos, setTodos] = useState<any>({})

  const getTodo = async() => {
    try {
      const res: any = await API.graphql(graphqlOperation(gqlQueries.listTodos))
      
      console.log("res ... " + JSON.stringify(res))
      
      //setTodos(res.data.listTodos.items)
    } catch (e) {
      console.log("エラー")
      console.log(e)
    }
  }

  getTodo()

  return (
    <div>
      ああああああ
    </div>
  );
}

export default UserListSample;

amplify,next.jsamplify

Posted by パソコンの先生