Back4AppでのRelayクエリレンダラーの使用方法

back4appのクエリレンダラー はじめに 前回の ガイド では、relay環境の準備方法を学びました。これで、react nativeアプリの開発を始める準備が整いました。 このガイドでは、back4appで最初のクエリを作成する方法を学びます。relayクエリレンダラーに深く入り込み、その主な原則を理解し、back4appから最初のデータを取得するために使用します。 目標 relayクエリレンダラーの概要を把握する; relayを使用してreact nativeアプリからback4app graphql apiにクエリを作成する; 前提条件 back4appダッシュボードで作成されたアプリケーション 前のドキュメントで設定されたrelay環境を持つreact nativeアプリケーション。 relayノードとコネクションについて読む クエリレンダラーとは？ reactがコンポーネントのツリーを構築するのと同様に、relayはデータコンポーネントのツリーを構築します。これは、アプリケーションの各コンポーネントがそのフラグメントデータの所有者であることを意味します。フラグメントには、画面にレンダリングするために必要なデータ情報が含まれ、relayはコンポーネントをレンダリングする前にこのデータが利用可能であることを保証します。 この全体的なアプローチを扱う中で、クエリレンダラーはこれらのフラグメントを構成し、バックエンドから取得するためのクエリを準備するために必要なルートコンポーネントです。 なぜクエリレンダラーを理解するのか？ クエリレンダラーの使用を理解することは、アプリケーションをさまざまな方法で抽象化することが重要です。良いコードの抽象化は、作業時間、エラー、デバッグ時間などを防ぐことができます。 レンダラーがback4app apiとどのように連携するか 前回のチュートリアルでは、back4app接続情報を指定するrelay環境ファイルを準備しました。この設定を使用して、relayはback4app apiとの通信を管理します。接続について心配する必要はありません。データコンポーネントの構築に集中してください。 1 back4appダッシュボードでクラスを作成する back4app graphqlコンソールを使用して、最初のクラスを作成し、いくつかのオブジェクトでそれを埋めましょう。personクラスには、文字列のnameフィールドと整数のsalaryフィールドがあります。ダッシュボード >コア >graphqlコンソールに移動し、以下のコードを使用してください 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } 結果は以下に表示されます クラスを作成する では、このクラスの中にいくつかのオブジェクトを作成しましょう。オブジェクト作成ミューテーションの ガイド https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic を見て、このケースをどのように処理するかを確認してください。back4appで利用可能な最新のgraphql api表記を使用するために、最新のparse serverバージョンを使用していることを確認してください。 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } オブジェクトを作成する さて、personクラスが作成され、名前と給与のフィールドがあります。 新しいクラスを作成した後、back4appはバックエンドを安全に使用するために必要なすべてのリソースを自動的に生成します。 一例はオブジェクトのリストです。back4appはすでにperson peopleのリストをクエリするために必要な接続を作成しました。 より良く理解するために、プレイグラウンドに行き、リフレッシュしてドキュメントタブを開き、peopleを探してください。back4appは接続フィールドを生成しました。また、クラスpersonをリストとしてクエリすることもできます。query peopleフィールドはpersonconnectionであることに注意してください。 relayは接続フィールドを消費して、personのオブジェクトのリストをレンダリングします。 personフィールドのドキュメント そしてpeople（person）接続フィールドのドキュメント 2 スキーマの更新 新しいクラスがアプリケーションに追加される場合、react nativeアプリケーションのルート内でスキーマを更新する必要があることを覚えておくことが重要です。 必要に応じて、 スキーマをダウンロード のドキュメントに行き、スキーマを更新する手順を繰り返してください。 3 フラグメントコンテナの最初の例 チュートリアルを続ける前に、フラグメントコンテナを紹介します。 person情報の所有者となるコンポーネントを作成しましょう。このコンポーネントには、人物の名前と給与が含まれます。ここでは、任意の人物フィールドを要求してコンポーネントを構築できます。今、これらの2つのフィールドで進めます。 ファイルを作成し、名前を personcard js personcard js その中に、シンプルな関数コンポーネントを作成しましょう。 1 import react from 'react'; 2&#x9; 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; 以下のコードでexport defaultの行を置き換えてください 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); 上記のコードは、id、name、salaryのみを要求するpersonのフラグメントを作成します。 以下のコードでコンポーネントの残りの部分を更新してください 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; 最終結果は次のようになります 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4&#x9; 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13&#x9; 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 クエリレンダラーの作成 次のステップは、オブジェクトリストのためのクエリレンダラーを作成することです。クエリレンダラーは、データコンポーネントを取得し、バックエンドからデータを取得するために準備するためのルートコンポーネントです。back4appでpersonクラスのデータを取得する方法を学びます。 4 1 ファイルの作成 新しいファイルを作成し、名前を personrenderer js personrenderer js にします。 以下のコードをコピーして、personrendererファイルに貼り付けます。 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26&#x9; 27 export default personrenderer; 4 2 queryrendererのプロパティを理解する まず、プロパティが空のquery rendererを始めましょう：graphql、variables、render。ステップバイステップで、各プロパティを段階的に実装していきます。 まず最初に、アプリケーションはquery rendererのためのクエリを通知する必要があります。ここでは、私たちのアプリケーションがpeopleのリストを消費します。クエリプロパティに、以下のコードを貼り付けてください 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` graphqlはreact relayから来ており、クエリを文字列として実装します。 edgesとnodeの接続を理解することが重要です。上記のクエリは、back4appサーバーから人々のnode接続を消費しています。新しいクラスを作成するたびに、node接続が続きます。 変数 必要に応じて、クエリレンダラーは変数を消費します。良い例としては、アプリケーションがidで人をリクエストする場合です。今はその場合ではないので、変数プロパティにはnullを渡しましょう。 person cardをポピュレートする このクエリは人々のリストを返します。クエリレンダラーは、データがレンダリング可能であることを保証します。そうでない場合は、エラーを発生させます。これに責任を持つプロパティはrenderです。 以下のコードでrenderプロパティをポピュレートしてください 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} リストの各結果に対してperson cardをレンダリングするためのjavascriptのmapにコメントされたtodoを置き換えてください。 言った通り、クエリレンダラーはデータが準備できたときのみ利用可能にする責任を負います。それまでは、ローディングメッセージが表示されます。エラーが発生した場合は、予期しないアプリケーションクラッシュを防ぐために画面に表示されます。 最後に、 mapを新しい関数に置き換えて、人物のレンダリングを改善しましょう。それをquery rendererの前に置いてください 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; そして、最終結果は次のようになります 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6&#x9; 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11&#x9; 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46&#x9; 47 export default personrenderer; 5 最初のクエリを作成する 今、personrendererを使用してpersonを取得する時が来ました。すべてが正常であれば、あなたのアプリケーションには今、2つの新しいコンポーネントがあります personrendererとpersoncard アプリケーションを開始する前に、relayはrelay compilerを実行してコンポーネントタイプを生成する必要があります。そのためには、ターミナルで次のコマンドを実行してください app jsに次のコードを追加します 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3&#x9; 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6&#x9; 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28&#x9; 29 export default app; app jsのコードは元々create react native appから来ています。これは、画面の内容を中央に配置するためにスタイルを持つviewを追加し、上から10pxのマージンを設定しました。その中には、印刷のコンテキストを提供するためのラベル付きのテキストと、人物のリストを表示するためのpersonrendererがあります。 次の結果を得る必要があります レンダリング 私たちのback4app react nativeアプリケーションでは、personrendererを直接インポートします。 app js app js として、personrendererはルートコンポーネントであり、そのqueryrendererを持っているため、personはエラーなしに表示される必要があります 6 コンポーネントの型付け このステップは、typescriptを使用するアプリケーションにとって意味があります。アプリケーションがtypescriptを使用していない場合は、進んでください。 relayコンパイラの力の一つは、各データコンポーネントから型を生成することです。アプリケーションをより強力にするために、personrendererとpersoncardに型を付けましょう。 personrendererの型付け renderperson関数の引数を people people としてpersonrendererに型付けします 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; 次に、 personrendererquery personrendererquery 型を generated generated フォルダーからインポートします。これはpersonrendererと同じフォルダー内に作成されます。 personcardの型付け personcardに進み、新しい型オブジェクトを作成し、personcardpropsと名付けます 1 type personcardprops = {}; 次に、 personcard person personcard person 型を generated generated フォルダーからインポートします 1 import {personcard person} from ' / generated /personcard person graphql'; personcardpropsの型内に人を追加します 1 type personcardprops = { 2 person personcard person; 3 }; personcardからのprops引数で、コンポーネントを次のように型付けします personcardprops personcardprops 両方のコンポーネントの最終結果は次のようになります personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7&#x9; 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12&#x9; 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47&#x9; 48 export default personrenderer; personcard 1 import react from 'react'; 2&#x9; 3 import {createfragmentcontainer, graphql} from 'react relay'; 4&#x9; 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7&#x9; 8 type personcardprops = { 9 person personcard person; 10 }; 11&#x9; 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); 結論 queryrendererの最終結果は、アプリケーションがどのように抽象化できるかを示しました。アプリケーションは、query renderer内にpersonを表示できます。personcardがより多くのコンポーネントを持っているため、query rendererの構築方法は変わりません。 personrendererは、クエリを簡単なステップで実行できる方法を示すために構築され、back4appサーバーの力と組み合わされています。次のガイドでは、特定のpersonオブジェクトを取得し、その属性を表示する方法を学びます。