Guía del Hook @parse/react para Actualizaciones en Tiempo Real

comenzando con el gancho de parse react para actualizaciones en tiempo real usando parse introducción la forma más fácil de integrar parse/back4app en tu proyecto basado en javascript es a través del parse javascript sdk esta biblioteca funciona en múltiples entornos de javascript como nodejs, reactjs, vuejs, angularjs, react native, y te da acceso a las características de back4app el objetivo del gancho de parse react es hacer que esta experiencia sea aún mejor para los desarrolladores de reactjs al ofrecer una capa ligera y fácil de usar que proporciona una configuración mínima y reutilización de código usar este paquete asegurará que elementos como la configuración de credenciales, solicitudes http, sincronización en tiempo real, interacción offline first estén automáticamente disponibles para tu aplicación react la biblioteca está escrita completamente en typescript, sobre parse javascript sdk , y actualmente está en la versión alpha en esta guía inicial, instalarás y configurarás la @parse/react @parse/react biblioteca en tu proyecto react @parse/react @parse/react está actualmente en la versión alpha la biblioteca está en pruebas, por lo que recomendamos proceder con precaución tu retroalimentación es muy apreciada, así que siéntete libre de usar la biblioteca y enviarnos tus preguntas e impresiones iniciales enviando un correo a community\@back4app com requisitos previos para completar este tutorial, necesitarás una aplicación creada en back4app; sigue el tutorial de habilitar live query npm o yarn instalados; npx corredor de paquetes instalado 1 instalación instala @parse/react @parse/react y su dependencia par parse parse en tu aplicación react 2 configuración de la aplicación para permitir que la aplicación se conecte a los servidores de back4app de manera segura, debes proporcionar al sdk de javascript de parse las credenciales de la aplicación en tu app js app js (o app tsx app tsx ) archivo recuerda usar tu subdominio de back4app creado cuando habilitaste tu aplicación para realizar consultas en vivo 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 ); tenga en cuenta que el initializeparse initializeparse método reemplaza al habitual parse initialize parse initialize uno puede encontrar su id de la app id de la app y clave de javascript clave de javascript credenciales abriendo su app tablero tablero en sitio web de back4app https //www back4app com/ y haciendo clic en configuraciones principales configuraciones principales , bajo configuraciones del servidor configuraciones del servidor 3 creando su primera consulta a continuación, construirá su primera consulta y la mostrará en su app la @parse/react @parse/react biblioteca exporta un useparsequery useparsequery gancho, por lo que no necesita perder tiempo investigando cómo implementar características como soporte fuera de línea, cambios en tiempo real, etc toma un parse query parse query y devuelve un objeto con algunas propiedades que puede usar para acceder a los datos devueltos por las consultas 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 } al pasar una consulta al hook, primero buscará resultados en caché que pueda haber almacenado luego, crea una conexión websocket para comunicarse con el servidor livequery de back4app, que se sincroniza automáticamente en otras palabras, el enfoque de primero sin conexión y los cambios en tiempo real están habilitados por defecto para verificar el estado de la consulta, utiliza el props props devueltos por el hook islive islive si true true , indica que la consulta se ha suscrito a actualizaciones en tiempo real isloading isloading si true true , la consulta está obteniendo los resultados issyncing issyncing si true true , la consulta está obteniendo resultados actualizados de los servidores de back4app results results estos son los datos devueltos por la consulta count count indica el número de objetos que coincidieron con la consulta error error cuando algo sale mal con la consulta, devuelve un error reload reload recarga los resultados de tu consulta puedes ver la documentación completa para más detalles sobre cómo configurar y usar la @parse/react @parse/react biblioteca 4 prueba el app hook ahora deberías poder ejecutar tu aplicación react y ver los resultados ten en cuenta que deberías agregar algunos datos a tu proyecto de back4app para ver algunos elementos en tu aplicación ¡está hecho! en este punto, has instalado @parse/react @parse/react en tu proyecto, configurado las conexiones con back4app, y escrito tu primera consulta en la próxima guía, verás una de las principales características de esta biblioteca, cómo usarla creando una aplicación de chat en vivo de ejemplo