Implementando useParseQuery en React Native con Parse SDK

20 min

usando el hook useparsequery para construir una aplicación react native en tiempo real introducción en esta guía, explorarás las principales características de \@parse/react native\ utilizando un ejemplo de aplicación todo en react native usarás el \useparsequery\ hook para consultar tareas en tiempo real y almacenar resultados localmente en esta aplicación usando varias consultas de parse, descubrirás cómo usar la nueva biblioteca de parse en tu proyecto parse react native 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 electrónico a community\@back4app com objetivo explorar los principales casos de uso de la biblioteca parse react native creando una aplicación todo requisitos previos para completar este tutorial, necesitarás una aplicación creada en back4app sigue el tutorial de habilitar live query https //www back4app com/docs/platform/parse live query nota sigue el tutorial de parse react native https //www back4app com/docs/react native/parse sdk/real time/react hook real time para aprender cómo comenzar con @parse/react native 1 configurar el proyecto inicial antes de comenzar, necesitarás obtener el proyecto bootstrap de react native que hemos configurado como punto de partida para este tutorial es un simple \react native init\ proyecto con todas las dependencias y estilos predefinidos para que te concentres en explorar \@parse/react native\ características puedes descargar el zip https //github com/templates back4app/react native todo app/archive/main zip o clonar el proyecto git clone https //github com/templates back4app/react native todo app git a continuación, instala las dependencias del proyecto cd react native todo app \# usando yarn yarn install \# usando npm npm install para ios, instala los pods cd ios && npx pod install en la guía anterior, introducción https //www back4app com/docs/react native/parse react native sdk/getting started , aprendiste cómo usar \initializeparse\ para habilitar la conexión con los servidores de back4app configura tu \app id\ y \javascriptkey\ en el componente de punto de entrada ubicado en \src/index js\ 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); adelante y ejecuta el proyecto \# para ios npx react native run ios \# para android npx react native run android después de eso, habrás configurado con éxito el proyecto inicial y la aplicación se verá como la siguiente la estructura del directorio del proyecto react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // componente de botón de tarjeta │ │ └── menu/ │ │ └── index js // menú con botones de tarjeta │ │ └── tasklist/ │ │ └── index js // componente de lista de tareas │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // página para agregar tarea │ │ └── learning/ │ │ └── index js // página de aprendizaje │ │ └── main/ │ │ └── index js // página principal │ │ └── shopping/ │ │ └── index js // página de compras │ │ └── work/ │ │ └── index js // página de trabajo │ ├── services/ │ │ └── api js │ ├── index js // punto de entrada de la aplicación │ └── routes js // configuración de rutas de navegación ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md el proyecto inicial tiene 4 páginas principales página de aprendizaje muestra tareas que pertenecen a la categoría de aprendizaje página de compras muestra tareas que pertenecen a la categoría de compras página de trabajo muestra tareas que pertenecen a la categoría de trabajo página de agregartarea formulario básico para crear una nueva tarea 2 creando una nueva tarea una característica común en una aplicación de todo es permitir a los usuarios crear nuevas tareas para eso, la función de crear tarea utilizará el sdk de javascript de parse para crear un nuevo objeto de parse y guardarlo en back4app en la \addtodo\ página del proyecto inicial, tendrás un formulario básico con un campo de entrada para insertar la descripción de la tarea, algunas casillas de verificación para seleccionar la categoría de la tarea y un botón de enviar en este tutorial, crearás \parse object\ para las tareas que tendrá los siguientes atributos consulta la guía del sdk de javascript de parse guardar datos https //www back4app com/docs/react native/parse sdk/react native save data para más información sobre cómo crear objetos de parse 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } ahora implementa el método para crear una tarea cuando el usuario haga clic en enviar en el \pages/addtodo/index js\ componente, implementemos el \handlesubmit\ método 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11	 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } después de eso, ahora podrás crear algunas tareas siéntete libre de crear tantas tareas como desees en los siguientes pasos estarás consultándolas 3 consultando y filtrando tareas ahora que has creado algunas tareas, es hora de usar la biblioteca parse react native escribirás algunas consultas y las pasarás a \useparsequery\ hook las consultas enumerarán todas las tareas no completadas en la categoría de aprendizaje este es el primer caso de uso del hook, construirás una consulta de obtención única, configurando \enablelivequery\ false\ , que se ejecuta cuando se renderiza el componente de la página de aprendizaje el \enablelivequery\ es \true\ por defecto, y cambiar a \false\ desactivará la suscripción a los cambios en tiempo real en el \pages/learning/index js\ componente, escribamos nuestra \parse query\ 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); pasa la consulta como argumento al \useparsequery\ hook const {results} = useparsequery(query, {enablelivequery false}); el código anterior muestra un uso básico del hook parse el hook useparsequery es un nuevo recurso que puedes usar con cualquier parse query usa todas las capacidades de parse query https //docs parseplatform org/js/guide/#queries para recuperar tus objetos de datos y el hook hará que esta experiencia sea aún mejor después de obtener los resultados, pásalos al componente tasklist para mostrar las tareas en la app 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7	 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13	 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15	 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19	 20 return \<tasklist todos={results} />; 21 }; 22	 23 export default learning; tu app debería mostrar exitosamente la lista de tareas así 4 cambios en tiempo real el segundo uso que vas a explorar son las actualizaciones en tiempo real el \useparsequery\ hook encapsula la consulta en vivo de parse y proporciona soporte inmediato para cambios en tiempo real al pasar una consulta al hook, se crea una conexión websocket para comunicarse con el servidor livequery de back4app, que se sincroniza automáticamente agregarás esta función a las tareas en la categoría de compras es importante tener en cuenta que la consulta en vivo y el subdominio de back4app deben estar habilitados en tu app del dashboard de back4app una vez que hagas eso, agrega la url de tu subdominio a \initializeparse\ y los resultados del hook de parse react native siempre tendrán datos actualizados si no configuras el subdominio, \useparsequery\ hook no podrá recuperar datos en tiempo real 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); en el \pages/shopping/index js\ componente, escribamos nuestro \parse query\ 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); luego, pasa la consulta como argumento al \useparsequery\ hook const {results, isloading, issyncing} = useparsequery(query); tenga en cuenta que no es necesario agregar parámetros adicionales, ya que los cambios en tiempo real están habilitados por defecto después de obtener los resultados, pásalos al \tasklist\ componente para mostrar las tareas en la aplicación 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6	 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12	 13 const {results, isloading, issyncing} = useparsequery(query); 14	 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20	 21 export default shopping; 5 soporte sin conexión el tercer caso de uso para \@parse/react native\ es utilizar el almacenamiento en caché de los resultados de las consultas sin conexión esto es útil en caso de que su aplicación de react native necesite funcionar cuando los usuarios tienen latencia de red o problemas de conectividad a internet el soporte sin conexión mejora la capacidad de respuesta de sus aplicaciones de react native y la experiencia del usuario ¡la gran noticia es que no se requieren pasos adicionales! el enfoque de primero sin conexión y las suscripciones en tiempo real están habilitados por defecto en resumen, simplemente usar el \useparsequery\ hook asegura que su aplicación almacenará en caché los resultados de las consultas para soporte sin conexión combinado con suscripciones de live query para cuando su usuario vuelva a estar en línea 6 limitación y ordenación de consultas suponga que la lista de tareas de la categoría de trabajo es demasiado para que una persona la maneje y desea mostrar solo un subconjunto de ellas para el día además, ordenar por fecha de creación en el \pages/shopping/index js\ componente, escribamos nuestro \parse query\ 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks luego, pasa la consulta como argumento al \useparsequery\ hook y pásalos al \tasklist\ componente para mostrar tareas en la aplicación 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7	 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15	 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19	 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25	 26 export default work; 7 especificando argumentos de useparsequery usaste \@parse/react native\ para recuperar datos de back4app con características como live query en los pasos anteriores por lo tanto, se requiere una explicación de la interfaz exportada el \useparsequery\ hook acepta un \parse query\ y un \useparsequeryoptions\ objeto como sus argumentos el objeto de configuración opcional predeterminado es el siguiente 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery la función de consulta en tiempo real está habilitada por defecto enablelocaldatastore habilita el almacenamiento en caché local de los resultados de datos, el valor por defecto es \true\ pero puedes desactivarlo configurándolo a \false\ initialload si ya tienes algunos datos cargados en memoria, puedes configurarlos para mostrar una vista previa de los datos a los usuarios ¡está hecho! en este punto, has aprendido cómo usar la \@parse/react native\ biblioteca creando una aplicación de tareas de react native en back4app