2019-04-01に更新

ReactでGraphQL APIにアクセスする

image

背景

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

reactではどう実装するか

Apollo Clientが便利なようです。

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

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);
        }
    )
}

参考リンク


ckoshien

アプリケーションエンジニア。 ReactJS/NodeJS/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント