Validators

10min
Using Cloud Function validators in a React Native App
Introduction
In this guide, you will learn how to use the Parse Cloud Code function validators and context usage from a React Native App. You will see examples of validators implemented in cloud functions, how to use context between different functions, and also check how to implement a React Native component using these improved functions in Back4App.
Prerequisites
To complete this tutorial, you will need:
A React Native App created and connected to Back4App.
Understand how to deploy a cloud function on Back4App.
If you want to run this guide’s example application, you should set up thereact-native-paper﻿library.
Goal
Run Parse Cloud Code functions with validators and context usage on Back4App from a React Native App.
- Understanding Cloud Code Functions Validators
Using Cloud Code functions in your application enables great flexibility in your code, making it possible to detach reusable methods from your app and to better control their behavior. You can check or review how to use them in our Cloud functions starter guide.
Data sent to these cloud functions must be validated to avoid unexpected errors, and Parse Cloud Code (starting from version 4.4.0) offers complete integrated validators, that can be passed as an object or even another function. These tests are called before executing any code inside your function, so you can always assume that data will be valid if the validators accept it.
Take the following cloud function as an example, in which the average of a certain movie rating is calculated. The movie name is required(movie), so you can use the following object to ensure it is passed. If the movie parameter is not passed, the function will return an error containing the message “Validation failed. Please specify data for the movie.”.
JS
Parse.Cloud.define('getMovieAverageRating', async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
},{
 fields : ['movie'],
});
Parse.Cloud.define('getMovieAverageRating', async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
},{
 fields : ['movie'],
});
﻿
You can also pass more advanced options to the validator, such as requiring that the user calling the function is authenticated using therequireUser flag. Another useful addition is to add a condition to validate a parameter value, such as the following, ensuring that the movie value is a string and at least 3 characters long.
JS
Parse.Cloud.define('getMovieAverageRating', async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
},{
 fields : {
   movie : {
     required: true,
     type: String,
     options: val => {
       return val.length >= 3;
     },
     error: 'Movie must have at least 3 characters'
   }
 },
});
Parse.Cloud.define('getMovieAverageRating', async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
},{
 fields : {
   movie : {
     required: true,
     type: String,
     options: val => {
       return val.length >= 3;
     },
     error: 'Movie must have at least 3 characters'
   }
 },
});
﻿
The complete list of validation options can be seen on the Parse docs.
- Understanding Cloud Code Functions Context
When using Cloud Code (starting from version 4.3.0) save triggers in your application, you can pass a context dictionary in the Parse.Object.save method and also pass it from a beforeSave handler to an afterSave handler. This can be used to ensure data consistency or to perform any kind of asynchronous operation doable only after successfully saving your object.
Take the following cloud function trigger as an example, in which a Review object is saved and we want to differentiate whether the object save call was made from your application or the dashboard. This will be achieved by setting the context before saving the object in your app code like this:
JS
const Review = new Parse.Object('Review');
Review.set('text', 'Great movie!');
Review.set('rate', 5);
Review.set('movie', 'Mission Very Possible');

const context = { fromApplication: true };
const savedReview = await Review.save(null, {context: context});
const Review = new Parse.Object('Review');
Review.set('text', 'Great movie!');
Review.set('rate', 5);
Review.set('movie', 'Mission Very Possible');

const context = { fromApplication: true };
const savedReview = await Review.save(null, {context: context});
﻿
Here are the save trigger functions, note that the context object can be directly accessed from the request in both of them:
JS
Parse.Cloud.beforeSave('Review', async (request) => {
 // Try to get context
 try {
   const context = request.context;
   if (context.fromApplication === true) {
     // Set a flag in the object before saving
     request.object.set('fromApplication', true);
   }
 } catch(error){}

 const text = request.object.get('text');
 if (text.length > 20) {
   // Truncate and add a ...
   request.object.set('text', text.substring(0, 17) + '...');
 }
});

Parse.Cloud.afterSave('Review', async (request) => {
 // Try to get context
 try {
   const context = request.context;
   if (context.fromApplication === true) {
     // Do something when coming from application, like sending a notification or email
     console.log('Got context fromApplication when saving Review object');
   }
 } catch(error){}
});
Parse.Cloud.beforeSave('Review', async (request) => {
 // Try to get context
 try {
   const context = request.context;
   if (context.fromApplication === true) {
     // Set a flag in the object before saving
     request.object.set('fromApplication', true);
   }
 } catch(error){}

 const text = request.object.get('text');
 if (text.length > 20) {
   // Truncate and add a ...
   request.object.set('text', text.substring(0, 17) + '...');
 }
});

