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

использование хука 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 следуйте учебнику https //www back4app com/docs/platform/parse live query примечание следуйте учебнику https //www back4app com/docs/react native/parse sdk/real time/react hook real time чтобы узнать, как начать работу с @parse/react native 1 настройка начального проекта перед тем как начать, вам нужно получить проект bootstrap react native, который мы настроили в качестве отправной точки для этого руководства это простой react native init react native init проект со всеми зависимостями и стилями, чтобы вы могли сосредоточиться на изучении @parse/react native @parse/react native функций вы можете https //github com/templates back4app/react native todo app/archive/main zip или клонировать проект git clone https //github com/templates back4app/react native todo app git далее установите зависимости проекта cd react native todo app \# используя yarn yarn install \# используя npm npm install для ios установите pods cd ios && npx pod install в предыдущем руководстве, 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 ); продолжайте и запустите проект \# для ios npx react native run ios \# для android npx react native run android после этого вы успешно настроите стартовый проект, и приложение будет выглядеть следующим образом структура каталога проекта react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // компонент кнопки карточки │ │ └── menu/ │ │ └── index js // меню с кнопками карточек │ │ └── tasklist/ │ │ └── index js // компонент списка задач │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // страница добавления задачи │ │ └── learning/ │ │ └── index js // страница обучения │ │ └── main/ │ │ └── index js // главная страница │ │ └── shopping/ │ │ └── index js // страница покупок │ │ └── work/ │ │ └── index js // страница работы │ ├── services/ │ │ └── api js │ ├── index js // точка входа приложения │ └── routes js // конфигурация маршрутов навигации ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md первоначальный проект имеет 4 основные страницы страница обучения показывает задачи, относящиеся к категории обучения страница покупок показывает задачи, относящиеся к категории покупок страница работы показывает задачи, относящиеся к категории работы страница добавления задачи базовая форма для создания новой задачи 2 создание новой задачи общей функцией в приложении todo является возможность пользователям создавать новые задачи для этого функция создания задачи будет использовать parse javascript sdk для создания нового объекта parse и сохранения его на back4app на странице addtodo addtodo из стартового проекта у вас будет базовая форма с полем для ввода описания задачи, несколькими флажками для выбора категории задачи и кнопкой отправки в этом учебном пособии вы создадите parse object parse object для задач, который будет иметь следующие атрибуты посмотрите на руководство parse javascript sdk https //www back4app com/docs/react native/parse sdk/react native save data для получения дополнительной информации о создании объектов 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&#x9; 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 хук const {results} = useparsequery(query, {enablelivequery false}); в приведенном выше коде показано основное использование хука parse хук useparsequery — это новый ресурс, который вы можете использовать с любым 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&#x9; 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&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 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 хук const {results, isloading, issyncing} = useparsequery(query); обратите внимание, что дополнительные параметры не нужны, так как изменения в реальном времени включены по умолчанию после получения результатов передайте их в 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&#x9; 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&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 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&#x9; 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&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 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