Some React Native apps need to directly manage your application users or at least be able to list a specific subset of them. Parse has powerful querying tools and they can also be used for your users in your social media app, for example.
In this guide, you’ll learn how to use Parse.Query to perform realistic user querying in your React Native App using Parse JS SDK.
To build a user querying feature using Parse for a React Native App.
1 - Understanding the Parse.Query class
Any Parse query operation uses the Parse.Query object type, which will help you retrieve specific data from your database throughout your app. It is crucial to know that a Parse.Query will only resolve after calling a retrieve method (like Parse.Query.find or Parse.Query.get), so a query can be set up and several modifiers can be chained before actually being called.
To create a new Parse.Query, you need to pass as a parameter the desired Parse.Object subclass, which is the one that will contain your query results. An example for this guide use-case (Parse.User) can be seen below.
JavaScript
TypeScript
1// This will create your query2const parseQuery =newParse.Query(Parse.User);3// The query will resolve only after calling this method5const queryResult =await parseQuery.find();
Let’s now take a look at some relevant queries that you may need to perform when managing or displaying users in your app. First of all, let’s perform a text search query, searching for users whose usernames contain the search value.
JavaScript
TypeScript
1constdoUserQuery=asyncfunction():Promise<Boolean>{2// This value comes from a state variable3const usernameSearchValue:string= usernameSearch;4// This will create your user query5const parseQuery: Parse.Query =newParse.Query(Parse.User);6// Several query functions can be set to your Parse,Query, they will7// only resolve when calling "find", for example8if(usernameSearchValue !==''){9// "contains" will retrieve users whose username contain the searched value, case-sensitive10 parseQuery.contains('username', usernameSearchValue);11// 12// or 13// 14// for case-insensitive string search, use "matches", that will take into account15// an regexp for matching, in this case use only "i", which is the regexp modifier16// for case-insensitive17 parseQuery.matches('username', usernameSearchValue,'i');18}19// Only after calling "find" all query conditions will resolve20returnawait parseQuery
21.find()22.then(async(queriedUsers:[Parse.User])=>{23// Set the query results to an state variable to retrieve it on your JSX24// Be aware that empty or invalid queries return as an empty array25setQueryResults(queriedUsers);26returntrue;27})28.catch((error: object)=>{29// Error can be caused by lack of Internet connection, but in most30// cases "find" will return as an empty array on "then"31 Alert.alert('Error!', error.message);32setQueryResults([]);33returnfalse;34});35};
Note that that are at least two different ways to search for a string, each one having its specific applications and advantages. In most cases, you will want to use Parse.Query.matches to ensure case-insensitive results and avoid unexpected behavior in your code.
After performing this query, your user list on your app should be showing something like this:
In addition to string querying, you can also perform “exact” queries, when you want to retrieve objects that contain an exact value, just as with boolean fields. The next example will show how to retrieve users that are verified by email, through the emailVerified field.
JavaScript
TypeScript
1constdoUserQuery=asyncfunction(){2// This value comes from a state variable3constshowOnlyVerifiedValue: boolean = showOnlyVerified;4// This will create your user query5const parseQuery =newParse.Query(Parse.User);6// Several query functions can be set to your Parse,Query, they will7// only resolve when calling "find", for example8if(showOnlyVerifiedValue ===true){9// "equalTo" will retrieve users whose "emailVerified" value is exactly "true"10 parseQuery.equalTo('emailVerified',true);11}12// Only after calling "find" all query conditions will resolve13returnawait parseQuery
14.find()15.then(async(queriedUsers)=>{16// Set the query results to an state variable to retrieve it on your JSX17// Be aware that empty or invalid queries return as an empty array18setQueryResults(queriedUsers);19returntrue;20})21.catch((error)=>{22// Error can be caused by lack of Internet connection, but in most23// cases "find" will return as an empty array on "then"24 Alert.alert('Error!', error.message);25setQueryResults([]);26returnfalse;27});28};
Your app should now be updating your user list like this:
Another common example would be to apply orderings to your query. This can be done in two ways, either by using Parse.Query.ascending/Parse.Query.descending or Parse.Query.addAscending/Parse.Query.addDescending. The first case will override any other ordering and will be the only one that the query will take and the latter will concatenate with existing orderings, making multiple orderings possible.
JavaScript
TypeScript
1constdoUserQuery=asyncfunction(){2// This value comes from a state variable3const orderByValue = orderBy;4// This will create your user query5const parseQuery =newParse.Query(Parse.User);6// Several query functions can be set to your Parse,Query, they will7// only resolve when calling "find", for example8// For list ordering, you can use "addAscending" or "addDescending", passing as parameter9// which object field should be the one to order by10// Note that "usernameAsc", "usernameDesc" and so on are made up string values applied to a filter in11// our example app, so change it by what is suitable to you12if(orderByValue ==='usernameAsc'){13 parseQuery.ascending('username');14//15// or16//17 parseQuery.addAscending('username');18}elseif(orderByValue ==='usernameDesc'){19 parseQuery.descending('username');20//21// or22//23 parseQuery.addDescending('username');24}elseif(orderByValue ==='dateAsc'){25 parseQuery.ascending('createdAt');26//27// or28//29 parseQuery.addAscending('createdAt');30}elseif(orderByValue ==='dateDesc'){31 parseQuery.descending('createdAt');32//33// or34//35 parseQuery.addDescending('createdAt');36}37// Only after calling "find" all query conditions will resolve38returnawait parseQuery
39.find()40.then(async(queriedUsers)=>{41// Set the query results to an state variable to retrieve it on your JSX42// Be aware that empty or invalid queries return as an empty array43setQueryResults(queriedUsers);44returntrue;45})46.catch((error)=>{47// Error can be caused by lack of Internet connection, but in most48// cases "find" will return as an empty array on "then"49 Alert.alert('Error!', error.message);50setQueryResults([]);51returnfalse;52});53};
Your app must now be ordering your queries like this:
Remember that all of the query constraints mentioned above can be chained and performed in a single query, improving your app usability for creating different filters and orderings that will work altogether. Here is the full code presenting all the query methods used in this guide:
JavaScript
TypeScript
1constdoUserQuery=asyncfunction():Promise<Boolean>{2// This value comes from a state variable3const usernameSearchValue:string= usernameSearch;4const showOnlyVerifiedValue:boolean= showOnlyVerified;5const orderByValue:string= orderBy;6// This will create your user query7const parseQuery: Parse.Query =newParse.Query(Parse.User);8// Several query functions can be set to your Parse,Query, they will9// only resolve when calling "find", for example10if(usernameSearchValue !==''){11// "contains" will retrieve users whose username contain the searched value, case-sensitive12 parseQuery.contains('username', usernameSearchValue);13//14// or15//16// for case-insensitive string search, use "matches", that will take into account17// an regexp for matching, in this case use only "i", which is the regexp modifier18// for case-insensitive19 parseQuery.matches('username', usernameSearchValue,'i');20}21if(showOnlyVerifiedValue ===true){22// "equalTo" will retrieve users whose "emailVerified" value is exactly "true"23 parseQuery.equalTo('emailVerified',true);24}25// For list ordering, you can use "addAscending" or "addDescending", passing as parameter26// which object field should be the one to order by27if(orderByValue ==='usernameAsc'){28 parseQuery.ascending('username');29//30// or31//32 parseQuery.addAscending('username');33}elseif(orderByValue ==='usernameDesc'){34 parseQuery.descending('username');35//36// or37//38 parseQuery.addDescending('username');39}elseif(orderByValue ==='dateAsc'){40 parseQuery.ascending('createdAt');41//42// or43//44 parseQuery.addAscending('createdAt');45}elseif(orderByValue ==='dateDesc'){46 parseQuery.descending('createdAt');47//48// or49//50 parseQuery.addDescending('createdAt');51}52// Only after calling "find" all query conditions will resolve53returnawait parseQuery
54.find()55.then(async(queriedUsers:[Parse.User])=>{56// Set the query results to an state variable to retrieve it on your JSX57// Be aware that empty or invalid queries return as an empty array58setQueryResults(queriedUsers);59returntrue;60})61.catch((error: object)=>{62// Error can be caused by lack of Internet connection, but in most63// cases "find" will return as an empty array on "then"64 Alert.alert('Error!', error.message);65setQueryResults([]);66returnfalse;67});68};
Conclusion
At the end of this guide, you learned how to perform queries on Parse users on React Native. In the next guide, we will show you how to save and read data on Parse.