Usage

using the useparsequery hook to build a real time react native app introduction in this guide, you will explore the main features of @parse/react native @parse/react native lib using a todo react native app example you will use the useparsequery useparsequery hook to query tasks in real time and store results locally on this app using various parse queries, you will discover how to use the new parse lib on your project parse react native is currently on the alpha version the lib is under testing, so we recommend to proceed with caution your feedback is very appreciated, so feel free to use the lib and send us your questions and first impressions by dropping an email to community\@back4app com goal explore the main use cases for the parse react native lib by creating a todo app prerequisites to complete this tutorial, you will need an app created on back4app follow the https //www back4app com/docs/platform/parse live query tutorial note follow the https //www back4app com/docs/react native/parse sdk/real time/react hook real time to learn how to get started with @parse/react native 1 setup the initial project before getting started, you will need to get the bootstrap react native project that we have setup as a starting point for this tutorial it is a simple react native init react native init project with all dependencies and styles pre defined for you to focus on exploring @parse/react native @parse/react native features you may https //github com/templates back4app/react native todo app/archive/main zip or clone the project git clone https //github com/templates back4app/react native todo app git next, install the project dependencies cd react native todo app \# using yarn yarn install \# using npm npm install for ios, install pods cd ios && npx pod install in the previous guide, https //www back4app com/docs/react native/parse react native sdk/getting started , you learned how to use initializeparse initializeparse to enable connection with back4app servers set up your app id app id and javascriptkey javascriptkey in the entry point component located at src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); go ahead and run the project \# for ios npx react native run ios \# for android npx react native run android after that you will have successfully setup the starter project and the app will look like the following the project’s directory structure react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // card button item component │ │ └── menu/ │ │ └── index js // menu with card buttons │ │ └── tasklist/ │ │ └── index js // list of tasks component │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // add todo page │ │ └── learning/ │ │ └── index js // learning page │ │ └── main/ │ │ └── index js // main page │ │ └── shopping/ │ │ └── index js // shopping page │ │ └── work/ │ │ └── index js // work page │ ├── services/ │ │ └── api js │ ├── index js // app entrypoint │ └── routes js // navigation routes config ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md the initial project have main 4 pages learning page shows tasks that belongs to the learning category shopping page shows tasks that belongs to the shopping category work page shows tasks that belongs to the work category addtodo page basic form to create a new task 2 creating a new task a commom feature in a todo app is allowing users to create new tasks for that, the create task function will use the parse javascript sdk to create a new parse object and save it on back4app on the addtodo addtodo page from the starter project, you will have a basic form with an input to insert the task description, some check boxes to select the task category and a submit button in this tutorial, you will create parse object parse object for the tasks which will have the following attributes look at the parse javascript sdk https //www back4app com/docs/react native/parse sdk/react native save data guide for more info on creating parse objects 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } now implement the method to create a task when the user clicks on submit at the pages/addtodo/index js pages/addtodo/index js component, let’s implement the handlesubmit handlesubmit method 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11&#x9; 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } after that, you will now be able to create some tasks feel free to create as many tasks as you want in the next steps you will be querying them 3 querying & filtering tasks now that you have created some tasks, it is time to use parse react native lib you will write some queries and pass them to useparsequery useparsequery hook the queries will list all the non completed tasks in the learning category this is the first use case of the hook, you will build a one time fetch query, by setting enablelivequery\ false enablelivequery\ false , that runs when the learning page component renders the enablelivequery enablelivequery is true true by default, and changing to false false will disable the real time changes subscription on the pages/learning/index js pages/learning/index js component, let’s write our parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); pass the query as argument to the useparsequery useparsequery hook const {results} = useparsequery(query, {enablelivequery false}); the above code shows a basic use for the parse hook the useparsequery hook is a new resource that you can use with any parse query use https //docs parseplatform org/js/guide/#queries to retrieve your data objects and the hook will make this experience even better after getting the results, pass them down to the tasklist component to display tasks on the app 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7&#x9; 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 23 export default learning; your app should successfuly show the list of tasks like this 4 realtime changes the second usage you are going to explore is real time updates the useparsequery useparsequery hook encapsulates the parse live query and provides out of the box support for real time changes when passing a query to the hook, it creates a websocket connection to communicate with the back4app livequery server, which synchronizes automatically you will add this feature to the tasks in the shopping category it is important to note that live query and back4app subdomain must be enabled on your back4app dashboard app once you do that, add your subdomain url to initializeparse initializeparse and the results from the parse react native hook will always have updated data if you do not configure the subdomain, useparsequery useparsequery hook will not be able to retrieve data in real time 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); on the pages/shopping/index js pages/shopping/index js component, let’s write our parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); then, pass the query as argument to the useparsequery useparsequery hook const {results, isloading, issyncing} = useparsequery(query); note that there is no need for extra parameters since the real time changes is enabled by default after getting the results, pass them down to the tasklist tasklist component to display tasks on the app 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6&#x9; 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 21 export default shopping; 5 offline support the third use case for @parse/react native @parse/react native is using offline caching of query results this is useful in case your react native app needs to work when users have network latency or internet connectivity issues offline support improves your react native apps responsiveness and user expirience the great news is that no extra steps are required! the offline first approach and real time subscriptions are enabled by default in short, simply using useparsequery useparsequery hook assures that your app will be caching query results for offline support combined with live query subscriptions for when your user goes back online 6 limiting & sorting queries suppose that the task list from the work category is too much for a person to handle and you want to show only a subset of them for the day also, order by date of creation on the pages/shopping/index js pages/shopping/index js component, let’s write our parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks then, pass the query as argument to the useparsequery useparsequery hook and pass them down to the tasklist tasklist component to display tasks on the app 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7&#x9; 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 26 export default work; 7 specifying useparsequery arguments you used @parse/react native @parse/react native to retrive data from back4app with features such live query in the previous steps therefore, an explanation of the interface exported is required the useparsequery useparsequery hook accepts a parse query parse query and an useparsequeryoptions useparsequeryoptions object as its arguments the default optional configuration object is the following 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery realtime live query feature is enabled by default enablelocaldatastore enables local caching of data results, default is true true but you can turn off by setting to false false initialload if you already have some data loaded in memory then you can set them to show a preview of the data to users it’s done! at this point, you’ve learned how to use the @parse/react native @parse/react native lib by creating a react native todo app on back4app