Basic Queries

requête dans react native en utilisant parse introduction dans ce guide, vous effectuerez des requêtes de base dans parse et implémenterez un composant react native en utilisant ces requêtes vous apprendrez comment configurer et interroger des données réalistes en utilisant back4app et react native prérequis pour compléter ce tutoriel, vous aurez besoin de une application react native créée et connectée à https //www back4app com/docs/react native/parse sdk/react native sdk si vous souhaitez tester/utiliser la mise en page de l'écran fournie par ce guide, vous devez configurer le react native paper react native paper https //github com/callstack/react native paper objectif interroger des données stockées sur back4app depuis une application react native 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 se résoudra qu'après avoir appelé une méthode de récupération (comme parse query find parse query find ou parse query get parse query get ), donc une requête peut être configurée et plusieurs modificateurs peuvent être chaî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 vos résultats de requête un exemple de requête peut être vu ci dessous, dans laquelle une profile profile sous classe fictive est interrogée 1 // this will create your query 2 let parsequery = new parse query("profile"); 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 https //parseplatform org/parse sdk js/api/master/parse query html 2 enregistrer des données sur back4app créons une profile profile classe, qui sera la cible de nos requêtes dans ce guide 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 la classe utilisateur profile profile avec le contenu d'exemple suivant 1 // add profile objects and create table 2 // adam sandler 3 let profile = new parse object('profile'); 4 profile set('name', 'adam sandler'); 5 profile set('birthday', new date('09/09/1966')); 6 profile set('friendcount', 2); 7 profile set('favoritefoods', \['lobster', 'bread']); 8 await profile save(); 9&#x9; 10 // adam levine 11 profile = new parse object('profile'); 12 profile set('name', 'adam levine'); 13 profile set('birthday', new date('03/18/1979')); 14 profile set('friendcount', 52); 15 profile set('favoritefoods', \['cake', 'bread']); 16 await profile save(); 17&#x9; 18 // carson kressley 19 profile = new parse object('profile'); 20 profile set('name', 'carson kressley'); 21 profile set('birthday', new date('11/11/1969')); 22 profile set('friendcount', 12); 23 profile set('favoritefoods', \['fish', 'cookies']); 24 await profile save(); 25&#x9; 26 // dan aykroyd 27 profile = new parse object('profile'); 28 profile set('name', 'dan aykroyd'); 29 profile set('birthday', new date('07/01/1952')); 30 profile set('friendcount', 66); 31 profile set('favoritefoods', \['jam', 'peanut butter']); 32 await profile save(); 33&#x9; 34 // eddie murphy 35 profile = new parse object('profile'); 36 profile set('name', 'eddie murphy'); 37 profile set('birthday', new date('04/03/1961')); 38 profile set('friendcount', 49); 39 profile set('favoritefoods', \['lettuce', 'pepper']); 40 await profile save(); 41&#x9; 42 // fergie 43 profile = new parse object('profile'); 44 profile set('name', 'fergie'); 45 profile set('birthday', new date('03/27/1975')); 46 profile set('friendcount', 55); 47 profile set('favoritefoods', \['lobster', 'shrimp']); 48 await profile save(); 49&#x9; 50 console log('success!'); 3 interroger les données maintenant que vous avez une classe peuplée, nous pouvons maintenant effectuer quelques requêtes de base commençons par filtrer profile profile les résultats par nom, qui est un champ de type chaîne, en recherchant des valeurs qui contiennent le nom adam adam en utilisant la méthode parse query contains parse query contains 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `contains` is a basic query method that checks if string field 5 // contains a specific substring 6 parsequery contains('name', 'adam'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(result get('name')); 16 }; interrogeons maintenant par le champ de type nombre friendcount friendcount en utilisant une autre méthode de requête courante, parse query greaterthan parse query greaterthan dans ce cas, nous voulons des utilisateurs profiles profiles pour lesquels le nombre d'amis est supérieur à 20 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `greaterthan` is a basic query method that does what it 5 // says on the tin 6 parsequery greaterthan('friendcount', 20); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, friend count ${result get('friendcount')}`); 16 }; d'autres méthodes de requête récurrentes sont parse query ascending parse query ascending et parse query descending parse query descending , responsables de l'ordre de vos requêtes cet ordre peut être effectué dans la plupart des types de données, alors ordonnons une requête par le champ de date birthday birthday par le plus jeune 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `descending` and `ascending` can and should be chained 5 // with other query methods to improve your queries 6 parsequery descending('birthday'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, birthday ${result get('birthday')}`); 16 }; comme indiqué ici auparavant, vous pouvez et devez enchaîner les méthodes de requête pour obtenir des résultats plus raffinés combinons alors les exemples précédents dans une seule demande de requête 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 parsequery contains('name', 'adam'); 5 parsequery greaterthan('friendcount', 20); 6 parsequery descending('birthday'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, friend count ${result get('friendcount')}, birthday ${result get('birthday')}`); 16 }; 4 requête depuis un composant react native utilisons maintenant nos requêtes d'exemple à l'intérieur d'un composant en react native, avec une interface simple ayant une liste affichant les résultats et également 4 boutons pour appeler les requêtes voici comment le code du composant est structuré, notez les doquery doquery fonctions, contenant le code d'exemple de tout à l'heure 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 booklist = () => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerybyname = async function () { 16 // create our parse query instance so methods can be chained 17 // reading parse objects is done by using parse query 18 const parsequery = new parse query('profile'); 19&#x9; 20 // `contains` is a basic query method that checks if string field 21 // contains a specific substring 22 parsequery contains('name', 'adam'); 23&#x9; 24 try { 25 let profiles = await parsequery find(); 26 setqueryresults(profiles); 27 return true; 28 } catch (error) { 29 // error can be caused by lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 } 33 }; 34&#x9; 35 const doquerybyfriendcount = async function () { 36 // create our parse query instance so methods can be chained 37 // reading parse objects is done by using parse query 38 const parsequery = new parse query('profile'); 39&#x9; 40 // `greaterthan` is a basic query method that does what it 41 // says on the tin 42 parsequery greaterthan('friendcount', 20); 43&#x9; 44 try { 45 let profiles = await parsequery find(); 46 setqueryresults(profiles); 47 return true; 48 } catch (error) { 49 // error can be caused by lack of internet connection 50 alert alert('error!', error message); 51 return false; 52 } 53 }; 54&#x9; 55 const doquerybyordering = async function () { 56 // create our parse query instance so methods can be chained 57 // reading parse objects is done by using parse query 58 const parsequery = new parse query('profile'); 59&#x9; 60 // `descending` and `ascending` can and should be chained 61 // with other query methods to improve your queries 62 parsequery descending('birthday'); 63&#x9; 64 try { 65 let profiles = await parsequery find(); 66 setqueryresults(profiles); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const doquerybyall = async function () { 76 // create our parse query instance so methods can be chained 77 // reading parse objects is done by using parse query 78 const parsequery = new parse query('profile'); 79&#x9; 80 parsequery contains('name', 'adam'); 81 parsequery greaterthan('friendcount', 20); 82 parsequery descending('birthday'); 83&#x9; 84 try { 85 let profiles = await parsequery find(); 86 setqueryresults(profiles); 87 return true; 88 } catch (error) { 89 // error can be caused by lack of internet connection 90 alert alert('error!', error message); 91 return false; 92 } 93 }; 94&#x9; 95 const clearqueryresults = async function () { 96 setqueryresults(null); 97 return true; 98 }; 99&#x9; 100 return ( 101 <> 102 \<view style={styles header}> 103 \<image 104 style={styles header logo} 105 source={ { 106 uri 107 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 108 } } 109 /> 110 \<papertext style={styles header text}> 111 \<papertext style={styles header text bold}> 112 {'react native on back4app '} 113 \</papertext> 114 {' basic queries'} 115 \</papertext> 116 \</view> 117 \<scrollview style={styles wrapper}> 118 \<view> 119 \<title>{'result list'}\</title> 120 {/ book list /} 121 {queryresults !== null && 122 queryresults !== undefined && 123 queryresults map((profile) => ( 124 \<list item 125 key={profile id} 126 title={profile get('name')} 127 description={`friend count ${profile get( 128 'friendcount', 129 )}, birthday ${profile get('birthday')}`} 130 titlestyle={styles list text} 131 style={styles list item} 132 /> 133 ))} 134 {queryresults === null || 135 queryresults === undefined || 136 (queryresults !== null && 137 queryresults !== undefined && 138 queryresults length <= 0) ? ( 139 \<papertext>{'no results here!'}\</papertext> 140 ) null} 141 \</view> 142 \<view> 143 \<title>{'query buttons'}\</title> 144 \<paperbutton 145 onpress={() => doquerybyname()} 146 mode="contained" 147 icon="search web" 148 color={'#208aec'} 149 style={styles list button}> 150 {'query by name'} 151 \</paperbutton> 152 \<paperbutton 153 onpress={() => doquerybyfriendcount()} 154 mode="contained" 155 icon="search web" 156 color={'#208aec'} 157 style={styles list button}> 158 {'query by friend count'} 159 \</paperbutton> 160 \<paperbutton 161 onpress={() => doquerybyordering()} 162 mode="contained" 163 icon="search web" 164 color={'#208aec'} 165 style={styles list button}> 166 {'query by ordering'} 167 \</paperbutton> 168 \<paperbutton 169 onpress={() => doquerybyall()} 170 mode="contained" 171 icon="search web" 172 color={'#208aec'} 173 style={styles list button}> 174 {'query by all'} 175 \</paperbutton> 176 \<paperbutton 177 onpress={() => clearqueryresults()} 178 mode="contained" 179 icon="delete" 180 color={'#208aec'} 181 style={styles list button}> 182 {'clear results'} 183 \</paperbutton> 184 \</view> 185 \</scrollview> 186 \</> 187 ); 188 }; 189&#x9; 190 // these define the screen component styles 191 const styles = stylesheet create({ 192 header { 193 alignitems 'center', 194 paddingtop 30, 195 paddingbottom 50, 196 backgroundcolor '#208aec', 197 }, 198 header logo { 199 height 50, 200 width 220, 201 resizemode 'contain', 202 }, 203 header text { 204 margintop 15, 205 color '#f0f0f0', 206 fontsize 16, 207 }, 208 header text bold { 209 color '#fff', 210 fontweight 'bold', 211 }, 212 wrapper { 213 width '90%', 214 alignself 'center', 215 }, 216 list button { 217 margintop 6, 218 marginleft 15, 219 height 40, 220 }, 221 list item { 222 borderbottomwidth 1, 223 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 224 }, 225 list text { 226 fontsize 15, 227 }, 228 });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 doquerybyname = async function () promise\<boolean> { 16 // create our parse query instance so methods can be chained 17 // reading parse objects is done by using parse query 18 const parsequery parse query = new parse query('profile'); 19&#x9; 20 // `contains` is a basic query method that checks if string field 21 // contains a specific substring 22 parsequery contains('name', 'adam'); 23&#x9; 24 try { 25 let profiles \[parse object] = await parsequery find(); 26 setqueryresults(profiles); 27 return true; 28 } catch (error) { 29 // error can be caused by lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 } 33 }; 34&#x9; 35 const doquerybyfriendcount = async function () promise\<boolean> { 36 // create our parse query instance so methods can be chained 37 // reading parse objects is done by using parse query 38 const parsequery parse query = new parse query('profile'); 39&#x9; 40 // `greaterthan` is a basic query method that does what it 41 // says on the tin 42 parsequery greaterthan('friendcount', 20); 43&#x9; 44 try { 45 let profiles \[parse object] = await parsequery find(); 46 setqueryresults(profiles); 47 return true; 48 } catch (error) { 49 // error can be caused by lack of internet connection 50 alert alert('error!', error message); 51 return false; 52 } 53 }; 54&#x9; 55 const doquerybyordering = async function () promise\<boolean> { 56 // create our parse query instance so methods can be chained 57 // reading parse objects is done by using parse query 58 const parsequery parse query = new parse query('profile'); 59&#x9; 60 // `descending` and `ascending` can and should be chained 61 // with other query methods to improve your queries 62 parsequery descending('birthday'); 63&#x9; 64 try { 65 let profiles \[parse object] = await parsequery find(); 66 setqueryresults(profiles); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const doquerybyall = async function () promise\<boolean> { 76 // create our parse query instance so methods can be chained 77 // reading parse objects is done by using parse query 78 const parsequery parse query = new parse query('profile'); 79&#x9; 80 parsequery contains('name', 'adam'); 81 parsequery greaterthan('friendcount', 20); 82 parsequery descending('birthday'); 83&#x9; 84 try { 85 let profiles \[parse object] = await parsequery find(); 86 setqueryresults(profiles); 87 return true; 88 } catch (error) { 89 // error can be caused by lack of internet connection 90 alert alert('error!', error message); 91 return false; 92 } 93 }; 94&#x9; 95 const clearqueryresults = async function () promise\<boolean> { 96 setqueryresults(null); 97 return true; 98 }; 99&#x9; 100 return ( 101 <> 102 \<view style={styles header}> 103 \<image 104 style={styles header logo} 105 source={ { 106 uri 107 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 108 } } 109 /> 110 \<papertext style={styles header text}> 111 \<papertext style={styles header text bold}> 112 {'react native on back4app '} 113 \</papertext> 114 {' basic queries'} 115 \</papertext> 116 \</view> 117 \<scrollview style={styles wrapper}> 118 \<view> 119 \<title>{'result list'}\</title> 120 {/ book list /} 121 {queryresults !== null && 122 queryresults !== undefined && 123 queryresults map((profile parse object) => ( 124 \<list item 125 key={profile id} 126 title={profile get('name')} 127 description={`friend count ${profile get( 128 'friendcount', 129 )}, birthday ${profile get('birthday')}`} 130 titlestyle={styles list text} 131 style={styles list item} 132 /> 133 ))} 134 {queryresults === null || 135 queryresults === undefined || 136 (queryresults !== null && 137 queryresults !== undefined && 138 queryresults length <= 0) ? ( 139 \<papertext>{'no results here!'}\</papertext> 140 ) null} 141 \</view> 142 \<view> 143 \<title>{'query buttons'}\</title> 144 \<paperbutton 145 onpress={() => doquerybyname()} 146 mode="contained" 147 icon="search web" 148 color={'#208aec'} 149 style={styles list button}> 150 {'query by name'} 151 \</paperbutton> 152 \<paperbutton 153 onpress={() => doquerybyfriendcount()} 154 mode="contained" 155 icon="search web" 156 color={'#208aec'} 157 style={styles list button}> 158 {'query by friend count'} 159 \</paperbutton> 160 \<paperbutton 161 onpress={() => doquerybyordering()} 162 mode="contained" 163 icon="search web" 164 color={'#208aec'} 165 style={styles list button}> 166 {'query by ordering'} 167 \</paperbutton> 168 \<paperbutton 169 onpress={() => doquerybyall()} 170 mode="contained" 171 icon="search web" 172 color={'#208aec'} 173 style={styles list button}> 174 {'query by all'} 175 \</paperbutton> 176 \<paperbutton 177 onpress={() => clearqueryresults()} 178 mode="contained" 179 icon="delete" 180 color={'#208aec'} 181 style={styles list button}> 182 {'clear results'} 183 \</paperbutton> 184 \</view> 185 \</scrollview> 186 \</> 187 ); 188 }; 189&#x9; 190 // these define the screen component styles 191 const styles = stylesheet create({ 192 header { 193 alignitems 'center', 194 paddingtop 30, 195 paddingbottom 50, 196 backgroundcolor '#208aec', 197 }, 198 header logo { 199 height 50, 200 width 220, 201 resizemode 'contain', 202 }, 203 header text { 204 margintop 15, 205 color '#f0f0f0', 206 fontsize 16, 207 }, 208 header text bold { 209 color '#fff', 210 fontweight 'bold', 211 }, 212 wrapper { 213 width '90%', 214 alignself 'center', 215 }, 216 list button { 217 margintop 6, 218 marginleft 15, 219 height 40, 220 }, 221 list item { 222 borderbottomwidth 1, 223 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 224 }, 225 list text { 226 fontsize 15, 227 }, 228 }); voici à quoi le composant devrait ressembler après le rendu et la requête par toutes les fonctions de requête conclusion à la fin de ce guide, vous avez appris comment fonctionnent les requêtes de données de base sur parse et comment les effectuer sur back4app depuis une application react native dans le prochain guide, vous explorerez le parse query parse query potentiel complet en utilisant toutes les méthodes disponibles sur cette classe