Relational Queries

query relazionali in react native usando parse introduzione in questa guida, eseguirai query relazionali in parse e implementerai un componente react native utilizzando queste query imparerai come configurare e interrogare dati realistici utilizzando back4app e react native prerequisiti per completare questo tutorial, avrai bisogno di un'app react native creata e connessa a https //www back4app com/docs/react native/parse sdk/react native sdk se desideri testare/utilizzare il layout dello schermo fornito da questa guida, dovresti configurare il react native paper react native paper https //github com/callstack/react native paper obiettivo interrogare dati relazionali memorizzati su back4app da un'app react native 1 comprendere la classe parse query qualsiasi operazione di query parse utilizza il parse query parse query tipo di oggetto, che ti aiuterà a recuperare dati specifici dal tuo database in tutta la tua app è cruciale sapere che un parse query parse query si risolverà solo dopo aver chiamato un metodo di recupero (come parse query find parse query find o parse query first parse query first ), quindi una query può essere impostata e diversi modificatori possono essere concatenati prima di essere effettivamente chiamati per creare un nuovo parse query parse query , devi passare come parametro la desiderata parse object parse object sottoclasse, che è quella che conterrà i risultati della tua query un esempio di query può essere visto qui sotto, in cui viene interrogata una sottoclasse fittizia di book book 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(); puoi leggere di più sulla parse query parse query classe https //parseplatform org/parse sdk js/api/master/parse query html 2 salva alcuni dati su back4app creiamo un assortimento di classi, che saranno l'obiettivo delle nostre query in questa guida le classi sono autore autore , libro libro , editore editore e libreria libreria , in cui libro libro ha una relazione 1\ n con editore editore e n\ n con autore autore , e libreria libreria ha una relazione n\ n con libro libro sulla console js di parse è possibile eseguire codice javascript direttamente, interrogando e aggiornando i contenuti del database della tua applicazione utilizzando i comandi del js sdk esegui il codice qui sotto dalla tua console js e inserisci i dati su back4app ecco come appare la console js nel tuo dashboard vai avanti e crea le classi con il seguente contenuto di esempio 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 interroga i dati ora che hai popolato tutte le classi, possiamo ora eseguire alcune query relazionali in esse iniziamo filtrando libri libri i risultati per editore, cercando quelli che appartengono a editore editore “acacia publishings” (o “editore a”) utilizzando il metodo di 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 }; ora facciamo una query per vedere quali bookstore bookstore contengono book book con data di pubblicazione successiva al 01/01/2010, utilizzando una query interna con il parse query greaterthan parse query greaterthan metodo e poi il parse query matchesquery parse query matchesquery metodo 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 }; ora creiamo una query relazionale più complessa, cercando oggetti bookstore bookstore che hanno almeno un book book scritto da author author “aaron writer” (o “authora”), utilizzando equalto equalto e 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 query da un componente react native utilizziamo ora le nostre query di esempio all'interno di un componente in react native, con un'interfaccia semplice che mostra un elenco di risultati e anche pulsanti per chiamare le query ecco come è strutturato il codice del componente, nota le doquery doquery funzioni, contenenti il codice di esempio di prima javascript 1 import react, {usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const querylist = () => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerya = async function () { 16 // get publishera object 17 const publisheraquery = new parse query('publisher'); 18 publisheraquery equalto('name', 'acacia publishings'); 19 const publishera = await publisheraquery first(); 20&#x9; 21 // query books with publishera 22 const bookquery = new parse query('book'); 23 bookquery equalto('publisher', publishera); 24&#x9; 25 try { 26 let results = await bookquery find(); 27 setqueryresults(results); 28 return true; 29 } catch (error) { 30 // error can be caused by lack of internet connection 31 alert alert('error!', error message); 32 return false; 33 } 34 }; 35&#x9; 36 const doqueryb = async function () { 37 // create inner book query 38 const bookquery = new parse query('book'); 39 bookquery greaterthan('publishingdate', new date('01/01/2010')); 40&#x9; 41 // query bookstore using inner book query 42 const bookstorequery = new parse query('bookstore'); 43 bookstorequery matchesquery('books', bookquery); 44&#x9; 45 try { 46 let results = await bookstorequery find(); 47 setqueryresults(results); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert alert('error!', error message); 52 return false; 53 } 54 }; 55&#x9; 56 const doqueryc = async function () { 57 // get authora object 58 const authoraquery = new parse query('author'); 59 authoraquery equalto('name', 'aaron writer'); 60 const authora = await authoraquery first(); 61&#x9; 62 // create inner book query 63 const bookquery = new parse query('book'); 64 bookquery equalto('authors', authora); 65&#x9; 66 // query bookstore using inner book query 67 const bookstorequery = new parse query('bookstore'); 68 bookstorequery matchesquery('books', bookquery); 69&#x9; 70 try { 71 let results = await bookstorequery find(); 72 setqueryresults(results); 73 return true; 74 } catch (error) { 75 // error can be caused by lack of internet connection 76 alert alert('error!', error message); 77 return false; 78 } 79 }; 80&#x9; 81 const clearqueryresults = async function () { 82 setqueryresults(null); 83 return true; 84 }; 85&#x9; 86 return ( 87 <> 88 \<view style={styles header}> 89 \<image 90 style={styles header logo} 91 source={ { 92 uri 93 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 94 } } 95 /> 96 \<papertext style={styles header text}> 97 \<papertext style={styles header text bold}> 98 {'react native on back4app '} 99 \</papertext> 100 {' relational queries'} 101 \</papertext> 102 \</view> 103 \<scrollview style={styles wrapper}> 104 \<view> 105 \<title>{'result list'}\</title> 106 {/ query list /} 107 {queryresults !== null && 108 queryresults !== undefined && 109 queryresults map((result) => ( 110 \<list item 111 key={result id} 112 title={ 113 result get('name') !== undefined 114 ? result get('name') 115 result get('title') 116 } 117 titlestyle={styles list text} 118 style={styles list item} 119 /> 120 ))} 121 {queryresults === null || 122 queryresults === undefined || 123 (queryresults !== null && 124 queryresults !== undefined && 125 queryresults length <= 0) ? ( 126 \<papertext>{'no results here!'}\</papertext> 127 ) null} 128 \</view> 129 \<view> 130 \<title>{'query buttons'}\</title> 131 \<paperbutton 132 onpress={() => doquerya()} 133 mode="contained" 134 icon="search web" 135 color={'#208aec'} 136 style={styles list button}> 137 {'query a'} 138 \</paperbutton> 139 \<paperbutton 140 onpress={() => doqueryb()} 141 mode="contained" 142 icon="search web" 143 color={'#208aec'} 144 style={styles list button}> 145 {'query b'} 146 \</paperbutton> 147 \<paperbutton 148 onpress={() => doqueryc()} 149 mode="contained" 150 icon="search web" 151 color={'#208aec'} 152 style={styles list button}> 153 {'query c'} 154 \</paperbutton> 155 \<paperbutton 156 onpress={() => clearqueryresults()} 157 mode="contained" 158 icon="delete" 159 color={'#208aec'} 160 style={styles list button}> 161 {'clear results'} 162 \</paperbutton> 163 \</view> 164 \</scrollview> 165 \</> 166 ); 167 }; 168&#x9; 169 // these define the screen component styles 170 const styles = stylesheet create({ 171 header { 172 alignitems 'center', 173 paddingtop 30, 174 paddingbottom 50, 175 backgroundcolor '#208aec', 176 }, 177 header logo { 178 height 50, 179 width 220, 180 resizemode 'contain', 181 }, 182 header text { 183 margintop 15, 184 color '#f0f0f0', 185 fontsize 16, 186 }, 187 header text bold { 188 color '#fff', 189 fontweight 'bold', 190 }, 191 wrapper { 192 width '90%', 193 alignself 'center', 194 }, 195 list button { 196 margintop 6, 197 marginleft 15, 198 height 40, 199 }, 200 list item { 201 borderbottomwidth 1, 202 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 203 }, 204 list text { 205 fontsize 15, 206 }, 207 });1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const querylist fc<{}> = ({}) reactelement => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerya = async function () promise\<boolean> { 16 // get publishera object 17 const publisheraquery parse query = new parse query('publisher'); 18 publisheraquery equalto('name', 'acacia publishings'); 19 const publishera parse object = await publisheraquery first(); 20&#x9; 21 // query books with publishera 22 const bookquery parse query = new parse query('book'); 23 bookquery equalto('publisher', publishera); 24&#x9; 25 try { 26 let results \[parse object] = await bookquery find(); 27 setqueryresults(results); 28 return true; 29 } catch (error) { 30 // error can be caused by lack of internet connection 31 alert alert('error!', error message); 32 return false; 33 } 34 }; 35&#x9; 36 const doqueryb = async function () promise\<boolean> { 37 // create inner book query 38 const bookquery parse query = new parse query('book'); 39 bookquery greaterthan('publishingdate', new date('01/01/2010')); 40&#x9; 41 // query bookstore using inner book query 42 const bookstorequery parse query = new parse query('bookstore'); 43 bookstorequery matchesquery('books', bookquery); 44&#x9; 45 try { 46 let results \[parse object] = await bookstorequery find(); 47 setqueryresults(results); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert alert('error!', error message); 52 return false; 53 } 54 }; 55&#x9; 56 const doqueryc = async function () promise\<boolean> { 57 // get authora object 58 const authoraquery parse query = new parse query('author'); 59 authoraquery equalto('name', 'aaron writer'); 60 const authora parse object = await authoraquery first(); 61&#x9; 62 // create inner book query 63 const bookquery parse query = new parse query('book'); 64 bookquery equalto('authors', authora); 65&#x9; 66 // query bookstore using inner book query 67 const bookstorequery parse query = new parse query('bookstore'); 68 bookstorequery matchesquery('books', bookquery); 69&#x9; 70 try { 71 let results \[parse object] = await bookstorequery find(); 72 setqueryresults(results); 73 return true; 74 } catch (error) { 75 // error can be caused by lack of internet connection 76 alert alert('error!', error message); 77 return false; 78 } 79 }; 80&#x9; 81 const clearqueryresults = async function () promise\<boolean> { 82 setqueryresults(null); 83 return true; 84 }; 85&#x9; 86 return ( 87 <> 88 \<view style={styles header}> 89 \<image 90 style={styles header logo} 91 source={ { 92 uri 93 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 94 } } 95 /> 96 \<papertext style={styles header text}> 97 \<papertext style={styles header text bold}> 98 {'react native on back4app '} 99 \</papertext> 100 {' relational queries'} 101 \</papertext> 102 \</view> 103 \<scrollview style={styles wrapper}> 104 \<view> 105 \<title>{'result list'}\</title> 106 {/ query list /} 107 {queryresults !== null && 108 queryresults !== undefined && 109 queryresults map((result parse object) => ( 110 \<list item 111 key={result id} 112 title={ 113 result get('name') !== undefined 114 ? result get('name') 115 result get('title') 116 } 117 titlestyle={styles list text} 118 style={styles list item} 119 /> 120 ))} 121 {queryresults === null || 122 queryresults === undefined || 123 (queryresults !== null && 124 queryresults !== undefined && 125 queryresults length <= 0) ? ( 126 \<papertext>{'no results here!'}\</papertext> 127 ) null} 128 \</view> 129 \<view> 130 \<title>{'query buttons'}\</title> 131 \<paperbutton 132 onpress={() => doquerya()} 133 mode="contained" 134 icon="search web" 135 color={'#208aec'} 136 style={styles list button}> 137 {'query a'} 138 \</paperbutton> 139 \<paperbutton 140 onpress={() => doqueryb()} 141 mode="contained" 142 icon="search web" 143 color={'#208aec'} 144 style={styles list button}> 145 {'query b'} 146 \</paperbutton> 147 \<paperbutton 148 onpress={() => doqueryc()} 149 mode="contained" 150 icon="search web" 151 color={'#208aec'} 152 style={styles list button}> 153 {'query c'} 154 \</paperbutton> 155 \<paperbutton 156 onpress={() => clearqueryresults()} 157 mode="contained" 158 icon="delete" 159 color={'#208aec'} 160 style={styles list button}> 161 {'clear results'} 162 \</paperbutton> 163 \</view> 164 \</scrollview> 165 \</> 166 ); 167 }; 168&#x9; 169 // these define the screen component styles 170 const styles = stylesheet create({ 171 header { 172 alignitems 'center', 173 paddingtop 30, 174 paddingbottom 50, 175 backgroundcolor '#208aec', 176 }, 177 header logo { 178 height 50, 179 width 220, 180 resizemode 'contain', 181 }, 182 header text { 183 margintop 15, 184 color '#f0f0f0', 185 fontsize 16, 186 }, 187 header text bold { 188 color '#fff', 189 fontweight 'bold', 190 }, 191 wrapper { 192 width '90%', 193 alignself 'center', 194 }, 195 list button { 196 margintop 6, 197 marginleft 15, 198 height 40, 199 }, 200 list item { 201 borderbottomwidth 1, 202 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 203 }, 204 list text { 205 fontsize 15, 206 }, 207 }); ecco come dovrebbe apparire il componente dopo il rendering e la query tramite una delle funzioni di query conclusione alla fine di questa guida, hai imparato come funzionano le query relazionali su parse e come eseguirle su back4app da un'app react native nella prossima guida, imparerai come lavorare con gli utenti in parse