useParseQuery

getting started with the react hook for real time updates using parse introduction welcome to parse react native lib! in this guide, you’ll learn what the parse react lib is, how to install and start to use it on your react native project motivation the easiest way to integrate parse/back4app into your javascript based project is through the https //www npmjs com/package/parse this library works on multiple javascript environments such as nodejs, reactjs, vuejs, angularjs, react native, and gives you access to the back4app features parse react native’s goal is to make this experience even better for react native developers by delivering a light weight and easy to use layer that provides minimal configuration, code re usability, and native optimizations for android and ios using this package will ensure that items like setting up credentials, http requests, real time synchronization, offline first interaction are automatically available to your react native app the lib is written entirely in typescript, on top of https //www npmjs com/package/parse , and is currently on the alpha version in this initial guide, you will install and set up the @parse/react native library on your react native 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 prerequisites to complete this tutorial, you will need an https //www back4app com/docs/get started/new parse app on back4app follow the https //www back4app com/docs/platform/parse live query tutorial https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm or yarn installed https //www npmjs com/package/npx package runner installed 1 installation if you don’t have a react native application, then go ahead and create a new project with npx npx package runner using the following command line npx react native init startwithparsern install @parse/react native @parse/react native and its peer dependency parse parse in your react native application \# using yarn yarn add @parse/react native parse \# using npm npm install save @parse/react native parse 2 application setup to allow the app to connect to back4app servers securely, you must provide parse javascript sdk with app’s credentials 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); you can find your app id app id and javascript key javascript key credentials by opening your app dashboard dashboard at https //www back4app com/ and clicking on app settings app settings > core settings core settings , under server settings server settings your subdomain must be enabled at app settings app settings > core settings core settings > server url and live query server url and live query for more information, please check this guide https //www back4app com/docs/platform/parse live query 3 creating your first query next, you will build your first query and display it in your app the @parse/react native @parse/react native library exports a useparsequery useparsequery hook, so you don’t waste time looking into how to implement features like offline support, real time changes, and so on it takes a parse query parse query and returns an object with some props that you can use to access data returned by queries 1 // in your app js 2&#x9; 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6&#x9; 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13&#x9; 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25&#x9; 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29&#x9; 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } when passing a query to the hook, it will first look for cached results that it might have stored then, it creates a websocket connection to communicate with the back4app livequery server, which synchronizes automatically in other words, the offline first approach and real time changes are enabled by default to check the query state use the props props returned by the hook islive islive if true true , indicates the query have subscribed to realtime updates isloading isloading \ if true true , the query is fetching the results issyncing issyncing \ if true true , the query is getting updated results from back4app servers results results this is the data returned from the query count count indicates the number of objects that matched the query error error when something goes wrong with the query it returns an error reload reload reload your query results the useparsequery useparsequery accepts any parse query parse query and you can see the https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs with examples about parse queries 4 test the app hook now you should be able to run your react native app and see the results \# on android npx react native run android \# on ios npx react native run ios keep in mind that you should add some data to your back4app project to see some items in your app it’s done! at this point, you have installed @parse/react native @parse/react native on your project, configured the connections with back4app, and written your first query in the next guide, you will see one of the main features of this lib how to use it let’s continue to https //reactnavigation org/docs/1 x/hello react navigation to start writing some more queries