React Native
...
Data objects
N:N Relationship
8 分
多対多の関係 はじめに 多くのバックエンドの中心には、データを保存する能力があります。parseを使用すると、データオブジェクトを保存し、それらの間に関係を確立できます。データ関係は、各データオブジェクトが他のオブジェクトとどのように関連または関連付けられているかを標準化します。これにより、複雑なクエリを構築および実行する際に追加の力を得ることができます。主な関係のタイプは3つあります 一対多 一対多 , 1つのオブジェクトが多くの他のオブジェクトに関連付けられることができる; 一対一 一対一 , 2つのオブジェクトの間に直接的な関係を確立し、それだけである; 多対多 多対多 , 多くのオブジェクト間に多くの複雑な関係を作成することができます。 このガイドでは、多対多の関係に焦点を当てます。これらの関係は、ブログやニュースフィードなどの著作コンテンツを含むアプリケーションで一般的です。なぜなら、著者とカテゴリタグが相互に交換可能であり、迅速なクエリのために最適化されるからです。データストレージバックエンドは通常、これらの関連付けの明示的な宣言を要求し、結合を管理するためのリレーショナルテーブルを自分で作成することを要求します。parseは自動的にこれを行い、データ関係を構築する際のエラーの可能性を排除し、アプリケーションモデリングプロセスを加速します。 parseで多対多の関係を作成する方法は2つあります。最初の方法は、 parse object parse object 関係を使用するもので、作成とクエリの時間が最も速いです。2つ目は配列を使用する方法で、サイズによってはクエリの時間が遅くなる可能性があります。このパフォーマンスの問題のため、今後は関係の例のみを使用します。 このガイドでは、3つの主要なデータ関連を含むreact nativeの書籍登録アプリケーションを実装します。back4appとreact nativeを使用して、多対多のデータ関係を作成し、クエリする方法を学びます。 いつでも、スタイルや完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 javascriptの例リポジトリ typescriptの例リポジトリ 前提条件 このチュートリアルを完了するには、 作成されたreact nativeアプリと back4appに接続された このガイドで提供される画面レイアウトをテスト/使用したい場合は、 react native paper react native paper ライブラリ 目標 リアルなシナリオでparseを使用してreact nativeで多対多のデータベース関係を実行およびデモンストレーションすること。 1 bookクラスの理解 このガイドでは書籍登録アプリケーションの例を使用するため、まずこのデータベースにおけるオブジェクト関係がどのように構成されているかを理解する必要があります。使用する主なオブジェクトクラスは、 book book クラスで、登録の各書籍エントリを保存します。以下は他の4つのオブジェクトクラスです publisher publisher 書籍出版社名、 book book との1対多の関係です。 genre genre 書籍のジャンル、 book book との1対多の関係です。この例では、書籍は1つのジャンルのみを持つことができると考えます; author author 書籍の著者、 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 }; todolist tsx 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 }; 新しい本の bookauthorsobjects bookauthorsobjects が設定されているのを見てください parse object parse object インスタンスに。多対多の関係を作成するには、まず新しい parse object relation parse object relation を作成し、次に関連するオブジェクトを一つずつ追加するか、配列を渡して追加します parse object parse object を使用して parse object relation add parse object relation add メソッド。parseは、リレーションタイプのカラムと、データベースにリレーショナルテーブルを作成します。また、ダッシュボードのフィールドカラムにこの新しいテーブルへの簡単なアクセスのためのリンクも作成します。 ダッシュボードを通じてオブジェクトを管理し、新しいオブジェクトを関係に追加することもできることに注意してください。アプリケーションを開発する際には、このショートカットを覚えておいてください。 3 多対多の関係をクエリする 多対多の関連オブジェクトクエリから結果を取得するには、通常のクエリと比較していくつかの追加ステップが必要です。書籍登録リスト画面のクエリ関数を見てみましょう 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 }; todolist tsx 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 parse object インスタンスを多対多のリレーショナルフィールドから保存せず、関連するクラス名への参照のみを保存します。例えば、 {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} これらのオブジェクトインスタンスからデータを取得して表示するには、リレーションを作成し、再度クエリを実行して、結果を自分のオブジェクト配列に保存する必要があります。その後、オブジェクト配列を反復処理し、 parse object get parse object get メソッドを使用して著者の名前を取得します。以下は、これらの手順を使用したリスト画面の見た目です 結論 このガイドの最後に、react nativeでparseの多対多のリレーションを作成し、クエリする方法を学びました。次のガイドでは、一対一のクエリとリレーションの方法を示します。