React Nativeアプリ用のRelay導入と最適な環境設定

リレー設定 はじめに 前回のガイドでは、スキーマファイルを取得し、それを保存してreact nativeアプリケーションに貼り付ける方法を学びました。このガイドでは、リレーをインストールし、react nativeアプリケーションの開発を開始するための環境を整えます。 目標 リレーを設定するためには、まずreact nativeアプリケーションにリレーをインストールし、その後リレー環境を整える必要があります。 前提条件 以下のトピックについての基本的な理解を推奨します リレー・モダン , babel js , javascript (ecs5およびecs6), graphql js readme ローカル環境で実行されているreact nativeの基本プロジェクト。 react nativeプロジェクトにダウンロードされたschema graphqlファイル。 次のステップでは、react nativeアプリケーションに焦点を当てた基本的なリレーのインストールが見つかります。このトピックを深く掘り下げたい場合は、 公式ドキュメント をご覧ください。 1 react relay公式apiのインストール 公式ライブラリ react relay をインストールすることから始めましょう。このライブラリはrelay core teamの公式apiであり、データフラグメントを構築するためのすべてが含まれています。 このチュートリアルでは、バージョン10 0 0のrelay modernをインストールすることが重要です。バージョン11 0 0以降は、新しいフックのためにreact relayの使用方法が異なります。 2 relay config relay configにはrelay compilerに必要な情報が含まれています。その中で、relay compilerがschema fileを見つける場所、どのフォルダーを検索するべきか、その他の設定を指定します。まず、relay configパッケージをインストールしましょう 注 このチュートリアルではyarnをパッケージクライアントとして使用していますが、npmを使用しても構いません。 次に、relayがスキーマパスを見つけるためのrelay configファイルを作成しましょう。 アプリケーションのルート内に新しいファイルを作成します。 それをrelay config jsと名付けます。 ファイルを開いて、以下の情報で保存してください 3 relay babel プラグイン graphql アーティファクトをランタイムで変換するために、babel プラグインをインストールする必要があります。 さて、babel 設定ファイルの中で、プラグイン配列に relay babel プラグインを追加する必要があります。最終的な babel config js は次のようになります expo プロジェクトでは、presets 配列のすぐ後に babel config js 内にプラグイン配列を追加する同じアプローチに従ってください。最終的な結果は次のようになります 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; relay プラグインは、graphql アーティファクトの正しい変換のために他のプラグインの前に実行される必要があります。詳細については、プラグイン babel ドキュメントを確認してください。 4 relay コンパイラ 最初のドキュメント以来、relay コンパイラについて説明してきました。私たちのアプリケーションがデータフラグメントをコンパイルできるように、今それをインストールします。 package json を開いて、relay コンパイラを実行するための新しいスクリプトコマンドを設定しましょう。 watchman は、relay コンパイラが relay フラグメントの変更を監視する必要があるかどうかを設定する役割を果たします。true の場合、変更のたびに再実行されます。false の場合、yarn relay を単独で実行した後に実行されます。 package json ファイルは次のようになります 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 yarn relayを実行する 最後に、インストール手順が完了したので、アプリケーションのルートでyarn relayコマンドを実行できます データフラグメントを構築しないため、relay compilerは変更されたファイルを返します 素晴らしい、あなたのアプリケーションにはすでにrelayがインストールされ、設定されています。次に、back4appサーバーにリクエストを送信するための環境を実装しましょう。 6 フェッチ環境の準備 relay環境は、ネットワークレイヤーがリクエストをどのように処理し、 relay store がどのように機能するかを定義します。ストアは、変更されたときのみデータを更新し、キャッシュすることによってフロントエンドのデータを制御します。シンプルな環境には、少なくともネットワークレイヤーとストアが必要です。 ネットワーク層 この ネットワーク層 は構築が簡単です。アプリケーションの各リクエストを処理し、クエリ、ミューテーション、およびサブスクリプション（アプリケーションがサポートしている場合）を行います。relayを使用することで、アプリケーションサーバーにアクセスするための呼び出しを準備する方法を知ることができます。 relayストア この ストア はクライアント側でアプリケーションのデータを更新する責任があります。各リクエストにはアップデータ関数を持つことができます。アップデータ関数の中では、ストアインターフェースを使用してデータを更新するためのヘルパー関数のリストを使用できます。 relay環境を準備するために、環境設定ファイルを作成する必要があります。このファイルは、クエリが実行されるたびにクエリレンダラーによって読み取られます。このファイルを準備しましょう。 6 1 環境ファイルを作成する relayライブラリのデザイン原則、すなわちコロケーションの概念に従います。まず、アプリケーションのルートにフォルダーを作成し、名前をrelayとします。その中にファイルを作成し、名前を environment js environment js とします。 6 2 環境を設定する その後、インポートします relay runtime relay runtime 私たちが必要なすべて 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 ネットワーク層の設定 ネットワーク層には、サーバーからデータを取得するための関数が必要です。まず、postリクエストを実行するfetch関数を作成しましょう 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; バックエンドへのリクエストをtry catchでラップします。エラーが発生した場合はスローされ、アプリケーションがそれを処理します。そうでなければ、通常の動作に従い、データを返します。 ネットワーク層では、アプリケーションサーバーの接続も設定します。back4appでは、主に2つのキーを使用します アプリケーションidとクライアントキー。これらのキーは、サーバーのurlとともにヘッダーに記載する必要があります。この情報を取得するには、アプリに移動し、apiコンソール > graphqlメニューをクリックします。 graphqlコンソールを開くと、上部にurlが表示され、下部には必要なアプリケーションキーが表示されます。fetch関数をあなたの情報で置き換えてください。 マスターキーを公開しないようにしてください 6 4 環境をエクスポートする relay runtimeは、ネットワークレイヤーを消費するために必要な関数を提供し、ストアを作成します。最後に、それらを新しい環境に組み合わせて、アプリケーションにエクスポートしましょう。以下のコードを環境ファイルに使用してください。 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; 環境の最終ファイルは次のようになります 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; 結論 素晴らしい。relayとrelay環境がインストールされ、設定されたので、back4app graphql apiを使用し始める時が来ました。次のステップは、最初のクエリレンダラーを作成し、それをサーバーに通信することです。