Реализация useParseQuery в React Native приложениях

20 мин

использование хука useparsequery для создания приложения react native в реальном времени введение в этом руководстве вы изучите основные функции @parse/react native @parse/react native библиотеки, используя пример приложения todo на react native вы будете использовать хук useparsequery useparsequery для запроса задач в реальном времени и хранения результатов локально в этом приложении используя различные запросы parse, вы узнаете, как использовать новую библиотеку parse в вашем проекте parse react native в настоящее время находится на альфа версии библиотека находится на стадии тестирования, поэтому мы рекомендуем действовать с осторожностью ваши отзывы очень ценны, поэтому не стесняйтесь использовать библиотеку и отправлять нам ваши вопросы и первые впечатления, написав на community\@back4app com цель изучите основные случаи использования библиотеки parse react native, создавая приложение todo предварительные требования чтобы завершить этот учебник, вам потребуется приложение, созданное на back4app следуйте учебнику включить live query примечание следуйте учебнику parse react native чтобы узнать, как начать работу с @parse/react native 1 настройка начального проекта перед тем как начать, вам нужно получить проект bootstrap react native, который мы настроили в качестве отправной точки для этого руководства это простой react native init react native init проект со всеми зависимостями и стилями, чтобы вы могли сосредоточиться на изучении @parse/react native @parse/react native функций вы можете скачать zip https //github com/templates back4app/react native todo app/archive/main zip или клонировать проект далее установите зависимости проекта для ios установите pods в предыдущем руководстве, начало работы https //www back4app com/docs/react native/parse react native sdk/getting started , вы узнали, как использовать initializeparse initializeparse для подключения к серверам back4app настройте ваш app id app id и javascriptkey javascriptkey в компоненте точки входа, расположенном по адресу src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); продолжайте и запустите проект после этого вы успешно настроите стартовый проект, и приложение будет выглядеть следующим образом структура каталога проекта первоначальный проект имеет 4 основные страницы страница обучения показывает задачи, относящиеся к категории обучения страница покупок показывает задачи, относящиеся к категории покупок страница работы показывает задачи, относящиеся к категории работы страница добавления задачи базовая форма для создания новой задачи 2 создание новой задачи общей функцией в приложении todo является возможность пользователям создавать новые задачи для этого функция создания задачи будет использовать parse javascript sdk для создания нового объекта parse и сохранения его на back4app на странице addtodo addtodo из стартового проекта у вас будет базовая форма с полем для ввода описания задачи, несколькими флажками для выбора категории задачи и кнопкой отправки в этом учебном пособии вы создадите parse object parse object для задач, который будет иметь следующие атрибуты посмотрите на руководство parse javascript sdk сохранение данных для получения дополнительной информации о создании объектов 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 } теперь реализуйте метод для создания задачи, когда пользователь нажимает на отправить в компоненте pages/addtodo/index js pages/addtodo/index js , давайте реализуем метод handlesubmit handlesubmit 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 } после этого вы сможете создавать задачи не стесняйтесь создавать столько задач, сколько хотите в следующих шагах вы будете их запрашивать 3 запрос и фильтрация задач теперь, когда вы создали несколько задач, пришло время использовать библиотеку parse react native вы напишете несколько запросов и передадите их в useparsequery useparsequery хук запросы будут перечислять все незавершенные задачи в категории обучения это первый случай использования хука, вы создадите одноразовый запрос, установив enablelivequery\ false enablelivequery\ false , который выполняется, когда компонент страницы обучения рендерится enablelivequery enablelivequery по умолчанию равен true true , и изменение на false false отключит подписку на изменения в реальном времени на компоненте pages/learning/index js pages/learning/index js , давайте напишем наш 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'); передайте запрос в качестве аргумента в useparsequery useparsequery хук в приведенном выше коде показано основное использование хука parse хук useparsequery — это новый ресурс, который вы можете использовать с любым parse query используйте все возможности parse query https //docs parseplatform org/js/guide/#queries для получения ваших объектов данных, и этот хук сделает этот процесс еще лучше после получения результатов передайте их компоненту tasklist для отображения задач в приложении 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; ваше приложение должно успешно отображать список задач, как показано ниже 4 изменения в реальном времени второе использование, которое вы собираетесь изучить, это обновления в реальном времени хук useparsequery useparsequery инкапсулирует parse live query и предоставляет поддержку изменений в реальном времени из коробки при передаче запроса в хук он создает соединение websocket для связи с сервером back4app livequery, который синхронизируется автоматически вы добавите эту функцию к задачам в категории покупок важно отметить, что live query и поддомен back4app должны быть включены в вашем приложении на панели управления back4app как только вы это сделаете, добавьте url вашего поддомена в initializeparse initializeparse , и результаты из хука parse react native всегда будут иметь обновленные данные если вы не настроите поддомен, useparsequery useparsequery хук не сможет получать данные в реальном времени 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); в компоненте pages/shopping/index js pages/shopping/index js , давайте напишем наш 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'); затем передайте запрос в качестве аргумента в useparsequery useparsequery хук обратите внимание, что дополнительные параметры не нужны, так как изменения в реальном времени включены по умолчанию после получения результатов передайте их в tasklist tasklist компонент для отображения задач в приложении 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 поддержка оффлайн третий случай использования @parse/react native @parse/react native заключается в использовании оффлайн кэширования результатов запросов это полезно в случае, если ваше приложение react native должно работать, когда у пользователей есть задержка сети или проблемы с подключением к интернету поддержка оффлайн улучшает отзывчивость ваших приложений react native и пользовательский опыт хорошая новость в том, что никаких дополнительных шагов не требуется! подход «сначала оффлайн» и подписки в реальном времени включены по умолчанию короче говоря, простое использование useparsequery useparsequery хука гарантирует, что ваше приложение будет кэшировать результаты запросов для поддержки оффлайн в сочетании с подписками live query, когда ваш пользователь снова подключится к сети 6 ограничение и сортировка запросов предположим, что список задач из категории работы слишком велик для одного человека, и вы хотите показать только подмножество из них на день также отсортируйте по дате создания на pages/shopping/index js pages/shopping/index js компоненте давайте напишем наш 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 затем передайте запрос в качестве аргумента в useparsequery useparsequery хук и передайте их в компонент tasklist tasklist для отображения задач в приложении 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 указание аргументов useparsequery вы использовали @parse/react native @parse/react native для получения данных из back4app с такими функциями, как live query, на предыдущих этапах поэтому требуется объяснение экспортированного интерфейса хук useparsequery useparsequery принимает parse query parse query и объект useparsequeryoptions useparsequeryoptions в качестве своих аргументов объект конфигурации по умолчанию выглядит следующим образом 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery функция realtime live query включена по умолчанию enablelocaldatastore включает локальное кэширование результатов данных, по умолчанию true true но вы можете отключить, установив значение false false initialload если у вас уже есть некоторые данные, загруженные в память, вы можете установить их для отображения предварительного просмотра данных пользователям готово! на данный момент вы узнали, как использовать @parse/react native @parse/react native библиотеку, создавая приложение react native todo на back4app