useParseQuery

getting started with the parse react hook for real time updates using parse introduction the easiest way to integrate parse/back4app into your javascript based project is through the parse javascript sdk 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’s hook goal is to make this experience even better for reactjs developers by delivering a light weight and easy to use layer that provides minimal configuration and code re usability 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 app the lib is written entirely in typescript, on top of parse javascript sdk , and is currently on the alpha version in this initial guide, you will install and set up the @parse/react @parse/react library on your react project @parse/react @parse/react 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 app created on back4app; follow the enable live query tutorial npm or yarn installed; npx package runner installed 1 installation install @parse/react @parse/react and its peer dependency parse parse in your react application 2 application setup to allow the app to connect to back4app servers securely, you must provide parse javascript sdk with app’s credentials in your app js app js (or app tsx app tsx ) file remember to use your back4app subdomain created when you enabled you app to perform live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); note that the initializeparse initializeparse method replaces the usual parse initialize parse initialize one you can find your app id app id and javascript key javascript key credentials by opening your app dashboard dashboard at back4app website https //www back4app com/ and clicking on core settings core settings , under server settings server settings 3 creating your first query next, you will build your first query and display it in your app the @parse/react @parse/react library exports a useparsequery useparsequery hook, so you don’t need to 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 app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23&#x9; 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } 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 you can see the full documentation for more details on how to set up and use the @parse/react @parse/react library 4 test the app hook now you should be able to run your react app and see the results 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 @parse/react 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 by creating a sample live chat app