Echtzeit-Updates mit dem Parse React Hook

9 min

erste schritte mit dem parse react hook für echtzeit updates mit parse einführung der einfachste weg, parse/back4app in ihr javascript basiertes projekt zu integrieren, ist über das parse javascript sdk diese bibliothek funktioniert in mehreren javascript umgebungen wie nodejs, reactjs, vuejs, angularjs, react native und gibt ihnen zugriff auf die back4app funktionen das ziel des parse react hooks ist es, diese erfahrung für reactjs entwickler noch besser zu machen, indem eine leichtgewichtige und benutzerfreundliche schicht bereitgestellt wird, die minimale konfiguration und code wiederverwendbarkeit bietet die verwendung dieses pakets stellt sicher, dass dinge wie die einrichtung von anmeldeinformationen, http anfragen, echtzeitsynchronisation und offline interaktion automatisch für ihre react app verfügbar sind die bibliothek ist vollständig in typescript geschrieben, basierend auf parse javascript sdk , und befindet sich derzeit in der alpha version in diesem ersten leitfaden installieren und richten sie die @parse/react @parse/react bibliothek in ihrem react projekt ein @parse/react @parse/react befindet sich derzeit in der alpha version die bibliothek wird getestet, daher empfehlen wir, vorsichtig vorzugehen ihr feedback ist sehr geschätzt, also zögern sie nicht, die bibliothek zu verwenden und uns ihre fragen und ersten eindrücke per e mail an community\@back4app com zu senden voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine erstellte app auf back4app; befolgen sie das aktivieren sie live query tutorial npm oder yarn installiert; npx paket runner installiert 1 installation installieren sie @parse/react @parse/react und seine peer abhängigkeit parse parse in ihrer react anwendung 2 anwendungssetup um der app eine sichere verbindung zu den back4app servern zu ermöglichen, müssen sie dem parse javascript sdk die anmeldeinformationen der app in ihrer app js app js (oder app tsx app tsx ) datei bereitstellen denken sie daran, ihre back4app subdomain zu verwenden, die sie erstellt haben, als sie ihre app für live abfragen aktiviert haben app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); beachten sie, dass die initializeparse initializeparse methode die übliche parse initialize parse initialize ersetzt sie können ihre app id app id und javascript key javascript key anmeldeinformationen finden, indem sie ihre app dashboard dashboard unter back4app website https //www back4app com/ öffnen und auf core settings core settings , unter server settings server settings klicken 3 erstellen sie ihre erste abfrage als nächstes werden sie ihre erste abfrage erstellen und in ihrer app anzeigen die @parse/react @parse/react bibliothek exportiert einen useparsequery useparsequery hook, sodass sie keine zeit damit verschwenden müssen, herauszufinden, wie sie funktionen wie offline unterstützung, echtzeitänderungen usw implementieren es benötigt eine parse query parse query und gibt ein objekt mit einigen eigenschaften zurück, die sie verwenden können, um auf die von abfragen zurückgegebenen daten zuzugreifen app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 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	 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 } wenn sie eine abfrage an den hook übergeben, sucht er zunächst nach zwischengespeicherten ergebnissen, die er möglicherweise gespeichert hat dann wird eine websocket verbindung hergestellt, um mit dem back4app livequery server zu kommunizieren, der automatisch synchronisiert mit anderen worten, der offline first ansatz und echtzeitänderungen sind standardmäßig aktiviert um den abfragezustand zu überprüfen, verwenden sie die props props die vom hook zurückgegeben werden islive islive wenn true true , zeigt an, dass die abfrage echtzeit updates abonniert hat isloading isloading wenn true true , wird die abfrage gerade die ergebnisse abgerufen issyncing issyncing wenn true true , wird die abfrage mit aktualisierten ergebnissen von den back4app servern versorgt results results dies sind die von der abfrage zurückgegebenen daten count count gibt die anzahl der objekte an, die mit der abfrage übereinstimmen error error wenn etwas mit der abfrage schiefgeht, wird ein fehler zurückgegeben reload reload laden sie ihre abfrageergebnisse neu sie können die vollständige dokumentation für weitere details zur einrichtung und nutzung der @parse/react @parse/react bibliothek 4 testen sie den app hook jetzt sollten sie in der lage sein, ihre react app auszuführen und die ergebnisse zu sehen denken sie daran, dass sie einige daten zu ihrem back4app projekt hinzufügen sollten, um einige elemente in ihrer app zu sehen es ist erledigt! an diesem punkt haben sie @parse/react @parse/react in ihrem projekt installiert, die verbindungen mit back4app konfiguriert und ihre erste abfrage geschrieben im nächsten leitfaden werden sie eine der hauptfunktionen dieser bibliothek sehen, wie man sie verwendet, indem man eine beispiel chat app erstellt