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 @parse/react native utilizando un ejemplo de aplicación todo en react native usarás el useparsequery 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 https //www back4app com/docs/platform/parse live query nota sigue el 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 react native init proyecto con todas las dependencias y estilos predefinidos para que te concentres en explorar @parse/react native @parse/react native características puedes 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, https //www back4app com/docs/react native/parse react native sdk/getting started , aprendiste cómo usar initializeparse initializeparse para habilitar la conexión con los servidores de back4app configura tu app id app id y javascriptkey javascriptkey en el componente de punto de entrada ubicado en src/index js 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 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 parse object para las tareas que tendrá los siguientes atributos consulta la guía del sdk de javascript de parse 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 pages/addtodo/index js componente, implementemos el handlesubmit 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 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 enablelivequery\ false , que se ejecuta cuando se renderiza el componente de la página de aprendizaje el enablelivequery enablelivequery es true true por defecto, y cambiar a false false desactivará la suscripción a los cambios en tiempo real en el pages/learning/index js pages/learning/index js componente, escribamos nuestra parse query 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 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 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 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 initializeparse y los resultados del hook de parse react native siempre tendrán datos actualizados si no configuras el subdominio, useparsequery 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 pages/shopping/index js componente, escribamos nuestro parse query 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 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 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 @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 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 pages/shopping/index js componente, escribamos nuestro parse query 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 useparsequery hook y pásalos al tasklist 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 @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 useparsequery hook acepta un parse query parse query y un useparsequeryoptions 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 true pero puedes desactivarlo configurándolo a false 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 @parse/react native biblioteca creando una aplicación de tareas de react native en back4app