Parse.Cloud.afterSave('Review', async (request) => {
 // Try to get context
 try {
   const context = request.context;
   if (context.fromApplication === true) {
     // Do something when coming from application, like sending a notification or email
     console.log('Got context fromApplication when saving Review object');
   }
 } catch(error){}
});
﻿
- Using Validated Cloud Code from a React Native component
Let’s now use the same component example from the last guide as a base and add some changes to highlight the functions now using validators and context. Remember to deploy the cloud functions shown in Steps 1 and 2 and, after that, change the “Review” object creation function to the following, with the addition of the context argument in the save method:
JavaScript
TypeScript
const createReview = async function () {
 try {
   // This values come from state variables linked to
   // the screen form fields
   const reviewTextValue = reviewText;
   const reviewRateValue = Number(reviewRate);

   // Creates a new parse object instance
   let Review = new Parse.Object('Review');

   // Set data to parse object
   // Simple title field
   Review.set('text', reviewTextValue);

   // Simple number field
   Review.set('rate', reviewRateValue);

   // Set default movie
   Review.set('movie', 'Mission Very Possible');

   // After setting the values, save it on the server
   try {
     // Add 
     const context = {fromApplication: true};
     await Review.save(null, {context: context});
     // Success
     Alert.alert('Success!');
     // Updates query result list
     doReviewQuery();
     runGetMovieAverageRating();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 } catch (error) {
   // Error can be caused by lack of field values
   Alert.alert('Error!', error.message);
   return false;
 }
};
const createReview = async function () {
 try {
   // This values come from state variables linked to
   // the screen form fields
   const reviewTextValue = reviewText;
   const reviewRateValue = Number(reviewRate);

   // Creates a new parse object instance
   let Review = new Parse.Object('Review');

   // Set data to parse object
   // Simple title field
   Review.set('text', reviewTextValue);

   // Simple number field
   Review.set('rate', reviewRateValue);

   // Set default movie
   Review.set('movie', 'Mission Very Possible');

   // After setting the values, save it on the server
   try {
     // Add 
     const context = {fromApplication: true};
     await Review.save(null, {context: context});
     // Success
     Alert.alert('Success!');
     // Updates query result list
     doReviewQuery();
     runGetMovieAverageRating();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 } catch (error) {
   // Error can be caused by lack of field values
   Alert.alert('Error!', error.message);
   return false;
 }
};
﻿
To highlight the movie average calculation function validator, add a new function querying a movie called “Me” and add another button calling it. Remember that our validator will make the request fail because of the movie name length. Here is the new function code:
JavaScript
TypeScript
const createReview = async function () {
 try {
   // This values come from state variables linked to
   // the screen form fields
   const reviewTextValue = reviewText;
   const reviewRateValue = Number(reviewRate);

   // Creates a new parse object instance
   let Review = new Parse.Object('Review');

   // Set data to parse object
   // Simple title field
   Review.set('text', reviewTextValue);

   // Simple number field
   Review.set('rate', reviewRateValue);

   // Set default movie
   Review.set('movie', 'Mission Very Possible');

   // After setting the values, save it on the server
   try {
     // Add 
     const context = {fromApplication: true};
     await Review.save(null, {context: context});
     // Success
     Alert.alert('Success!');
     // Updates query result list
     doReviewQuery();
     runGetMovieAverageRating();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 } catch (error) {
   // Error can be caused by lack of field values
   Alert.alert('Error!', error.message);
   return false;
 }
};
const createReview = async function () {
 try {
   // This values come from state variables linked to
   // the screen form fields
   const reviewTextValue = reviewText;
   const reviewRateValue = Number(reviewRate);

   // Creates a new parse object instance
   let Review = new Parse.Object('Review');

   // Set data to parse object
   // Simple title field
   Review.set('text', reviewTextValue);

   // Simple number field
   Review.set('rate', reviewRateValue);

   // Set default movie
   Review.set('movie', 'Mission Very Possible');

   // After setting the values, save it on the server
   try {
     // Add 
     const context = {fromApplication: true};
     await Review.save(null, {context: context});
     // Success
     Alert.alert('Success!');
     // Updates query result list
     doReviewQuery();
     runGetMovieAverageRating();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 } catch (error) {
   // Error can be caused by lack of field values
   Alert.alert('Error!', error.message);
   return false;
 }
};
﻿
This is how the new full component code is laid out, note that there is a new line in the listing item’s title showing if the Review was created from the application or not:
﻿
JavaScript
TypeScript
import React, {FC, ReactElement, useState} from 'react';
import {Alert, Image, View, ScrollView, StyleSheet} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 TextInput as PaperTextInput,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const MovieRatings: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);
 const [ratingsAverage, setRatingsAverage] = useState('');
 const [reviewText, setReviewText] = useState('');
 const [reviewRate, setReviewRate] = useState('');

 const runGetMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Mission Very Possible',
     };
     let resultObject: {result: number} = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     // Set query results to state variable using state hook
     setRatingsAverage(resultObject.result.toFixed(1));
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert(
       'Error!',
       'Make sure that the cloud function is deployed and that the Review class table is created',
     );
     return false;
   }
 };

 const runGetMeMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Me',
     };
     let resultObject: object = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert('Error!', JSON.stringify(error.message));
     return false;
   }
 };

 const doReviewQuery = async function (): Promise<boolean> {
   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('Review');
   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const createReview = async function (): Promise<boolean> {
   try {
     // This values come from state variables linked to
     // the screen form fields
     const reviewTextValue: string = reviewText;
     const reviewRateValue: number = Number(reviewRate);

     // Creates a new parse object instance
     let Review: Parse.Object = new Parse.Object('Review');

     // Set data to parse object
     // Simple title field
     Review.set('text', reviewTextValue);

     // Simple number field
     Review.set('rate', reviewRateValue);

     // Set default movie
     Review.set('movie', 'Mission Very Possible');

     // After setting the values, save it on the server
     try {
       const context = {fromApplication: true};
       await Review.save(null, {context: context});
       // Success
       Alert.alert('Success!');
       // Updates query result list
       doReviewQuery();
       runGetMovieAverageRating();
       return true;
     } catch (error) {
       // Error can be caused by lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     }
   } catch (error) {
     // Error can be caused by lack of field values
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Cloud Code Movie Ratings'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Mission Very Possible Reviews'}</Title>
         <PaperText>{`Ratings Average: ${ratingsAverage}`}</PaperText>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={`Review text: ${result.get('text')}`}
               description={`Rate: ${result.get('rate')}\nFrom app: ${
                 result.get('fromApplication') !== undefined ? 'Yes' : 'No'
               }`}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>Action Buttons</Title>
         <PaperButton
           onPress={() => runGetMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => runGetMeMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Me Movie Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => doReviewQuery()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Reviews'}
         </PaperButton>
       </View>
       <View>
         <Title>Add new review</Title>
         <PaperTextInput
           value={reviewText}
           onChangeText={text => setReviewText(text)}
           label="Text"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperTextInput
           value={reviewRate}
           onChangeText={text => setReviewRate(text)}
           keyboardType={'number-pad'}
           label="Rate (1-5)"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperButton
           onPress={() => createReview()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Add'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
import React, {FC, ReactElement, useState} from 'react';
import {Alert, Image, View, ScrollView, StyleSheet} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 TextInput as PaperTextInput,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const MovieRatings: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);
 const [ratingsAverage, setRatingsAverage] = useState('');
 const [reviewText, setReviewText] = useState('');
 const [reviewRate, setReviewRate] = useState('');

 const runGetMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Mission Very Possible',
     };
     let resultObject: {result: number} = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     // Set query results to state variable using state hook
     setRatingsAverage(resultObject.result.toFixed(1));
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert(
       'Error!',
       'Make sure that the cloud function is deployed and that the Review class table is created',
     );
     return false;
   }
 };

 const runGetMeMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Me',
     };
     let resultObject: object = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert('Error!', JSON.stringify(error.message));
     return false;
   }
 };

 const doReviewQuery = async function (): Promise<boolean> {
   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('Review');
   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const createReview = async function (): Promise<boolean> {
   try {
     // This values come from state variables linked to
     // the screen form fields
     const reviewTextValue: string = reviewText;
     const reviewRateValue: number = Number(reviewRate);

     // Creates a new parse object instance
     let Review: Parse.Object = new Parse.Object('Review');

     // Set data to parse object
     // Simple title field
     Review.set('text', reviewTextValue);

     // Simple number field
     Review.set('rate', reviewRateValue);

     // Set default movie
     Review.set('movie', 'Mission Very Possible');

     // After setting the values, save it on the server
     try {
       const context = {fromApplication: true};
       await Review.save(null, {context: context});
       // Success
       Alert.alert('Success!');
       // Updates query result list
       doReviewQuery();
       runGetMovieAverageRating();
       return true;
     } catch (error) {
       // Error can be caused by lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     }
   } catch (error) {
     // Error can be caused by lack of field values
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Cloud Code Movie Ratings'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Mission Very Possible Reviews'}</Title>
         <PaperText>{`Ratings Average: ${ratingsAverage}`}</PaperText>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={`Review text: ${result.get('text')}`}
               description={`Rate: ${result.get('rate')}\nFrom app: ${
                 result.get('fromApplication') !== undefined ? 'Yes' : 'No'
               }`}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>Action Buttons</Title>
         <PaperButton
           onPress={() => runGetMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => runGetMeMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Me Movie Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => doReviewQuery()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Reviews'}
         </PaperButton>
       </View>
       <View>
         <Title>Add new review</Title>
         <PaperTextInput
           value={reviewText}
           onChangeText={text => setReviewText(text)}
           label="Text"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperTextInput
           value={reviewRate}
           onChangeText={text => setReviewRate(text)}
           keyboardType={'number-pad'}
           label="Rate (1-5)"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperButton
           onPress={() => createReview()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Add'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
﻿
This is how the component should look like after rendering and querying by one of the query functions:
﻿
Conclusion
At the end of this guide, you learned how to use Parse Cloud Code function validators and context. In the next guide, you will learn how to work with Users in Parse.
Updated 29 Mar 2024
Did this page help you?
Triggers
OTP Auth
Validators

Using Cloud Function validators in a React Native App

Introduction

Prerequisites

Goal

1 - Understanding Cloud Code Functions Validators

2 - Understanding Cloud Code Functions Context

3 - Using Validated Cloud Code from a React Native component

Conclusion
