Erstellen und Abfragen von Datenbankbeziehungen in React mit Parse

beziehungen einführung mit parse können sie datenobjekte speichern, die beziehungen zwischen ihnen herstellen um dieses verhalten zu modellieren, kann jedes parseobject parseobject als wert in anderen parseobject parseobject intern wird das parse framework das referenzierte objekt nur an einem ort speichern, um die konsistenz zu wahren das kann ihnen zusätzliche möglichkeiten bieten, wenn sie komplexe abfragen erstellen und ausführen es gibt drei hauptbeziehungstypen eins zu viele eins zu viele , wobei ein objekt mit vielen anderen objekten verbunden sein kann; viele zu viele viele zu viele , was viele komplexe beziehungen zwischen vielen objekten schaffen kann eins zu eins eins zu eins , die direkte beziehungen zwischen zwei objekten und nur diesen herstellen; es gibt zwei möglichkeiten, eine eins zu viele eins zu viele beziehung in parse zu erstellen (empfohlen) die erste möglichkeit besteht darin, die parse pointer parse pointer in der kindklasse zu verwenden, was die schnellste methode in bezug auf erstellungs und abfragezeit ist wir werden dies in diesem leitfaden verwenden die zweite möglichkeit besteht darin, arrays arrays von parse pointern parse pointern in der elternklasse zu verwenden, was je nach größe zu langsamen abfragezeiten führen kann aufgrund dieses leistungsproblems werden wir nur beispiele mit pointern verwenden es gibt drei möglichkeiten, eine viele zu viele viele zu viele beziehung in parse zu erstellen (empfohlen) das erste ist die verwendung von parse relations parse relations , was die schnellste erstellung und abfragezeit hat wir werden dies in diesem leitfaden verwenden das zweite ist die verwendung von arrays arrays von parse pointers parse pointers was zu langsamen abfragezeiten führen kann, abhängig von ihrer größe das dritte ist die verwendung von jointable jointable wo die idee aus klassischen datenbanken stammt wenn es eine viele zu viele beziehung gibt, kombinieren wir jede objectid objectid oder pointer pointer von beiden seiten zusammen, um eine neue separate tabelle zu erstellen, in der die beziehung verfolgt wird in diesem leitfaden werden sie eine react buchregistrierungsanwendung implementieren, die die drei hauptarten von datenassoziationen enthält sie werden lernen, wie man datenbeziehungen mit back4app und react erstellt und abfragt zu jeder zeit können sie auf dieses projekt über unsere github repositories zugreifen, um die stile und den vollständigen code zu überprüfen javascript beispiel repository typescript beispiel repository voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react app, die erstellt und mit back4app verbunden wenn sie das beispielprojekt dieses leitfadens ausführen möchten, sollten sie die ant design ant design bibliothek ziel um datenbankbeziehungen in react mit parse in einem realistischen szenario durchzuführen und zu demonstrieren 1 verständnis der buchklasse da wir in diesem leitfaden ein beispiel für eine buchregistrierungsanwendung verwenden, müssen sie zunächst verstehen, wie die objektbeziehungen in dieser datenbank angelegt sind die hauptobjektklasse, die sie verwenden werden, ist die buch buch klasse, die jeden bucheintrag in der registrierung speichert dies sind die anderen vier objektklassen verlag verlag name des buchverlags, eins zu viele beziehung mit buch buch ; genre genre buchgenre, eins zu viele beziehung mit buch buch beachten sie, dass wir in diesem beispiel davon ausgehen, dass ein buch nur ein genre haben kann; autor autor buchautor, viele zu viele beziehung mit buch buch , da ein buch mehr als einen autor haben kann und ein autor mehr als ein buch haben kann; isdb isdb buch isdb identifikationsnummer, eins zu eins beziehung mit buch buch , da diese nummer für jedes buch einzigartig ist hier ist eine visuelle darstellung dieser datenbanktabellen zur vereinfachung nehmen wir an, dass jede objektklasse nur einen string typ hat name name attribut ( titel titel für das buch buch ), abgesehen von zusätzlichen relationalen attributen schritt 2 beziehungen erstellen bevor wir zu diesem schritt übergehen, empfehlen wir ihnen, das react app beispiel zu klonen und auszuführen ( javascript beispiel repository , typescript beispiel repository ) diese anwendung hat zwei hauptbildschirme einen, der für die auflistung der registrierten bücher verantwortlich ist, und einen anderen, der für die erstellung neuer bücher zuständig ist im buchregistrierungsformular gibt es direkte links zu den anderen verwandten objekten und ein texteingabefeld, das dem isbd wert des buches zugewiesen ist, der verwendet wird, um die eins zu eins beziehung zu erstellen lassen sie uns die bucherstellungsmethode ansehen, die aufgerufen wird, wenn dieses formular eingereicht wird 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 }; lassen sie uns nun separat betrachten, wie die drei arten von assoziationen beim erstellen des buch buch objekts durchgeführt werden eins zu viele beziehung beachten sie, wie das bookpublisherobject bookpublisherobject und bookgenreobject bookgenreobject auf das neue buch parse object parse object instanz gesetzt werden sehen sie, wie einfach es in parse ist, eine eins zu viele beziehung zu erstellen sie könnten entweder die zielobjektinstanz oder einen verweis darauf mit der parse object set parse object set methode zuweisen, die zwei argumente benötigt den feldnamen und den wert, der gesetzt werden soll parse erstellt eine spalte für den zeigertyp und einen direkten link auf ihrem dashboard für einen schnellen zugriff im hintergrund viele zu viele beziehung sehen sie, wie die bookauthorsobjects bookauthorsobjects auf die neue buch parse object parse object instanz gesetzt werden um eine viele zu viele beziehung zu erstellen, müssen sie zuerst ein neues parse object relation parse object relation erstellen und dann die zugehörigen objekte entweder einzeln oder durch übergeben eines arrays von parse object parse object mit der parse object relation add parse object relation add methode hinzufügen parse erstellt eine spalte für den beziehungstyp und auch eine relationale tabelle in ihrer datenbank parse erstellt auch einen link für einen einfachen zugriff auf diese neue tabelle in der feldspalte im dashboard eins zu eins beziehung sehen sie, wie der bookisbdvalue bookisbdvalue auf das neue buch parse objec parse objec t instanz gesetzt wird das erstellen und speichern von eins zu eins und eins zu viele beziehungen in parse sind ähnliche prozesse, bei denen sie als argument die parse object parse object instanz mit der parse object set parse object set methode übergeben, die zwei argumente benötigt den feldnamen und den wert, der gesetzt werden soll der haken dabei ist, dass sie vor dem speichern sicherstellen müssen, dass es keine isbd isbd objekte gibt, die den angegebenen isbd id zeichenfolgewert in ihrer datenbank enthalten, und dass es keine buch buch objekte gibt, die bereits damit verknüpft sind der zweite teil wird in diesem fall immer wahr sein, da sie jedes mal ein neues buch buch objekt erstellen die durchsetzung der isbd isbd eindeutigkeit kann durch die verwendung der folgenden hervorgehobenen abfrage erreicht werden 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 } nachdem sie ihre objekte erfolgreich gespeichert haben, wird parse eine zeile vom datentyp pointer erstellen und einen direkten link auf ihrem dashboard erstellen 3 abfragen von beziehungen das abfragen verwandter objekte ist ziemlich unkompliziert, da ein großteil davon von parse verarbeitet wird werfen sie einen blick auf die abfragefunktion im bildschirm der buchregisterliste, und danach werden wir hervorheben, wie jeder beziehungstyp abgefragt wird 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 }; eins zu viele abfrage um bücher zu einem bestimmten verlag oder genre abzufragen, müssen sie eine parse query equalt parse query equalt methode aufrufen, die die parse object parse object instanz als parameter übergibt nach der abfrage wird parse in den resultierenden objekten die vollständigen instanzen aller eins zu viele relationalen felder speichern um daten aus diesen objektinstanzen abzurufen und anzuzeigen, können sie die parse object get parse object get methode wie folgt verketten bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') viele zu viele abfrage um bücher zu einer bestimmten autorin oder einem bestimmten autor abzufragen, wird die abfrage ebenfalls nur eine parse query equalto parse query equalto methode verwenden nach der abfrage wird parse jedoch keine parse object parse object instanzen aus vielen zu vielen relationalen feldern speichern, sondern nur einen verweis auf den zugehörigen klassennamen, wie zum beispiel {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} um daten aus diesen objektinstanzen abzurufen und anzuzeigen, müssen sie eine beziehung erstellen und sie erneut abfragen, wobei sie die ergebnisse in einem eigenen objektarray speichern eins zu eins abfrage wie zuvor müssen sie, um bücher zu einem bestimmten isbd abzufragen, eine parse query equalto parse query equalto methode verwenden, die die parse object parse object instanz als parameter übergibt nach der abfrage wird parse in den resultierenden objekten die vollständigen instanzen von eins zu eins relationalen feldern speichern, genau wie es bei eins zu viele relationalen feldern gemacht wird fazit am ende dieses leitfadens haben sie gelernt, wie man beziehungen in parse auf react erstellt und abfragt im nächsten leitfaden zeigen wir ihnen, wie sie benutzer registrieren