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

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 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 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 https //www back4app com/docs/get started/new parse app sur back4app suivez le https //www back4app com/docs/platform/parse live query https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou yarn installés 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 npx exécuteur de package en utilisant la ligne de commande suivante npx react native init startwithparsern installez @parse/react native @parse/react native et sa dépendance de pair parse 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&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); vous pouvez trouver votre id de l'application id de l'application et clé javascript clé javascript en ouvrant votre application tableau de bord tableau de bord à https //www back4app com/ et en cliquant sur paramètres de l'application paramètres de l'application > paramètres principaux paramètres principaux , sous paramètres du serveur paramètres du serveur votre sous domaine doit être activé à paramètres de l'application paramètres de l'application > paramètres principaux paramètres principaux > url du serveur et requête en direct url du serveur et requête en direct pour plus d'informations, veuillez consulter ce guide 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 @parse/react native bibliothèque exporte un useparsequery 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 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&#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 } 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 props retournés par le hook islive islive si true true , indique que la requête a souscrit à des mises à jour en temps réel isloading isloading si true true , la requête est en train de récupérer les résultats issyncing issyncing si true true , la requête obtient des résultats mis à jour des serveurs back4app results results voici les données retournées par la requête count count indique le nombre d'objets qui ont correspondu à la requête error error lorsque quelque chose ne va pas avec la requête, elle retourne une erreur reload reload rechargez les résultats de votre requête le useparsequery useparsequery accepte n'importe quel parse query parse query , et vous pouvez voir la 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 @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 https //reactnavigation org/docs/1 x/hello react navigation pour commencer à écrire quelques requêtes supplémentaires