ReactとApolloを使ってGithub GraphQL APIを試してみる

Livesenseその2 Advent Calendar 2016 - Qiita の24日目の記事です。書いてる今は既に25日ですが(；・∀・)

ApolloというGraphQLクライアントライブラリを使ってGraphQL APIを利用するためのサンプルコードを解説します。

というのも、Apolloにもサンプルコードがあるのですが、自分でサーバー立てたりする必要もあり、中々面倒でした。ですので、手軽にGithubのGraphQL APIを使うことで、雰囲気を掴めるかと思います。

GraphQLとは？

GraphQL入門 - 使いたくなるGraphQL - Qiita にこの辺は書いてありますので、ご参照ください。

ソースコード

動かし方はInstallationに書いてあるとおりなのですが、前提として、前述のGithubのEarly Access Programにサインアップしておき、Creating an access token guideに従ってアクセストークンを取得しておく必要があります。このアクセストークンをconfig.secret.jsに仕込んでください。

本コードはサンプルなので直接Githubのアクセストークンをクライントコードに含むような作りにしていますので、これ自体をWEBにアップしたり、プロダクションで同様の書き方をするのはしないようにしてください。

Apolloについて

ApolloはGraphQLのクライアントライブラリで今回はApolloが提供するJavaScript用のapollo-clientを利用しています(JavaScript以外にもSwiftやAndroid用のクライアントもあります)。また、サンプルではReactを使っていますが、react用のバインディングも提供されており、ReactのComponentとGraphQLをシームレスに繋ぐことができます。

GraphQLのReact用クライアントとしてはRelayというfacebookが開発しているクライアントライブラリもあるのですが、RelayはQueryの形式が標準的なGraphQLのそれと異なっているので、こちらをApolloを使うことにしました。

サンプルコードの解説

GraphQLクエリ

GraphQLのクエリが以下の部分です。

import gql from 'graphql-tag'
 :
const RepositorySearchQuery = gql`
  query Search($q: String!) {
    search(query: $q, first: 10, type: REPOSITORY) {
      edges {
        node {
          ... on Repository {
            id,
            name,
            url
          }
        }
      }
    }
  }
`

gqlはGraphQLクエリを表現するためのapolloが提供するライブラリの関数で、クエリ本体はquer Search($q: String!) {...}の部分になります。上の記述、イメージとしてはSQL自体を直接書いているのと同じことです。この部分はGraphQLのGUIクライアントに直接食わせることもできるので、実際にやってみると以下のような結果になります。

APIへの接続用のclient

import ApolloClient, { createNetworkInterface } from 'apollo-client'
  :
const networkInterface = createNetworkInterface({ uri: 'https://api.github.com/graphql' }) // (1)
networkInterface.use([{ // (2)
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {
    }
    req.options.headers.authorization = `bearer ${githubToken}`
    next()
  }
}])
const client = new ApolloClient({ // (1)
  networkInterface: networkInterface,
})

APIへの接続クライアントは上記のように作成します。

createNetworkInterfaceというヘルパー関数でNetworkInterfaceオブジェクトを生成し、それをclientに渡します(1)。

createNetworkIntefaceは、デフォルトで同一ドメインの/graphqlにアクセスするNetworkIntefaceを生成するので、今回のように別ドメインのAPIに接続する場合や、GraphQLのパスが/graphql以外の場合は、uriオプションを指定する必要があります。

また、Github APIのようにHTTPリクエストにAuthorizationヘッダーが必要な場合は、NetworkInterfaceのuseメソッドを通じて、HTTPリクエストヘッダにAuthorizationヘッダを追加するためのミドルウェアを追加します(2)。（expressのように、NetworkIntefaceはuseメソッドを使って、HTTPリクエストをフックするためのミドルウェアを重ねることができます）

React ComponentとGraphQLを連携させる

import { ApolloProvider, graphql } from 'react-apollo'
  :
class Repositories extends Component { // (3)
  render() {
    let repos = []
    let h1Text = `Searching For ${this.props.query} ...`

    if (this.props.data && this.props.data.search) {  // (5)
      h1Text = `Repositories about ${this.props.query} are`
      repos = this.props.data.search.edges.map(edge => ({
        key: edge.node.id,
        name: edge.node.name,
        url: edge.node.url
      }))
    }

    return (
      <div>
        <h1>{h1Text}</h1>
        <ul>
          {repos.map(repo => <Repository key={repo.key} name={repo.name} url={repo.url} />)}
        </ul>
      </div>
    )    
  }
}

class App extends Component {
  :
  :
  handleFormSubmit(evnt) {
    evnt.preventDefault()

    const RepositoriesWithQuery = graphql(RepositorySearchQuery, {  // (4)
      options: {variables: { q: this.state.q }}
    })(Repositories)

    this.setState({
      repositories: <RepositoriesWithQuery query={this.state.q} />
    })

  }
  :
  render() {
    return (
      <div>
        <SearchForm onSubmit={evnt => this.handleFormSubmit(evnt)} onChange={evnt => this.handleTextChange(evnt)} />
        <ApolloProvider client={client}> // (6)
          {this.state.repositories}
        </ApolloProvider>
      </div>
    )
  }
}

(3)のRepositoriesが今回GraphQLと紐付けるReact Componentです。

これを(4)のようにgraphql関数（react-apolloが提供するヘルパー関数）を通じて、GraphQLクエリーと結びつけます。具体的には、graphql関数が返す結果もReactコンポーネントとなっており、このComponetには、GraphQLによってAPIから取得したデータがpropsを通じて伝搬されるようになります¹。(5)にあるように、props.dataを通じてGraphQLの結果が渡されることになります。props.data以下にはGraphQL APIから返されるJSONの構造がそのまま入っていますので²、GUIクライアントのキャプチャしたものと同じ構造で欲しいデータにアクセスすることができます。また、GraphQLの取得は非同期に行われるため、コンポーネントの初回レンダリングタイミングとずれるので、上記のようにdataの有無によって条件分岐しています（もうすこしうまい書き方あるかと思いますが、サンプルコードなのでまぁ）。

最後に(6)。ライブラリ利用者から見ればおまじないのようなもので、GraphQLと結びつけるコンポーネントはApolloProviderというreact-apolloが提供するコンポーネントの下に配置する必要があります。（そうしないと正しく結果を取得してくれない）

多分こんな感じで動くようになる、、、はずです。

最後に

あまり日本語ではGraphQL関連の記事は多くないので、あまり盛り上がっていないとは思うのですが、本内容等について誤りやおかしな解釈があればご指摘いただければ幸いです。GraphQLが日本でももう少し普及するように今後も記事を書いていきたいと思う年末となりました。

1. FunctionalComponentは結びつけることができませんでした。 ↩

2. 実際には、GraphQLの結果JSONの情報プラス幾つかのメタデータや関数もprops.dataに含まれます。また、このprops.dataの構造を変更するためのオプションをgraphql関数に渡すことができます。詳しくはApolloのドキュメントをご参照ください。 ↩