Github GraphQL APIをReactとApolloで叩いてみてた

Github GraphQL API

Githubのいろんな情報にアクセスできるGraphQLのAPI。

GitHub GraphQL API v4 | GitHub Developer Guide

だいたいGraphQL練習するっていうとこれが叩かれているイメージ。ちなみにクエリを叩いてみるだけなら以下からログインしてOAuth認証するだけでできるのでおすすめ。

GraphQL API Explorer | GitHub Developer Guide

Apollo

ApolloというGraphQLのライブラリとReactとつなぎこむreact-apolloというライブラリを使ってGithubのAPI叩いて自分がStarしてるリポジトリの一覧を取ってくるみたいなものを作ってみた。

github.com

作りかけだけど。

www.apollographql.com

このへんを参考にしつつ作ったが、一点だけそのままだと動かないところがあって、clientのインスタンスを作る際にApolloの2.x以降はlinikとcacheを指定しないといけないようになったらしい。(エラーメッセージを鵜呑みしてるのでよくわかってないが)

というわけで以下のような感じにした。

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.github.com/graphql',
    headers: {
      Authorization: `bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`
    }
  }),
  cache: new InMemoryCache()
})

(ついでにAuthorizationヘッダーも突っ込んだ。環境変数から取ってくるようにした。)

あとは、How to GraphQLでやった感じでコード書いたら動いた。最初の10件だけを取るQueryを書いたので、Read more的なのを実装しようとしたのだが、11件目から20件目までを取ってきてすでにローカルに持っている最初の10件に追加してやる方法がよくわからなくて今日は断念した。

雑談

ZOZOでさっき安くなってた靴を買ったのですが、トップページとかいまだにHTTPなんですね。いまだにそのようなサイト見かけますが、決済とか特定の画面にだけSSL対応させるより全部に適用した方が楽な感じが素人的にはしてしまうのですが何か意図があるんでしょうか?

ハンドシェイクによってかかるサーバー負荷の低減とかそういうことなのだろうか…?とは言えHTTP/2も実質的にはSSLを使用しないと使えないしきになる。