この記事はReact Native Advent Calendar 2016の5日目の記事です。
表題のとおりなのですが、 Facebook が開発している React Native と、同じく Facebook が開発している GraphQL 、 Relay を合わせて使ってみるという記事です。
具体的には、 Relay の公式ページにある A simple list という例を、 React Native を使って実装してみましょう。
GraphQL 、 Relay のそれぞれに関しては詳しく触れません。
また、本文中で利用しているコードは、Relay 公式サイトから引用、修正をしており、 Relay のライセンスはBSDライセンスです。
流れ
やることとしては、
① Relay の公式ページにある例を動かす。
②それを React Native で書き換える。
という流れです。
Relay の公式ページでは Relay Starter Kit を使ってアプリケーションサーバ(フロント)、 GraphQL サーバ（バックエンド）の2つをlocalで立ち上げ、フロントのサーバから Relay を使って バックエンドサーバにアクセスしています。
準備
GraphQL 側
Relay の公式チュートリアルに従って、以下のコマンドを流します。
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 の公式ページに従って、以下のコマンドを流します。
また、 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.jsreact-native-relay-test/data/schema.js
Relay 側
react-native-relay-test/js/app.jsreact-native-relay-test/js/components/App.jsreact-native-relay-test/js/routes/AppHomeRoute.js
の5ファイルです。
以下のURLで修正例を公開しています。
https://github.com/kohei-takata/relay-starter-kit
コードの修正が終わったら、以下のコマンドで shema.graphql ファイルを生成、schema.json ファイルを更新し、フロント、バックエンド両方のサーバを立ち上げましょう。
npm run update-schema
npm start
http://localhost:3000/ にアクセスすると Relay の公式ページにあるような画面が表示され、
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
書き換えが終わったら
react-native run-ios
コマンドで実行しましょう。
先程ブラウザで見たような画面が表示されれば成功です。
今回の記事では動かすだけになってしまいましたが、
GraphQL サーバのほうでデータをべた書きでなく、実際にRDBなどと接続してみたり、
取得するデータを色々変えてみて（GraphiQL で確認しながら）、修正に強いと言われる GraphQL を試したり、
データを取得するだけでなく変更してみたりとここからいろいろ遊べると思うので、ぜひやってみてください。
React Native もまだまだ進化の途中ですので、来年も動向を見守りつつ、いろいろと触って遊んでみたいと思っています。