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 https //www npmjs com/package/parse 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 https //www npmjs com/package/parse , y actualmente está en la versión alpha en esta guía inicial, instalarás y configurarás la \<font color="#2166ae">@parse/react\</font> biblioteca en tu proyecto react \<font color="#2166ae">@parse/react\</font> 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 https //www back4app com/docs/get started/new parse app en back4app; sigue el tutorial de habilitar 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 o yarn instalados; npx https //www npmjs com/package/npx corredor de paquetes instalado 1 instalación instala \<font color="#2166ae">@parse/react\</font> y su dependencia par \<font color="#2166ae">parse \</font> en tu aplicación react \# usando yarn yarn add @parse/react parse \# usando npm npm install save @parse/react parse 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 \<font color="#2166ae">app js\</font> (o \<font color="#2166ae">app tsx\</font> ) 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 \<font color="#2166ae">initializeparse\</font> método reemplaza al habitual \<font color="#2166ae">parse initialize\</font> uno puede encontrar su \<font color="#2166ae">id de la app\</font> y \<font color="#2166ae">clave de javascript\</font> credenciales abriendo su app \<font color="#2166ae">tablero \</font> en sitio web de back4app https //www back4app com/ y haciendo clic en \<font color="#2166ae">configuraciones principales\</font> , bajo \<font color="#2166ae">configuraciones del servidor\</font> 3 creando su primera consulta a continuación, construirá su primera consulta y la mostrará en su app la \<font color="#2166ae">@parse/react\</font> biblioteca exporta un \<font color="#2166ae">useparsequery \</font> 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 \<font color="#2166ae">parse query\</font> 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 \<font color="#2166ae">props \</font> devueltos por el hook \<font color="#2166ae">islive\</font> si \<font color="#2166ae">true\</font> , indica que la consulta se ha suscrito a actualizaciones en tiempo real \<font color="#2166ae">isloading\</font> si \<font color="#2166ae">true\</font> , la consulta está obteniendo los resultados \<font color="#2166ae">issyncing\</font> si \<font color="#2166ae">true\</font> , la consulta está obteniendo resultados actualizados de los servidores de back4app \<font color="#2166ae">results\</font> estos son los datos devueltos por la consulta \<font color="#2166ae">count\</font> indica el número de objetos que coincidieron con la consulta \<font color="#2166ae">error\</font> cuando algo sale mal con la consulta, devuelve un error \<font color="#2166ae">reload\</font> recarga los resultados de tu consulta puedes ver la documentación completa https //github com/parse community/parse react/tree/master/packages/parse react para más detalles sobre cómo configurar y usar la \<font color="#2166ae">@parse/react\</font> biblioteca 4 prueba el app hook ahora deberías poder ejecutar tu aplicación react y ver los resultados yarn start 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 \<font color="#2166ae">@parse/react\</font> 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