Requêtes relationnelles dans React avec Parse et Back4App

requête relationnelle dans react utilisant parse introduction dans ce guide, vous effectuerez des requêtes relationnelles dans parse et implémenterez un composant react utilisant ces requêtes vous apprendrez comment configurer et interroger des données réalistes en utilisant back4app et react 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 ant design ant design bibliothèque objectif interroger des données relationnelles stockées sur back4app depuis une application react 1 comprendre la classe parse query toute opération de requête parse utilise le parse query parse query type d'objet, qui vous aidera à récupérer des données spécifiques de votre base de données tout au long de votre application il est crucial de savoir qu'un parse query parse query ne sera résolu qu'après avoir appelé une méthode de récupération (comme parse query find parse query find ou parse query first parse query first ), donc une requête peut être configurée et plusieurs modificateurs peuvent être enchaînés avant d'être réellement appelés pour créer un nouveau parse query parse query , vous devez passer en paramètre le parse object parse object sous classe souhaitée, qui est celle qui contiendra les résultats de votre requête un exemple de requête peut être vu ci dessous, dans laquelle une livre livre sous classe fictive est interrogée 1 // this will create your query 2 let parsequery = new parse query("book"); 3 // the query will resolve only after calling this method 4 let queryresult = await parsequery find(); vous pouvez en savoir plus sur la parse query parse query classe ici dans la documentation officielle https //parseplatform org/parse sdk js/api/master/parse query html 2 enregistrer des données sur back4app créons un assortiment de classes, qui seront l'objet de nos requêtes dans ce guide les classes sont auteur auteur , livre livre , éditeur éditeur et librairie librairie , dans laquelle livre livre a une relation 1\ n avec éditeur éditeur et n\ n avec auteur auteur , et librairie librairie a une relation n\ n avec livre livre sur la console js de parse, il est possible d'exécuter du code javascript directement, en interrogeant et en mettant à jour le contenu de votre base de données d'application à l'aide des commandes du sdk js exécutez le code ci dessous depuis votre console js et insérez les données sur back4app voici à quoi ressemble la console js dans votre tableau de bord allez y et créez les classes avec le contenu d'exemple suivant 1 // add objects and create tables 2 // authors 3 const authora = new parse object('author'); 4 authora set('name', 'aaron writer'); 5 await authora save(); 6&#x9; 7 const authorb = new parse object('author'); 8 authorb set('name', 'beatrice novelist'); 9 await authorb save(); 10&#x9; 11 const authorc = new parse object('author'); 12 authorc set('name', 'casey columnist'); 13 await authorc save(); 14&#x9; 15 // publishers 16 const publishera = new parse object('publisher'); 17 publishera set('name', 'acacia publishings'); 18 await publishera save(); 19&#x9; 20 const publisherb = new parse object('publisher'); 21 publisherb set('name', 'birch distributions'); 22 await publisherb save(); 23&#x9; 24 // books 25 const booka = new parse object('book'); 26 booka set('title', 'a love story'); 27 booka set('publisher', publishera); 28 booka set('publishingdate', new date('05/07/1998')); 29 const bookarelation = booka relation("authors"); 30 bookarelation add(authora); 31 await booka save(); 32&#x9; 33 const bookb = new parse object('book'); 34 bookb set('title', 'benevolent elves'); 35 bookb set('publisher', publisherb); 36 bookb set('publishingdate', new date('11/31/2008')); 37 const bookbrelation = bookb relation("authors"); 38 bookbrelation add(authorb); 39 await bookb save(); 40&#x9; 41 const bookc = new parse object('book'); 42 bookc set('title', 'can you believe it?'); 43 bookc set('publisher', publisherb); 44 bookc set('publishingdate', new date('08/21/2018')); 45 const bookcrelation = bookc relation("authors"); 46 bookcrelation add(authora); 47 bookcrelation add(authorc); 48 await bookc save(); 49&#x9; 50 // bookstore 51 const bookstorea = new parse object('bookstore'); 52 bookstorea set('name', 'books of love'); 53 const bookstorearelation = bookstorea relation("books"); 54 bookstorearelation add(booka); 55 await bookstorea save(); 56&#x9; 57 const bookstoreb = new parse object('bookstore'); 58 bookstoreb set('name', 'fantasy books'); 59 const bookstorebrelation = bookstoreb relation("books"); 60 bookstorebrelation add(bookb); 61 await bookstoreb save(); 62&#x9; 63 const bookstorec = new parse object('bookstore'); 64 bookstorec set('name', 'general books'); 65 const bookstorecrelation = bookstorec relation("books"); 66 bookstorecrelation add(booka); 67 bookstorecrelation add(bookc); 68 await bookstorec save(); 69&#x9; 70 console log('success'); 3 interroger les données maintenant que vous avez peuplé toutes les classes, nous pouvons maintenant effectuer quelques requêtes relationnelles commençons par filtrer les résultats des livres les résultats des livres par le éditeur éditeur , en recherchant ceux qui appartiennent à l'éditeur “acacia publishings” (ou “éditeur a”) en utilisant la méthode de base parse query equalto parse query equalto 1 // get publishera object 2 const publisheraquery = new parse query('publisher'); 3 publisheraquery equalto('name', 'acacia publishings'); 4 const publishera = await publisheraquery first(); 5&#x9; 6 // query books with publishera 7 const bookquery = new parse query('book'); 8 bookquery equalto('publisher', publishera); 9 let queryresults = await bookquery find(); 10&#x9; 11 // let's show the results 12 for (let result of queryresults) { 13 // you access `parse objects` attributes by using ` get` 14 console log(result get('title')); 15 }; interrogeons maintenant quels objets bookstore objets bookstore contiennent des objets book objets book avec une date de publication supérieure au 01/01/2010, en utilisant une requête imbriquée avec la parse query greaterthan parse query greaterthan méthode et ensuite la parse query matchesquery parse query matchesquery méthode 1 // create inner book query 2 const bookquery = new parse query('book'); 3 bookquery greaterthan('publishingdate', new date('01/01/2010')); 4&#x9; 5 // query bookstore using inner book query 6 const bookstorequery = new parse query('bookstore'); 7 bookstorequery matchesquery('books', bookquery); 8 let queryresults = await bookstorequery find(); 9&#x9; 10 // let's show the results 11 for (let result of queryresults) { 12 // you access `parse objects` attributes by using ` get` 13 console log(result get('name')); 14 }; créons maintenant une requête relationnelle plus complexe, à la recherche d' bookstore bookstore des objets qui ont au moins un book book écrit par author author “aaron writer” (ou “authora”), en utilisant equalto equalto et matchesquery matchesquery 1 // get authora object 2 const authoraquery = new parse query('author'); 3 authoraquery equalto('name', 'aaron writer'); 4 const authora = await authoraquery first(); 5&#x9; 6 // create inner book query 7 const bookquery = new parse query('book'); 8 bookquery equalto('authors', authora); 9&#x9; 10 // query bookstore using inner book query 11 const bookstorequery = new parse query('bookstore'); 12 bookstorequery matchesquery('books', bookquery); 13 let queryresults = await bookstorequery find(); 14&#x9; 15 // let's show the results 16 for (let result of queryresults) { 17 // you access `parse objects` attributes by using ` get` 18 console log(result get('name')); 19 }; 4 requête depuis un composant react utilisons maintenant nos requêtes d'exemple à l'intérieur d'un composant en react, avec une interface simple ayant une liste affichant les résultats et aussi des boutons pour appeler les requêtes voici comment le code du composant est structuré, notez les doquery doquery fonctions, contenant le code d'exemple d'avant javascript 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider } from 'antd'; 5 import { closeoutlined, searchoutlined } from '@ant design/icons'; 6&#x9; 7 export const queryrelational = () => { 8 // state variable 9 const \[queryresults, setqueryresults] = usestate(); 10&#x9; 11 const doquerya = async function () { 12 // get publishera object 13 const publisheraquery = new parse query('publisher'); 14 publisheraquery equalto('name', 'acacia publishings'); 15 const publishera = await publisheraquery first(); 16&#x9; 17 // query books with publishera 18 const bookquery = new parse query('book'); 19 bookquery equalto('publisher', publishera); 20&#x9; 21 try { 22 let results = await bookquery find(); 23 setqueryresults(results); 24 return true; 25 } catch (error) { 26 // error can be caused by lack of internet connection 27 alert(`error! ${error message}`); 28 return false; 29 } 30 }; 31&#x9; 32 const doqueryb = async function () { 33 // create inner book query 34 const bookquery = new parse query('book'); 35 bookquery greaterthan('publishingdate', new date('01/01/2010')); 36&#x9; 37 // query bookstore using inner book query 38 const bookstorequery = new parse query('bookstore'); 39 bookstorequery matchesquery('books', bookquery); 40&#x9; 41 try { 42 let results = await bookstorequery find(); 43 setqueryresults(results); 44 return true; 45 } catch (error) { 46 // error can be caused by lack of internet connection 47 alert(`error! ${error message}`); 48 return false; 49 } 50 }; 51&#x9; 52 const doqueryc = async function () { 53 // get authora object 54 const authoraquery = new parse query('author'); 55 authoraquery equalto('name', 'aaron writer'); 56 const authora = await authoraquery first(); 57&#x9; 58 // create inner book query 59 const bookquery = new parse query('book'); 60 bookquery equalto('authors', authora); 61&#x9; 62 // query bookstore using inner book query 63 const bookstorequery = new parse query('bookstore'); 64 bookstorequery matchesquery('books', bookquery); 65&#x9; 66 try { 67 let results = await bookstorequery find(); 68 setqueryresults(results); 69 return true; 70 } catch (error) { 71 // error can be caused by lack of internet connection 72 alert(`error! ${error message}`); 73 return false; 74 } 75 }; 76&#x9; 77 const clearqueryresults = async function () { 78 setqueryresults(undefined); 79 return true; 80 }; 81&#x9; 82 return ( 83 \<div> 84 \<div classname="header"> 85 \<img 86 classname="header logo" 87 alt="back4app logo" 88 src={ 89 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 90 } 91 /> 92 \<p classname="header text bold">{'react on back4app'}\</p> 93 \<p classname="header text">{'relational queries'}\</p> 94 \</div> 95 \<div classname="container"> 96 \<div classname="flex between"> 97 \<h2 classname="heading">{'query list'}\</h2> 98 \<div classname="flex"> 99 \<button 100 onclick={() => doquerya()} 101 type="primary" 102 classname="heading button" 103 color={'#208aec'} 104 icon={\<searchoutlined />} 105 > 106 query a 107 \</button> 108 \<button 109 onclick={() => doqueryb()} 110 type="primary" 111 classname="heading button" 112 color={'#208aec'} 113 icon={\<searchoutlined />} 114 > 115 query b 116 \</button> 117 \<button 118 onclick={() => doqueryc()} 119 type="primary" 120 classname="heading button" 121 color={'#208aec'} 122 icon={\<searchoutlined />} 123 > 124 query c 125 \</button> 126 \<button 127 onclick={() => clearqueryresults()} 128 type="primary" 129 classname="heading button" 130 color={'#208aec'} 131 icon={\<closeoutlined />} 132 > 133 clear results 134 \</button> 135 \</div> 136 \</div> 137 \<divider /> 138 \<div classname="flex between"> 139 \<div classname="flex child"> 140 {/ query list /} 141 {queryresults !== undefined && 142 queryresults map((result, index) => ( 143 \<div classname="list item" key={`${index}`}> 144 \<p classname="list item title">{`${ 145 result get('name') !== undefined 146 ? result get('name') 147 result get('title') 148 }`}\</p> 149 \</div> 150 ))} 151 {queryresults !== undefined && queryresults length <= 0 ? ( 152 \<p>{'no results here!'}\</p> 153 ) null} 154 \</div> 155 \</div> 156 \</div> 157 \</div> 158 ); 159 }; typescript 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider } from 'antd'; 4 import { closeoutlined, searchoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6&#x9; 7 export const queryrelational fc<{}> = () reactelement => { 8 // state variable 9 const \[queryresults, setqueryresults] = usestate\<parse object\[]>(); 10&#x9; 11 const doquerya = async function () promise\<boolean> { 12 // get publishera object 13 const publisheraquery parse query = new parse query('publisher'); 14 publisheraquery equalto('name', 'acacia publishings'); 15 const publishera parse object | undefined = await publisheraquery first(); 16&#x9; 17 // query books with publishera 18 const bookquery parse query = new parse query('book'); 19 bookquery equalto('publisher', publishera); 20&#x9; 21 try { 22 let results parse object\[] = await bookquery find(); 23 setqueryresults(results); 24 return true; 25 } catch (error) { 26 // error can be caused by lack of internet connection 27 alert(`error! ${error message}`); 28 return false; 29 } 30 }; 31&#x9; 32 const doqueryb = async function () promise\<boolean> { 33 // create inner book query 34 const bookquery parse query = new parse query('book'); 35 bookquery greaterthan('publishingdate', new date('01/01/2010')); 36&#x9; 37 // query bookstore using inner book query 38 const bookstorequery parse query = new parse query('bookstore'); 39 bookstorequery matchesquery('books', bookquery); 40&#x9; 41 try { 42 let results parse object\[] = await bookstorequery find(); 43 setqueryresults(results); 44 return true; 45 } catch (error) { 46 // error can be caused by lack of internet connection 47 alert(`error! ${error message}`); 48 return false; 49 } 50 }; 51&#x9; 52 const doqueryc = async function () promise\<boolean> { 53 // get authora object 54 const authoraquery parse query = new parse query('author'); 55 authoraquery equalto('name', 'aaron writer'); 56 const authora parse object | undefined = await authoraquery first(); 57&#x9; 58 // create inner book query 59 const bookquery parse query = new parse query('book'); 60 bookquery equalto('authors', authora); 61&#x9; 62 // query bookstore using inner book query 63 const bookstorequery parse query = new parse query('bookstore'); 64 bookstorequery matchesquery('books', bookquery); 65&#x9; 66 try { 67 let results parse object\[] = await bookstorequery find(); 68 setqueryresults(results); 69 return true; 70 } catch (error) { 71 // error can be caused by lack of internet connection 72 alert(`error! ${error message}`); 73 return false; 74 } 75 }; 76&#x9; 77 const clearqueryresults = async function () promise\<boolean> { 78 setqueryresults(undefined); 79 return true; 80 }; 81&#x9; 82 return ( 83 \<div> 84 \<div classname="header"> 85 \<img 86 classname="header logo" 87 alt="back4app logo" 88 src={ 89 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 90 } 91 /> 92 \<p classname="header text bold">{'react on back4app'}\</p> 93 \<p classname="header text">{'relational queries'}\</p> 94 \</div> 95 \<div classname="container"> 96 \<div classname="flex between"> 97 \<h2 classname="heading">{'query list'}\</h2> 98 \<div classname="flex"> 99 \<button 100 onclick={() => doquerya()} 101 type="primary" 102 classname="heading button" 103 color={'#208aec'} 104 icon={\<searchoutlined />} 105 > 106 query a 107 \</button> 108 \<button 109 onclick={() => doqueryb()} 110 type="primary" 111 classname="heading button" 112 color={'#208aec'} 113 icon={\<searchoutlined />} 114 > 115 query b 116 \</button> 117 \<button 118 onclick={() => doqueryc()} 119 type="primary" 120 classname="heading button" 121 color={'#208aec'} 122 icon={\<searchoutlined />} 123 > 124 query c 125 \</button> 126 \<button 127 onclick={() => clearqueryresults()} 128 type="primary" 129 classname="heading button" 130 color={'#208aec'} 131 icon={\<closeoutlined />} 132 > 133 clear results 134 \</button> 135 \</div> 136 \</div> 137 \<divider /> 138 \<div classname="flex between"> 139 \<div classname="flex child"> 140 {/ query list /} 141 {queryresults !== undefined && 142 queryresults map((result parse object, index number) => ( 143 \<div classname="list item" key={`${index}`}> 144 \<p classname="list item title">{`${result get('name') !== undefined ? result get('name') result get('title')}`}\</p> 145 \</div> 146 ))} 147 {queryresults !== undefined && 148 queryresults length <= 0 ? ( 149 \<p>{'no results here!'}\</p> 150 ) null} 151 \</div> 152 \</div> 153 \</div> 154 \</div> 155 ); 156 }; ajoutez également ces classes à votre app css app css fichier pour rendre complètement la mise en page du composant app css 1 @import ' antd/dist/antd css'; 2&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 900px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 flex { 77 display flex; 78 } 79&#x9; 80 flex between { 81 display flex; 82 justify content space between; 83 } 84&#x9; 85 flex child { 86 flex 0 0 45%; 87 } 88&#x9; 89 heading button { 90 margin left 12px; 91 } 92&#x9; 93 list item { 94 padding bottom 15px; 95 margin bottom 15px; 96 border bottom 1px solid rgba(0,0,0,0 06); 97 text align left; 98 } 99&#x9; 100 list item title { 101 color rgba(0,0,0,0 87); 102 font size 17px; 103 } voici à quoi le composant devrait ressembler après le rendu et la requête par l'une des fonctions de requête conclusion à la fin de ce guide, vous avez appris comment fonctionnent les requêtes relationnelles sur parse et comment les effectuer sur back4app depuis une application react dans le prochain guide, vous apprendrez comment travailler avec les utilisateurs dans parse