Отношения данных в Parse с использованием React

14 мин

отношения введение используя parse, вы можете хранить объекты данных, устанавливая отношения между ними для моделирования этого поведения любой \parseobject \ может быть использован в качестве значения в других \parseobject\ внутри фреймворка parse будет храниться упоминаемый объект в одном месте, чтобы поддерживать согласованность это может дать вам дополнительную мощь при построении и выполнении сложных запросов существует три основных типа отношений \один ко многим\ , где один объект может быть связан с многими другими объектами; \многие ко многим\ , что может создать множество сложных отношений между многими объектами \один к одному\ , устанавливая прямые отношения между двумя объектами и только ими; существует два способа создать \один ко многим\ отношение в parse (рекомендуется) первый способ использовать \parse pointers\ в дочернем классе, что является самым быстрым по времени создания и выполнения запросов мы будем использовать это в этом руководстве второй способ использовать \массивы\ \parse pointers\ в родительском классе, что может привести к медленному времени выполнения запросов в зависимости от их размера из за этой проблемы с производительностью мы будем использовать только примеры с указателями существует три способа создать \многие ко многим\ отношение в parse (рекомендуется) первый способ использовать \parse relations\ , который является самым быстрым по времени создания и запросов мы будем использовать это в этом руководстве второй способ использовать \массивы\ из \parse pointers\ что может привести к медленным временам запросов в зависимости от их размера третий способ использовать \jointable\ где идея взята из классической базы данных когда существует отношение многие ко многим, мы объединяем каждый \objectid \ или \pointer\ с обеих сторон вместе, чтобы создать новую отдельную таблицу, в которой отслеживается связь в этом руководстве вы реализуете приложение для регистрации книг на react, которое содержит три основных типа ассоциаций данных вы научитесь создавать и запрашивать отношения данных, используя back4app и react в любое время вы можете получить доступ к этому проекту через наши репозитории на github, чтобы ознакомиться со стилями и полным кодом репозиторий примера на javascript https //github com/templates back4app/react js associations репозиторий примера на typescript https //github com/templates back4app/react ts associations предварительные условия чтобы завершить этот учебник, вам потребуется приложение react, созданное и подключенное к back4app https //www back4app com/docs/react/quickstart если вы хотите запустить пример проекта из этого руководства, вам следует установить библиотеку https //ant design/ цель чтобы выполнить и продемонстрировать отношения баз данных в react с использованием parse в реалистичном сценарии 1 понимание класса book поскольку в этом руководстве мы будем использовать пример приложения для регистрации книг, вам сначала нужно понять, как организованы объектные отношения в этой базе данных основной класс объекта, который вы будете использовать, это \книга \ , который будет хранить каждую запись книги в регистрации вот другие четыре класса объектов \издатель\ имя издателя книги, отношение один ко многим с \книгой\ ; \жанр\ жанр книги, отношение один ко многим с \книгой\ обратите внимание, что для этого примера мы будем считать, что у книги может быть только один жанр; \автор\ автор книги, отношение многие ко многим с \книгой\ , поскольку у книги может быть более одного автора, и у автора может быть более одной книги; \isdb\ идентификационный номер книги isdb, отношение один к одному с \книгой\ , поскольку этот номер уникален для каждой книги вот визуальное представление этих таблиц базы данных для простоты мы будем предполагать, что каждый класс объекта имеет только строковый тип \имя\ атрибут ( \название \ для \книги\ ), помимо любых дополнительных реляционных атрибутов шаг 2 создание отношений перед тем как перейти к этому шагу, мы рекомендуем вам клонировать и запустить пример приложения react ( репозиторий примера на javascript https //github com/templates back4app/react js associations , репозиторий примера на typescript https //github com/templates back4app/react ts associations ) это приложение имеет два основных экрана один отвечает за отображение зарегистрированных книг, а другой за создание новых книг в форме регистрации книги есть прямые ссылки на другие связанные объекты и текстовое поле для ввода значения 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 }; теперь давайте отдельно рассмотрим, как создаются три типа ассоциаций при создании \книги \ объекта отношение один ко многим обратите внимание, как \bookpublisherobject \ и \bookgenreobject\ устанавливаются для нового \parse object\ экземпляра посмотрите, как просто в parse создать отношение один ко многим вы можете либо назначить экземпляр целевого объекта, либо указатель на него, используя метод \parse object set \ который принимает два аргумента имя поля и значение, которое нужно установить parse создаст столбец типа данных указателя и прямую ссылку на вашей панели управления для быстрого доступа многие ко многим посмотрите, как \bookauthorsobjects \ устанавливаются для нового \parse object\ экземпляра чтобы создать отношение многие ко многим, сначала нужно создать новый \parse object relation\ и затем добавить связанные объекты к нему либо по одному, либо передав массив \parse object\ с помощью метода \parse object relation add\ parse создаст столбец типа отношения и также реляционную таблицу в вашей базе данных parse также создаст ссылку для легкого доступа к этой новой таблице в столбце поля на панели управления отношение один к одному смотрите, как \bookisbdvalue \ устанавливается для новой книги \parse objec\ t экземпляра создание и сохранение отношений один к одному и один ко многим в parse — это схожие процессы, в которых вы передаете в качестве аргумента \parse object \ экземпляр, используя метод \parse object set\ , который принимает два аргумента имя поля и значение, которое нужно установить здесь есть нюанс перед сохранением вам нужно убедиться, что в вашей базе данных нет объектов \isbd\ с указанным значением строки isbd id и что нет объектов \book \ , которые уже связаны с ним вторая часть всегда будет верна в этом случае, так как вы создаете новый объект \book \ каждый раз обеспечить уникальность \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 }; запрос один ко многим чтобы запросить любые книги, связанные с конкретным издателем или жанром, вам нужно выполнить метод \parse query equalt\ с передачей экземпляра \parse object\ в качестве параметра после запроса parse сохранит в результирующих объектах полные экземпляры любых полей с отношением один ко многим чтобы извлечь и показать данные из этих экземпляров объектов, вы можете связать метод \parse object get\ следующим образом \bookparseobject get(('publisher') get('name') \ запрос многие ко многим чтобы запросить любые книги, связанные с конкретным автором, запрос также будет использовать только метод \parse query equalto\ однако после запроса parse не будет хранить \parse object\ экземпляры из полей отношений многие ко многим, только ссылку на имя связанного класса, например \{" type" "relation", "classname" "author"}\ чтобы извлечь и показать данные из этих экземпляров объектов, вам нужно создать отношение и снова выполнить запрос, сохранив результаты в собственном массиве объектов запрос один к одному как и прежде, чтобы запросить любые книги, связанные с конкретным isbd, вам нужно выполнить метод \parse query equalto\ с передачей экземпляра \parse object\ в качестве параметра после запроса parse будет хранить внутри результирующих объектов полные экземпляры любых полей отношений один к одному, так же как это делается с полями отношений один ко многим заключение в конце этого руководства вы узнали, как создавать и запрашивать отношения в parse на react в следующем руководстве мы покажем вам, как регистрировать пользователей