背景

AnnictのGraphQL APIからデータを取得したい！
参照：アニメ視聴遅れ管理サービスの開発

reactではどう実装するか

Apollo Clientが便利なようです。

• Apollo Client + React 入門

必要なパッケージのインストール

npm install apollo-boost react-apollo graphql-tag graphql --save

ApolloClientの作成

• エンドポイントを設定します。
• アクセストークンをヘッダに設定します。

//APIエンドポイント
let url = let url = 'https://api.annict.com/graphql'

const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })

graphqlを記述する

このクエリは、ログインしているユーザ (viewer) の
見た作品 (state:WATCHED) を シーズン別降順 (orderBy: {field: SEASON, direction: DESC) でフィルタリングして返すという内容です。

let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`

当初はタイトル画像のようなクエリのアプローチをしていたのですが、annictのdiscordコミュニティでannict作者のshimbacoさんに「こう書くといいですよ」と教えていただきました。

最後に

とりあえずコンソールにログを出力するところまで。
これをstoreに入れて表示してreact dndでソートするところまでが目標。

export const fetchWatchedTitles=(code)=>{
    (async()=>{
        let url = 'https://api.annict.com/graphql'
        let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`
        const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })
        let response = await client.query({
            query
        })
        if(response !== null){
            console.log(response.data.viewer.works.nodes)
        }
    })().catch(
        error=>{
          console.log(error);
        }
    )
}

参考リンク

• AnnictのGraphQL APIを使ってアニメデータを取得しよう