Intégration du Hook Parse React pour des mises à jour temps réel

9 min

commencer avec le hook parse react pour des mises à jour en temps réel utilisant parse introduction la manière la plus simple d'intégrer parse/back4app dans votre projet basé sur javascript est à travers le parse javascript sdk https //www npmjs com/package/parse cette bibliothèque fonctionne sur plusieurs environnements javascript tels que nodejs, reactjs, vuejs, angularjs, react native, et vous donne accès aux fonctionnalités de back4app l'objectif du hook parse react est d'améliorer encore cette expérience pour les développeurs reactjs en fournissant une couche légère et facile à utiliser qui offre une configuration minimale et une réutilisabilité du code utiliser ce package garantira que des éléments comme la configuration des identifiants, les requêtes http, la synchronisation en temps réel, et l'interaction hors ligne sont automatiquement disponibles pour votre application react la bibliothèque est entièrement écrite en typescript, sur le parse javascript sdk https //www npmjs com/package/parse , et est actuellement en version alpha dans ce guide initial, vous allez installer et configurer la \@parse/react\ bibliothèque sur votre projet react \@parse/react\ est actuellement en version alpha la bibliothèque est en phase de test, donc nous recommandons de procéder avec prudence vos retours sont très appréciés, n'hésitez pas à utiliser la bibliothèque et à nous envoyer vos questions et premières impressions en envoyant un email à community\@back4app com prérequis pour compléter ce tutoriel, vous aurez besoin de une application créée https //www back4app com/docs/get started/new parse app sur back4app; suivez le tutoriel activer live query https //www back4app com/docs/platform/parse live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou yarn installés; npx https //www npmjs com/package/npx exécuteur de package installé 1 installation installez \@parse/react\ et sa dépendance parente \parse \ dans votre application react \# utiliser yarn yarn add @parse/react parse \# utiliser npm npm install save @parse/react parse 2 configuration de l'application pour permettre à l'application de se connecter aux serveurs back4app de manière sécurisée, vous devez fournir au sdk javascript parse les identifiants de l'application dans votre \app js\ (ou \app tsx\ ) fichier n'oubliez pas d'utiliser votre sous domaine back4app créé lorsque vous avez activé votre application pour effectuer des requêtes en direct 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 ); notez que la \initializeparse\ méthode remplace la \parse initialize\ habituelle vous pouvez trouver votre \id d'app\ et \clé javascript\ en ouvrant votre app \tableau de bord \ à site web back4app https //www back4app com/ et en cliquant sur \paramètres principaux\ , sous \paramètres du serveur\ 3 créer votre première requête ensuite, vous allez construire votre première requête et l'afficher dans votre application la \@parse/react\ bibliothèque exporte un \useparsequery \ hook, donc vous n'avez pas besoin de perdre du temps à chercher comment implémenter des fonctionnalités comme le support hors ligne, les changements en temps réel, etc il prend un \parse query\ et renvoie un objet avec certaines propriétés que vous pouvez utiliser pour accéder aux données retournées par les requêtes 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 \loading \ 28 )} 29 {islive && ( 30 \live!\ 31 )} 32 {issyncing && ( 33 \syncing \ 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 \{count}\ 45 {error && ( 46 \{error message}\ 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } lors du passage d'une requête au hook, il recherchera d'abord les résultats mis en cache qu'il pourrait avoir stockés ensuite, il crée une connexion websocket pour communiquer avec le serveur livequery de back4app, qui se synchronise automatiquement en d'autres termes, l'approche hors ligne d'abord et les changements en temps réel sont activés par défaut pour vérifier l'état de la requête, utilisez les \props \ renvoyés par le hook \islive\ si \true\ , cela indique que la requête a souscrit à des mises à jour en temps réel \isloading\ si \true\ , la requête est en train de récupérer les résultats \issyncing\ si \true\ , la requête obtient des résultats mis à jour des serveurs back4app \results\ ce sont les données renvoyées par la requête \count\ indique le nombre d'objets qui ont correspondu à la requête \error\ lorsque quelque chose ne va pas avec la requête, elle renvoie une erreur \reload\ rechargez les résultats de votre requête vous pouvez voir la documentation complète https //github com/parse community/parse react/tree/master/packages/parse react pour plus de détails sur la façon de configurer et d'utiliser la \@parse/react\ bibliothèque 4 tester le hook de l'app maintenant, vous devriez être en mesure de lancer votre application react et de voir les résultats yarn start gardez à l'esprit que vous devez ajouter des données à votre projet back4app pour voir des éléments dans votre application c'est fait! à ce stade, vous avez installé \@parse/react\ sur votre projet, configuré les connexions avec back4app, et écrit votre première requête dans le prochain guide, vous verrez l'une des principales fonctionnalités de cette bibliothèque, comment l'utiliser en créant une application de chat en direct