React Native
...
Data objects
1:N Relationship
9 分
一対多の関係 はじめに 多くのバックエンドの中心には、データを保存する能力があります。parseを使用すると、データオブジェクトを保存し、それらの間に関係を確立できます。データ関係は、各データオブジェクトが他のオブジェクトとどのように関連または関連付けられているかを標準化します。これにより、複雑なクエリを構築および実行する際に追加の力を得ることができます。主な関係のタイプは3つあります 一対多 一対多 , 1つのオブジェクトが多くの他のオブジェクトに関連付けられる場合; 一対一 一対一 , 2つのオブジェクト間に直接的な関係を確立し、それだけを対象とする場合; 多対多 多対多 , 多くのオブジェクト間に多くの複雑な関係を作成することができます。 このガイドでは、最も一般的な関係である一対多に焦点を当てます。データストレージバックエンドは通常、これらの関連付けの明示的な宣言を要求し、さらにはそれらの結合を管理するためのリレーショナルテーブルを自分で作成することを要求します。parseはこれを自動的に行い、データ関係を構築する際のエラーの可能性を排除し、アプリケーションモデリングプロセスを加速します。 parseで一対多の関係を作成する方法は2つあります。最初は、 parse object parse object ポインタを使用する方法で、作成とクエリの時間が最も速いです。2つ目は、 配列 配列 を使用する方法で、サイズによってはクエリの時間が遅くなる可能性があります。このパフォーマンスの問題のため、今後はポインタの例のみを使用します。 このガイドでは、3つの主要なデータ関連を含むreact nativeの書籍登録アプリケーションを実装します。back4appとreact nativeを使用して、一対多のデータ関係を作成し、クエリする方法を学びます。 いつでも、スタイルや完全なコードを確認するために、githubリポジトリを通じてこのプロジェクトにアクセスできます。 javascriptの例リポジトリ typescriptの例リポジトリ 前提条件 このチュートリアルを完了するには、次のものが必要です: 作成され、 back4app に接続されたreact nativeアプリ このガイドで提供されている画面レイアウトをテスト/使用したい場合は、 react native paper react native paper を設定する必要があります。 ライブラリ 目標 parseの1対多の関係を使用して、書店のreact nativeアプリをモデル化します。 1 本クラスの理解 このガイドでは本の登録アプリケーションの例を使用するため、まずこのデータベースにおけるオブジェクト関係がどのように構成されているかを理解する必要があります。使用する主なオブジェクトクラスは、登録内の各本のエントリを保存する book book クラスです。また、これが他の4つのオブジェクトクラスです 出版社 出版社 本の出版社名、 book book との一対多の関係です。 ジャンル ジャンル 本のジャンル、 book book との一対多の関係です。この例では、本は1つのジャンルしか持てないと考えます; 著者 著者 本の著者、 book book , との多対多の関係です。なぜなら、本は複数の著者を持つことができ、著者も複数の本を持つことができるからです; isdb isdb 本のisdb識別番号、 book book , との一対一の関係です。この番号は各本に対してユニークです。 これがこれらのデータベーステーブルの視覚的表現です 簡単のために、各オブジェクトクラスが文字列型の 名前 名前 属性( タイトル タイトル )を持つと仮定します。 本 本 に関して、追加のリレーショナル属性は除きます。 2 一対多の関係を作成する このステップに入る前に、react native libraryアプリの例をクローンして実行することをお勧めします( javascript例リポジトリ , typescript例リポジトリ )。このアプリケーションには、登録された本をリストするための画面と、新しい本を作成するための画面の2つの主要な画面があります。本の登録フォームには、他の関連オブジェクトへの直接リンクがあり、ユーザーが出版社やジャンルのオプションを選択すると、フォームフィールドには完全な parse object parse object インスタンスが保持されます。 このフォームを送信するときに呼び出される書籍作成メソッドを見てみましょう javascript 1 const createbook = async function () { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue = booktitle; 7 const bookisbdvalue = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject = bookpublisher; 13 const bookgenreobject = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects = bookauthors; 17	 18 // creates a new parse object instance 19 let book = new parse object('book'); 20	 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24	 25 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 26 let isbdquery = new parse query('isbd'); 27 isbdquery equalto('name', bookisbdvalue); 28 let isbdqueryresult = await isbdquery first(); 29 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 30 // if first returns a valid object instance, it means that there 31 // is at least one instance of isbd with the informed value 32 alert alert( 33 'error!', 34 'there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45	 46 // one to many relations can be set in two ways 47 // add direct object to field (parse will convert to pointer on save) 48 book set('publisher', bookpublisherobject); 49 // or add pointer to field 50 book set('genre', bookgenreobject topointer()); 51	 52 // many to many relation 53 // create a new relation so data can be added 54 let authorsrelation = book relation('authors'); 55 // bookauthorsobjects is an array of parse objects, 56 // you can add to relation by adding the whole array or object by object 57 authorsrelation add(bookauthorsobjects); 58	 59 // after setting the values, save it on the server 60 try { 61 await book save(); 62 // success 63 alert alert('success!'); 64 navigation goback(); 65 return true; 66 } catch (error) { 67 // error can be caused by lack of internet connection 68 alert alert('error!', error message); 69 return false; 70 } 71 } catch (error) { 72 // error can be caused by lack of value selection 73 alert alert( 74 'error!', 75 'make sure to select valid choices in publisher, genre and author fields!', 76 ); 77 return false; 78 } 79 };1 const createbook = async function () promise\<boolean> { 2 try { 3 // these values come from state variables linked to 4 // the screen form fields, retrieving the user choices 5 // as a complete parse object, when applicable; 6 const booktitlevalue string = booktitle; 7 const bookisbdvalue string = bookisbd; 8 // for example, bookpublisher holds the value from 9 // radiobutton group field with its options being every 10 // publisher parse object instance saved on server, which is 11 // queried on screen load via useeffect 12 const bookpublisherobject parse object = bookpublisher; 13 const bookgenreobject parse object = bookgenre; 14 // bookauthors can be an array of parse objects, since the book 15 // may have more than one author 16 const bookauthorsobjects \[parse object] = bookauthors; 17	 18 // creates a new parse object instance 19 let book parse object = new parse object('book'); 20	 21 // set data to parse object 22 // simple title field 23 book set('title', booktitlevalue); 24	 25 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 26 let isbdquery parse query = new parse query('isbd'); 27 isbdquery equalto('name', bookisbdvalue); 28 let isbdqueryresult parse object = await isbdquery first(); 29 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 30 // if first returns a valid object instance, it means that there 31 // is at least one instance of isbd with the informed value 32 alert alert( 33 'error!', 34 'there is already an isbd instance with this value!', 35 ); 36 return false; 37 } else { 38 // create a new isbd object instance to create a one to one relation on saving 39 let isbd parse object = new parse object('isbd'); 40 isbd set('name', bookisbdvalue); 41 isbd = await isbd save(); 42 // set the new object to the new book object isbd field 43 book set('isbd', isbd); 44 } 45	 46 // one to many relations can be set in two ways 47 // add direct object to field (parse will convert to pointer on save) 48 book set('publisher', bookpublisherobject); 49 // or add pointer to field 50 book set('genre', bookgenreobject topointer()); 51	 52 // many to many relation 53 // create a new relation so data can be added 54 let authorsrelation = book relation('authors'); 55 // bookauthorsobjects is an array of parse objects, 56 // you can add to relation by adding the whole array or object by object 57 authorsrelation add(bookauthorsobjects); 58	 59 // after setting the values, save it on the server 60 try { 61 await book save(); 62 // success 63 alert alert('success!'); 64 navigation goback(); 65 return true; 66 } catch (error) { 67 // error can be caused by lack of internet connection 68 alert alert('error!', error message); 69 return false; 70 } 71 } catch (error) { 72 // error can be caused by lack of value selection 73 alert alert( 74 'error!', 75 'make sure to select valid choices in publisher, genre and author fields!', 76 ); 77 return false; 78 } 79 }; 見てください、 bookpublisherobject bookpublisherobject と bookgenreobject bookgenreobject が新しい本の parse object parse object インスタンスに設定されています。parseで一対多の関係を作成するのがどれほど簡単か見てください:ターゲットオブジェクトインスタンスを割り当てるか、 parse object set parse object set メソッドを使用してポインタを使用することができます。このメソッドは2つの引数を取ります:フィールド名と設定する値です。parseはポインタデータ型の列を作成し、ダッシュボード上で迅速にアクセスできる直接リンクを作成します。 ダッシュボードでオブジェクトポインタの値をクリックすると、参照されたオブジェクトエントリに移動します。一見無害な機能のように思えますが、手動で検索するよりもデバッグやエラー追跡がはるかに迅速になります。 3 一対多の関係をクエリする 1対多の関連オブジェクトをクエリするのは非常に簡単で、ほとんどがparseによって処理されます。本の登録リスト画面のクエリ関数を見てみましょう javascript 1 const querybooks = async function () { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue = querypublisher; 8 const querygenrevalue = querygenre; 9 const queryauthorvalue = queryauthor; 10 const queryisbdvalue = queryisbd; 11	 12 // reading parse objects is done by using parse query 13 const parsequery = new parse query('book'); 14	 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22	 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27	 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33	 34 try { 35 let books = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert alert('error!', error message); 49 return false; 50 } 51 };1 const querybooks = async function () promise\<boolean> { 2 // these values come from state variables linked to 3 // the screen query radiobutton group fields, with its options being every 4 // parse object instance saved on server from the referred class, which is 5 // queried on screen load via useeffect; these variables retrievie the user choices 6 // as a complete parse object; 7 const querypublishervalue parse object = querypublisher; 8 const querygenrevalue parse object = querygenre; 9 const queryauthorvalue parse object = queryauthor; 10 const queryisbdvalue parse object = queryisbd; 11	 12 // reading parse objects is done by using parse query 13 const parsequery parse query = new parse query('book'); 14	 15 // one to many queries 16 if (querypublishervalue !== '') { 17 parsequery equalto('publisher', querypublishervalue); 18 } 19 if (querygenrevalue !== '') { 20 parsequery equalto('genre', querygenrevalue); 21 } 22	 23 // one to one query 24 if (queryisbdvalue !== '') { 25 parsequery equalto('isbd', queryisbdvalue); 26 } 27	 28 // many to many query 29 // in this case, we need to retrieve books related to the chosen author 30 if (queryauthorvalue !== '') { 31 parsequery equalto('authors', queryauthorvalue); 32 } 33	 34 try { 35 let books \[parse object] = await parsequery find(); 36 // many to many objects retrieval 37 // in this example we need to get every related author parse object 38 // and add it to our query result objects 39 for (let book of books) { 40 // this query is done by creating a relation and querying it 41 let bookauthorsrelation = book relation('authors'); 42 book authorsobjects = await bookauthorsrelation query() find(); 43 } 44 setqueriedbooks(books); 45 return true; 46 } catch (error) { 47 // error can be caused by lack of internet connection 48 alert alert('error!', error message); 49 return false; 50 } 51 }; この場合、特定の出版社やジャンルに関連する書籍をクエリするには、 parse query equalto parse query equalto メソッドを使用して、 parse object parse object インスタンスをパラメータとして渡すだけです。クエリの後、parseは結果のオブジェクト内に、任意の一対多のリレーショナルフィールドの完全なインスタンスを保存します。これらのオブジェクトインスタンスからデータを取得して表示するには、次のように parse object get parse object get メソッドをチェーンします bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') ここでは、これらのゲッターを使用してリスト項目から出版社とジャンルの名前を取得するリスト画面の見た目を示します 結論 このガイドの最後に、react nativeでparseの一対多のリレーションを作成し、クエリする方法を学びました。次のガイドでは、多対多および一対一のクエリとリレーションの方法を示します。