Utilisation de useParseQuery pour mises à jour temps réel avec React

10 min

commencer avec le hook react pour des mises à jour en temps réel utilisant parse introduction bienvenue dans la bibliothèque parse react native ! dans ce guide, vous apprendrez ce qu'est la bibliothèque parse react, comment l'installer et commencer à l'utiliser dans votre projet react native motivation le moyen le 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 de parse react native est d'améliorer encore cette expérience pour les développeurs react native en fournissant une couche légère et facile à utiliser qui offre une configuration minimale, une réutilisabilité du code et des optimisations natives pour android et ios 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 native la bibliothèque est entièrement écrite en typescript, sur la base de 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 bibliothèque @parse/react native sur votre projet react native parse react native est actuellement en version alpha la bibliothèque est en phase de test, donc nous vous 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 si vous n'avez pas d'application react native, allez y et créez un nouveau projet avec \npx\ exécuteur de package en utilisant la ligne de commande suivante npx react native init startwithparsern installez \@parse/react native\ et sa dépendance de pair \parse\ dans votre application react native \# utiliser yarn yarn add @parse/react native parse \# utiliser npm npm install save @parse/react native 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 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); vous pouvez trouver votre \id de l'application\ et \clé javascript\ en ouvrant votre application \tableau de bord\ à site web back4app https //www back4app com/ et en cliquant sur \paramètres de l'application\ > \paramètres principaux\ , sous \paramètres du serveur\ votre sous domaine doit être activé à \paramètres de l'application\ > \paramètres principaux\ > \url du serveur et requête en direct\ pour plus d'informations, veuillez consulter ce guide ici https //www back4app com/docs/platform/parse live query 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 native\ bibliothèque exporte un \useparsequery\ hook, donc vous ne perdez pas de temps à chercher comment implémenter des fonctionnalités comme le support hors ligne, les changements en temps réel, etc il faut 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 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 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	 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	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 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 } lors de la transmission 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 back4app livequery, qui se synchronise automatiquement en d'autres termes, l'approche hors ligne par défaut 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\ retournés par le hook \islive\ si \true\ , 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\ voici les données retourné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 retourne une erreur \reload\ rechargez les résultats de votre requête le \useparsequery\ accepte n'importe quel \parse query\ , et vous pouvez voir la documentation complète https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs avec des exemples sur les requêtes parse 4 tester le hook de l'app maintenant, vous devriez être en mesure d'exécuter votre application react native et de voir les résultats \# sur android npx react native run android \# sur ios npx react native run ios 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 native\ dans 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 continuons vers “changements en temps réel” https //reactnavigation org/docs/1 x/hello react navigation pour commencer à écrire quelques requêtes supplémentaires