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

20 мин

использование хука useparsequery для создания приложения react native в реальном времени введение в этом руководстве вы изучите основные функции \@parse/react native\ библиотеки, используя пример приложения todo на react native вы будете использовать хук \useparsequery\ для запроса задач в реальном времени и хранения результатов локально в этом приложении используя различные запросы parse, вы узнаете, как использовать новую библиотеку parse в вашем проекте parse react native в настоящее время находится на альфа версии библиотека находится на стадии тестирования, поэтому мы рекомендуем действовать с осторожностью ваши отзывы очень ценны, поэтому не стесняйтесь использовать библиотеку и отправлять нам ваши вопросы и первые впечатления, написав на community\@back4app com цель изучите основные случаи использования библиотеки parse react native, создавая приложение todo предварительные требования чтобы завершить этот учебник, вам потребуется приложение, созданное на back4app следуйте учебнику включить live query https //www back4app com/docs/platform/parse live query примечание следуйте учебнику parse react native 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\ проект со всеми зависимостями и стилями, чтобы вы могли сосредоточиться на изучении \@parse/react native\ функций вы можете скачать zip 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\ для подключения к серверам back4app настройте ваш \app id\ и \javascriptkey\ в компоненте точки входа, расположенном по адресу \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\ из стартового проекта у вас будет базовая форма с полем для ввода описания задачи, несколькими флажками для выбора категории задачи и кнопкой отправки в этом учебном пособии вы создадите \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\ , давайте реализуем метод \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\ хук запросы будут перечислять все незавершенные задачи в категории обучения это первый случай использования хука, вы создадите одноразовый запрос, установив \enablelivequery\ false\ , который выполняется, когда компонент страницы обучения рендерится \enablelivequery\ по умолчанию равен \true\ , и изменение на \false\ отключит подписку на изменения в реальном времени на компоненте \pages/learning/index js\ , давайте напишем наш \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\ хук const {results} = useparsequery(query, {enablelivequery false}); в приведенном выше коде показано основное использование хука 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\ инкапсулирует parse live query и предоставляет поддержку изменений в реальном времени из коробки при передаче запроса в хук он создает соединение websocket для связи с сервером back4app livequery, который синхронизируется автоматически вы добавите эту функцию к задачам в категории покупок важно отметить, что live query и поддомен back4app должны быть включены в вашем приложении на панели управления back4app как только вы это сделаете, добавьте url вашего поддомена в \initializeparse\ , и результаты из хука parse react native всегда будут иметь обновленные данные если вы не настроите поддомен, \useparsequery\ хук не сможет получать данные в реальном времени 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); в компоненте \pages/shopping/index js\ , давайте напишем наш \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\ хук const {results, isloading, issyncing} = useparsequery(query); обратите внимание, что дополнительные параметры не нужны, так как изменения в реальном времени включены по умолчанию после получения результатов передайте их в \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\ заключается в использовании оффлайн кэширования результатов запросов это полезно в случае, если ваше приложение react native должно работать, когда у пользователей есть задержка сети или проблемы с подключением к интернету поддержка оффлайн улучшает отзывчивость ваших приложений react native и пользовательский опыт хорошая новость в том, что никаких дополнительных шагов не требуется! подход «сначала оффлайн» и подписки в реальном времени включены по умолчанию короче говоря, простое использование \useparsequery\ хука гарантирует, что ваше приложение будет кэшировать результаты запросов для поддержки оффлайн в сочетании с подписками live query, когда ваш пользователь снова подключится к сети 6 ограничение и сортировка запросов предположим, что список задач из категории работы слишком велик для одного человека, и вы хотите показать только подмножество из них на день также отсортируйте по дате создания на \pages/shopping/index js\ компоненте давайте напишем наш \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\ хук и передайте их в компонент \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\ для получения данных из back4app с такими функциями, как live query, на предыдущих этапах поэтому требуется объяснение экспортированного интерфейса хук \useparsequery\ принимает \parse query\ и объект \useparsequeryoptions\ в качестве своих аргументов объект конфигурации по умолчанию выглядит следующим образом 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery функция realtime live query включена по умолчанию enablelocaldatastore включает локальное кэширование результатов данных, по умолчанию \true\ но вы можете отключить, установив значение \false\ initialload если у вас уже есть некоторые данные, загруженные в память, вы можете установить их для отображения предварительного просмотра данных пользователям готово! на данный момент вы узнали, как использовать \@parse/react native\ библиотеку, создавая приложение react native todo на back4app