Gestion des Relations de Données Parse avec React

relations introduction en utilisant parse, vous pouvez stocker des objets de données établissant des relations entre eux pour modéliser ce comportement, tout parseobject parseobject peut être utilisé comme une valeur dans d'autres parseobject parseobject en interne, le framework parse stockera l'objet référencé à un seul endroit, pour maintenir la cohérence cela peut vous donner un pouvoir supplémentaire lors de la construction et de l'exécution de requêtes complexes il existe trois principaux types de relations un à plusieurs un à plusieurs , où un objet peut être lié à plusieurs autres objets; plusieurs à plusieurs plusieurs à plusieurs , ce qui peut créer de nombreuses relations complexes entre de nombreux objets un à un un à un , établissant des relations directes entre deux objets et seulement eux; il existe deux façons de créer une relation un à plusieurs relation un à plusieurs dans parse (recommandé) la première consiste à utiliser les parse pointers parse pointers dans la classe enfant, qui est la plus rapide en termes de création et de temps de requête nous utiliserons cela dans ce guide la seconde consiste à utiliser des tableaux tableaux de parse pointers parse pointers dans la classe parent, ce qui peut entraîner des temps de requête lents en fonction de leur taille en raison de ce problème de performance, nous utiliserons uniquement des exemples de pointeurs il existe trois façons de créer une relation plusieurs à plusieurs relation plusieurs à plusieurs dans parse (recommandé) le premier est d'utiliser parse relations parse relations , qui est le plus rapide en termes de création et de temps de requête nous allons utiliser cela dans ce guide le deuxième est d'utiliser arrays arrays de parse pointers parse pointers ce qui peut entraîner des temps de requête lents en fonction de leur taille le troisième est d'utiliser jointable jointable où l'idée vient des bases de données classiques lorsqu'il y a une relation plusieurs à plusieurs, nous combinons chaque objectid objectid ou pointer pointer des deux côtés pour construire une nouvelle table séparée dans laquelle la relation est suivie dans ce guide, vous allez implémenter une application de registre de livres react qui contient les trois principaux types d'associations de données vous apprendrez comment créer et interroger des relations de données en utilisant back4app et react à tout moment, vous pouvez accéder à ce projet via nos dépôts github pour consulter les styles et le code complet dépôt d'exemple javascript dépôt d'exemple typescript prérequis pour compléter ce tutoriel, vous aurez besoin de une application react créée et connectée à back4app si vous souhaitez exécuter le projet d'exemple de ce guide, vous devez configurer la bibliothèque ant design bibliothèque ant design objectif pour effectuer et démontrer les relations de base de données dans react en utilisant parse dans un scénario réaliste 1 comprendre la classe livre puisque dans ce guide nous allons utiliser un exemple d'application d'enregistrement de livres, vous devez d'abord comprendre comment les relations d'objets sont disposées dans cette base de données la classe d'objet principale que vous utiliserez est la livre livre classe, qui stockera chaque entrée de livre dans l'enregistrement voici les quatre autres classes d'objets éditeur éditeur nom de l'éditeur du livre, relation un à plusieurs avec livre livre ; genre genre genre du livre, relation un à plusieurs avec livre livre notez que pour cet exemple, nous considérerons qu'un livre ne peut avoir qu'un seul genre ; auteur auteur auteur du livre, relation plusieurs à plusieurs avec livre livre , puisque un livre peut avoir plus d'un auteur et un auteur peut avoir plus d'un livre également ; isdb isdb numéro d'identification isdb du livre, relation un à un avec livre livre , puisque ce numéro est unique pour chaque livre voici une représentation visuelle de ces tables de base de données pour simplifier, nous allons supposer que chaque classe d'objet a uniquement un type de chaîne nom nom attribut ( titre titre pour le livre livre ), en dehors de tout attribut relationnel supplémentaire étape 2 création de relations avant de passer à cette étape, nous vous recommandons de cloner et d'exécuter l'exemple d'application react ( dépôt d'exemple javascript , dépôt d'exemple typescript ) cette application a deux écrans principaux l'un responsable de l'affichage des livres enregistrés et l'autre de la création de nouveaux livres dans le formulaire d'enregistrement des livres, il y a des liens directs vers les autres objets connexes et un champ de saisie de texte attribué à la valeur isbd du livre, qui sera utilisé pour créer la relation un à un examinons la méthode de création de livre qui est appelée lors de la soumission de ce formulaire 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 }; regardons maintenant séparément comment les trois types d'associations sont réalisés lors de la création de l' livre livre objet relation un à plusieurs notez comment le objetéditeurlivre objetéditeurlivre et objetgenrelivre objetgenrelivre sont définis pour le nouveau livre parse object parse object instance voyez comme il est simple dans parse de créer une relation un à plusieurs vous pouvez soit assigner l'instance de l'objet cible, soit un pointeur vers celui ci en utilisant la méthode parse object set parse object set qui prend deux arguments le nom du champ et la valeur à définir parse créera une colonne de type pointeur et un lien direct sur votre tableau de bord pour un accès rapide en arrière plan relation plusieurs à plusieurs regardez comment les objetsauteurslivre objetsauteurslivre sont définis pour le nouveau livre parse object parse object instance pour créer une relation plusieurs à plusieurs, vous devez d'abord créer un nouveau parse object relation parse object relation puis ajouter les objets associés soit un par un, soit en passant un tableau de parse object parse object en utilisant la méthode parse object relation add parse object relation add parse créera une colonne de type relation et également une table relationnelle dans votre base de données parse créera également un lien pour un accès facile à cette nouvelle table dans la colonne de champ du tableau de bord relation un à un voir comment le bookisbdvalue bookisbdvalue est défini sur le nouveau livre parse objec parse objec t instance créer et enregistrer des relations un à un et un à plusieurs dans parse sont des processus similaires, dans lesquels vous passez en argument le parse object parse object instance en utilisant le parse object set parse object set méthode, qui prend deux arguments le nom du champ et la valeur à définir le piège ici est qu'avant d'enregistrer, vous devez vous assurer qu'il n'y a pas d'objets isbd isbd contenant la valeur de chaîne id isbd informée dans votre base de données et qu'il n'y a pas d'objets book book déjà liés à cela également la deuxième partie sera toujours vraie dans ce cas, puisque vous créez un nouvel objet book book à chaque fois assurer l'unicité de l' isbd isbd peut être réalisé en utilisant la requête mise en surbrillance suivante 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 } après avoir enregistré vos objets avec succès, parse créera également une colonne de type de données pointeur et un lien direct sur votre tableau de bord 3 interroger les relations interroger des objets liés est assez simple car une grande partie est gérée par parse jetez un œil à la fonction de requête dans l'écran de liste des enregistrements de livres et ensuite nous mettrons en évidence comment chaque type de relation est interrogé 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 }; requête un à plusieurs pour interroger des livres liés à un éditeur ou un genre spécifique, vous devez effectuer une parse query equalt parse query equalt méthode en passant le parse object parse object instance comme paramètre après l'interrogation, parse stockera à l'intérieur des objets résultants les instances complètes de tous les champs relationnels un à plusieurs pour récupérer et afficher des données de ces instances d'objet, vous pouvez chaîner la parse object get parse object get méthode comme ceci bookparseobject get(('publisher') get('name') bookparseobject get(('publisher') get('name') requête plusieurs à plusieurs pour interroger des livres liés à un auteur spécifique, la requête utilisera également uniquement une parse query equalto parse query equalto méthode cependant, après la requête, parse ne stockera pas parse object parse object instances des champs relationnels plusieurs à plusieurs, seulement une référence au nom de la classe liée, comme {" type" "relation", "classname" "author"} {" type" "relation", "classname" "author"} pour récupérer et afficher des données de ces instances d'objet, vous devez créer une relation et la requêter à nouveau, en stockant les résultats dans un tableau d'objets de votre propre requête un à un tout comme auparavant, pour interroger des livres liés à un isbd spécifique, vous devez effectuer une parse query equalto parse query equalto méthode en passant l' parse object parse object instance comme paramètre après la requête, parse stockera à l'intérieur des objets résultants les instances complètes de tous les champs relationnels un à un, de la même manière que cela est fait avec les champs relationnels un à plusieurs conclusion à la fin de ce guide, vous avez appris comment créer et interroger des relations dans parse sur react dans le prochain guide, nous vous montrerons comment enregistrer des utilisateurs