React NativeとGraphQL、Relayを合わせて使ってみる

この記事は[React Native Advent Calendar 2016](http://qiita.com/advent-calendar/2016/react-native)の5日目の記事です。

表題のとおりなのですが、 Facebook が開発している React Native と、同じく Facebook が開発している GraphQL 、 Relay を合わせて使ってみるという記事です。
具体的には、 Relay の公式ページにある A simple list という例を、 React Native を使って実装してみましょう。
GraphQL 、 Relay のそれぞれに関しては詳しく触れません。
また、本文中で利用しているコードは、[Relay 公式サイト](https://facebook.github.io/relay/)から引用、修正をしており、 Relay のライセンスは[BSDライセンス](https://github.com/facebook/relay/blob/master/LICENSE)です。

# 流れ
やることとしては、
① Relay の公式ページにある例を動かす。
②それを React Native で書き換える。
という流れです。

Relay の公式ページでは [Relay Starter Kit](https://github.com/relayjs/relay-starter-kit) を使ってアプリケーションサーバ(フロント)、 GraphQL サーバ（バックエンド）の2つをlocalで立ち上げ、フロントのサーバから Relay を使って バックエンドサーバにアクセスしています。

# 準備
## GraphQL 側
[Relay の公式チュートリアル](https://facebook.github.io/relay/docs/tutorial.html#content)に従って、以下のコマンドを流します。

```
git clone https://github.com/relayjs/relay-starter-kit.git react-native-relay-test
cd react-native-relay-test
npm install
```

## React Native 側
[React Native の公式ページ](https://facebook.github.io/react-native/docs/getting-started.html)に従って、以下のコマンドを流します。
また、 Relay のアプリケーションを作成するのに必要なモジュールをインストールしておきます。

```
brew install watchman
npm install -g react-native-cli
react-native init ReactNativeRelayProject
cd ReactNativeRelayProject
react-native run-ios

npm install react-relay --save
npm install babel-core --save-dev
npm install babel-preset-react-native --save-dev
npm install babel-relay-plugin --save-dev
npm install graphql --save-dev
npm install sync-request --save-dev
```

# ① Relay の公式ページにある例を動かす。
react-native-relay-test を A simple list の例に書き変えます。
書き換えるファイルは、

## GraphQL 側
- `react-native-relay-test/data/database.js`
- `react-native-relay-test/data/schema.js`

## Relay 側
- `react-native-relay-test/js/app.js`
- `react-native-relay-test/js/components/App.js`
- `react-native-relay-test/js/routes/AppHomeRoute.js`

の5ファイルです。
以下のURLで修正例を公開しています。
[https://github.com/kohei-takata/relay-starter-kit](https://github.com/kohei-takata/relay-starter-kit)

コードの修正が終わったら、以下のコマンドで `shema.graphql` ファイルを生成、`schema.json` ファイルを更新し、フロント、バックエンド両方のサーバを立ち上げましょう。

```
npm run update-schema
npm start
```

[`http://localhost:3000/`](http://localhost:3000/) にアクセスすると Relay の公式ページにあるような画面が表示され、
[`http://localhost:8080/`](http://localhost:8080/) にアクセスすると GraphiQLの画面が表示されたと思います。

GraphQL をもっと触ってみたいとか、理解したいという方はここで GraphiQL の画面でクエリをいろいろ作って遊んでみるといいかと思います。
予測変換でクエリがガンガン作れていくので楽しいかと思います。
また、 GraphQL の特徴の1つである、リクエストとレスポンスの形式が同じであることがわかりやすいかと思います。

# ②React Native で書き換える。
では次に上で作ったフロントのサーバを React Native に移植しましょう。
上の場合はフロントとバックエンドのサーバが同じ `localhost` の上に立っていたので、あまりサーバへのアクセスの部分が感じられなかったと思うのですが、
React Native を使ってそこも意識してみましょう。

書き換えるファイルは、
- `ReactNativeRelayProject/index.ios.js`
- `ReactNativeRelayProject/.babelrc`
です。
また、新規に
- `ReactNativeRelayProject/babelRelayPlugin.js`
を作成します。

以下のURLで修正例を公開しています。
[https://github.com/kohei-takata/ReactNativeRelayProject](https://github.com/kohei-takata/ReactNativeRelayProject)

書き換えが終わったら
`react-native run-ios`
コマンドで実行しましょう。

先程ブラウザで見たような画面が表示されれば成功です。
![スクリーンショット 2016-12-11 21.38.54.png](https://qiita-image-store.s3.amazonaws.com/0/45771/e0056582-648f-12b1-99a1-00ccf7cb0cf8.png)


今回の記事では動かすだけになってしまいましたが、
GraphQL サーバのほうでデータをべた書きでなく、実際にRDBなどと接続してみたり、
取得するデータを色々変えてみて（GraphiQL で確認しながら）、修正に強いと言われる GraphQL を試したり、
データを取得するだけでなく変更してみたりとここからいろいろ遊べると思うので、ぜひやってみてください。

React Native もまだまだ進化の途中ですので、来年も動向を見守りつつ、いろいろと触って遊んでみたいと思っています。