ReactでのParseデータオブジェクト関係の設定とクエリ方法

関係性 イントロダクション parseを使用すると、データオブジェクト間の関係を確立して保存できます。この動作をモデル化するために、任意の parseobject parseobject を他の parseobject parseobject の値として使用できます。内部的に、parseフレームワークは、一貫性を維持するために参照されたオブジェクトを一箇所に保存します。これにより、複雑なクエリを構築および実行する際に追加の力を得ることができます。主な関係のタイプは3つあります 一対多 一対多 , 1つのオブジェクトが多くの他のオブジェクトに関連付けられる場合; 多対多 多対多 , 多くのオブジェクト間に多くの複雑な関係を作成できます。 一対一 一対一 , 2つのオブジェクト間に直接的な関係を確立し、それだけの場合; parseでの 一対多 一対多 関係を作成する方法は2つあります （推奨）最初は、子クラスでの parse pointers parse pointers を使用することで、作成とクエリの時間が最も速くなります。このガイドではこれを使用します。 2つ目は、親クラスでの 配列 配列 を使用することで、サイズによってはクエリ時間が遅くなる可能性があります。このパフォーマンスの問題のため、ポインタの例のみを使用します。 parseでの 多対多 多対多 関係を作成する方法は3つあります。 （推奨）最初は、 parse relations parse relations を使用します。これは、作成とクエリの時間が最も速いです。このガイドではこれを使用します。 2つ目は、 配列 配列 を使用することで、 parse pointers parse pointers のサイズによっては、クエリの時間が遅くなる可能性があります。 3つ目は、 jointable jointable を使用することで、古典的なデータベースのアイデアから来ています。多対多の関係がある場合、すべての objectid objectid または pointer pointer を両側から組み合わせて、新しい別のテーブルを作成し、その中で関係を追跡します。 このガイドでは、3つの主要なデータ関連を含むreactの書籍登録アプリケーションを実装します。back4appとreactを使用してデータ関係を作成し、クエリする方法を学びます。 いつでも、スタイルや完全なコードを確認するために、githubリポジトリを通じてこのプロジェクトにアクセスできます。 javascriptの例リポジトリ typescriptの例リポジトリ 前提条件 このチュートリアルを完了するには、以下が必要です： 作成されたreactアプリと back4appに接続された このガイドのサンプルプロジェクトを実行したい場合は、 ant design ant design ライブラリを設定する必要があります。 目標 リアルなシナリオでparseを使用してreactでデータベースの関係を実行し、デモンストレーションするためのものです。 1 bookクラスの理解 このガイドでは、書籍登録アプリケーションの例を使用するため、まずこのデータベースにおけるオブジェクト関係がどのように配置されているかを理解する必要があります。使用する主なオブジェクトクラスは、登録内の各書籍エントリを保存する book book クラスです。これが他の4つのオブジェクトクラスです 出版社 出版社 書籍の出版社名、 book book との1対多の関係; ジャンル ジャンル 書籍のジャンル、 book book との1対多の関係。なお、この例では書籍は1つのジャンルしか持てないと考えます; 著者 著者 書籍の著者、 book book との多対多の関係、書籍は複数の著者を持つことができ、著者も複数の書籍を持つことができます; isdb isdb 書籍のisdb識別番号、 book book との1対1の関係、この番号は各書籍に対してユニークです。 これらのデータベーステーブルの視覚的表現は次のとおりです 簡単のために、各オブジェクトクラスが文字列型の 名前 名前 属性（ タイトル タイトル のための 本 本 ）、追加のリレーショナル属性を除いて仮定します。 ステップ 2 リレーションの作成 このステップに進む前に、react アプリの例をクローンして実行することをお勧めします（ javascript 例リポジトリ , typescript 例リポジトリ )。このアプリケーションには、登録された本をリストするための画面と、新しい本を作成するための画面の2つの主要な画面があります。本の登録フォームには、他の関連オブジェクトへの直接リンクと、本の isbd 値に割り当てられたテキスト入力フィールドがあり、これは一対一のリレーションを作成するために使用されます。 このフォームを送信するときに呼び出される書籍作成方法を見てみましょう 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 // radiogroup 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 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! 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 (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; typescript 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 // one to one (1 1) 26 // 1 1 relation, need to check for uniqueness of value before creating a new isbd object 27 let isbdquery parse query = new parse query('isbd'); 28 isbdquery equalto('name', bookisbdvalue); 29 let isbdqueryresult parse object = await isbdquery first(); 30 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 31 // if first returns a valid object instance, it means that there 32 // is at least one instance of isbd with the informed value 33 alert( 34 'error! 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 (1\ n) 47 // one to many relations can be set in two ways 48 // add direct object to field (parse will convert to pointer on save) 49 book set('publisher', bookpublisherobject); 50 // or add pointer to field 51 book set('genre', bookgenreobject topointer()); 52 53 // many to many (n\ n) 54 // create a new relation so data can be added 55 let authorsrelation = book relation('authors'); 56 // bookauthorsobjects is an array of parse objects, 57 // you can add to relation by adding the whole array or object by object 58 authorsrelation add(bookauthorsobjects); 59 60 // after setting the values, save it on the server 61 try { 62 await book save(); 63 // success 64 alert('success!'); 65 // navigate back to home screen using react router 66 history push('/'); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert(`error! ${error message}`); 71 return false; 72 } 73 } catch (error) { 74 // error can be caused by lack of value selection 75 alert( 76 'error! make sure to select valid choices in publisher, genre and author fields!', 77 ); 78 return false; 79 } 80 }; では、3種類の関連付けが「 本 本 オブジェクトを作成する際にどのように行われるかを別々に見ていきましょう。 一対多の関係 「 bookpublisherobject bookpublisherobject 」と「 bookgenreobject bookgenreobject 」が新しい本の「 parse object parse object 」インスタンスに設定されていることに注意してください。parseで一対多の関係を作成するのがどれほど簡単か見てください：ターゲットオブジェクトインスタンスを割り当てるか、「 parse object set parse object set 」メソッドを使用してポインタを使用することができます。このメソッドは2つの引数を取ります：フィールド名と設定する値です。parseはポインタデータ型の列を作成し、ダッシュボードでの迅速なアクセスのために直接リンクを作成します。 多対多の関係 「 bookauthorsobjects bookauthorsobjects 」が新しい本の「 parse object parse object 」インスタンスに設定されている様子を見てください。多対多の関係を作成するには、まず新しい「 parse object relation parse object relation 」を作成し、関連するオブジェクトを1つずつ追加するか、「 parse object parse object 」の配列を渡して追加します。「 parse object relation add parse object relation add 」メソッドを使用します。parseは関係型の列を作成し、データベースに関係テーブルも作成します。また、ダッシュボードのフィールド列にこの新しいテーブルへの簡単なアクセスのためのリンクも作成します。 一対一の関係 次のように bookisbdvalue bookisbdvalue が新しい本 parse objec parse objec t インスタンスに設定されます。一対一および一対多の関係を parse で作成して保存するプロセスは似ており、引数として parse object parse object インスタンスを渡し、 parse object set parse object set メソッドを使用します。このメソッドは、フィールド名と設定する値の2つの引数を取ります。 ここでの注意点は、保存する前に、データベース内に通知された isbd id 文字列値を含む isbd isbd オブジェクトが存在しないこと、またそれに関連する book book オブジェクトがすでに存在しないことを確認する必要があります。この場合、2番目の部分は常に真になります。なぜなら、毎回新しい book book オブジェクトを作成しているからです。 isbd isbd の一意性を強制するには、次のハイライトされたクエリを使用します javascript 1 let isbdquery = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } typescript 1 let isbdquery parse query = new parse query('isbd'); 2 isbdquery equalto('name', bookisbdvalue); 3 let isbdqueryresult parse object = await isbdquery first(); 4 if (isbdqueryresult !== null && isbdqueryresult !== undefined) { 5 // if first returns a valid object instance, it means that there 6 // is at least one instance of isbd with the informed value 7 alert( 8 'error! there is already an isbd instance with this value!', 9 ); 10 return false; 11 } オブジェクトを正常に保存した後、parse はポインターデータ型の列とダッシュボード上の直接リンクを作成します。 3 関係のクエリ 関連するオブジェクトのクエリは非常に簡単で、ほとんどが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(`error! ${error message}`); 49 return false; 50 } 51 }; typescript 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(`error! ${error message}`); 49 return false; 50 } 51 }; 1対多のクエリ 特定の出版社やジャンルに関連する書籍を照会するには、次のようにする必要があります。 parse query equalt parse query equalt メソッドを使用して、 parse object parse object インスタンスをパラメータとして渡します。照会後、parseは結果のオブジェクト内に、1対多のリレーショナルフィールドの完全なインスタンスを保存します。これらのオブジェクトインスタンスからデータを取得して表示するには、次のように parse object get parse object get メソッドをチェーンします bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') 多対多クエリ 特定の著者に関連する本をクエリするには、クエリは次のようにのみ使用されます parse query equalto parse query equalto メソッド。ただし、クエリの後、parseは parse object parse object インスタンスを多対多のリレーショナルフィールドから保存せず、関連するクラス名への参照のみを保存します。例えば、 {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} これらのオブジェクトインスタンスからデータを取得して表示するには、リレーションを作成し、再度クエリを実行し、結果を自分のオブジェクト配列に保存する必要があります。 一対一クエリ 以前と同様に、特定のisbdに関連する本をクエリするには、 parse query equalto parse query equalto メソッドを使用して parse object parse object インスタンスをパラメータとして渡す必要があります。クエリの後、parseは結果のオブジェクト内に一対一のリレーショナルフィールドの完全なインスタンスを保存します。これは、一対多のリレーショナルフィールドと同じ方法で行われます。 結論 このガイドの最後に、react上でparseのリレーションを作成し、クエリする方法を学びました。次のガイドでは、ユーザーを登録する方法を示します。