Реализация useParseQuery для реального времени в React

9 мин

начало работы с хуком parse react для обновлений в реальном времени с использованием parse введение самый простой способ интегрировать parse/back4app в ваш проект на javascript — это через parse javascript sdk https //www npmjs com/package/parse эта библиотека работает в нескольких средах javascript, таких как nodejs, reactjs, vuejs, angularjs, react native, и предоставляет доступ к функциям back4app цель хука parse react — сделать этот опыт еще лучше для разработчиков reactjs, предоставляя легкий и простой в использовании слой, который требует минимальной настройки и повторного использования кода использование этого пакета обеспечит автоматическую доступность таких элементов, как настройка учетных данных, http запросы, синхронизация в реальном времени, взаимодействие с приоритетом оффлайн для вашего react приложения библиотека полностью написана на typescript, на основе parse javascript sdk https //www npmjs com/package/parse , и в настоящее время находится на альфа версии в этом первоначальном руководстве вы установите и настроите библиотеку \@parse/react\ в вашем проекте react \@parse/react\ в настоящее время находится на альфа версии библиотека находится на стадии тестирования, поэтому мы рекомендуем действовать с осторожностью ваши отзывы очень ценны, поэтому не стесняйтесь использовать библиотеку и отправлять нам ваши вопросы и первые впечатления, написав на community\@back4app com предварительные требования чтобы завершить этот учебник, вам потребуется приложение созданное https //www back4app com/docs/get started/new parse app на back4app; следуйте учебнику включить live query https //www back4app com/docs/platform/parse live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm или yarn установленными; npx https //www npmjs com/package/npx пакетный менеджер установлен 1 установка установите \@parse/react\ и его зависимость \parse \ в вашем react приложении \# используя yarn yarn add @parse/react parse \# используя npm npm install save @parse/react parse 2 настройка приложения чтобы приложение могло безопасно подключаться к серверам back4app, вы должны предоставить parse javascript sdk учетные данные приложения в вашем \app js\ (или \app tsx\ ) файле не забудьте использовать ваш поддомен back4app, созданный, когда вы включили ваше приложение для выполнения live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); обратите внимание, что метод \initializeparse\ заменяет обычный \parse initialize\ метод вы можете найти свои \app id\ и \javascript key\ учетные данные, открыв вашу апп \dashboard \ на сайт back4app https //www back4app com/ и нажав на \core settings\ , в разделе \server settings\ 3 создание вашего первого запроса далее вы создадите свой первый запрос и отобразите его в своем приложении библиотека \@parse/react\ экспортирует хук \useparsequery \ , так что вам не нужно тратить время на изучение того, как реализовать такие функции, как поддержка оффлайн, изменения в реальном времени и так далее он принимает \parse query\ и возвращает объект с некоторыми свойствами, которые вы можете использовать для доступа к данным, возвращаемым запросами app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23	 24 return ( 25 \<div> 26 {isloading && ( 27 \loading \ 28 )} 29 {islive && ( 30 \live!\ 31 )} 32 {issyncing && ( 33 \syncing \ 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \{count}\ 45 {error && ( 46 \{error message}\ 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } при передаче запроса в хук он сначала будет искать кэшированные результаты, которые он мог сохранить затем он создает соединение websocket для связи с сервером back4app livequery, который синхронизируется автоматически другими словами, подход с приоритетом оффлайна и изменения в реальном времени включены по умолчанию чтобы проверить состояние запроса, используйте \props \ возвращенные хуком \islive\ если \true\ , это указывает на то, что запрос подписан на обновления в реальном времени \isloading\ если \true\ , запрос получает результаты \issyncing\ если \true\ , запрос получает обновленные результаты с серверов back4app \results\ это данные, возвращенные из запроса \count\ указывает количество объектов, соответствующих запросу \error\ когда что то идет не так с запросом, он возвращает ошибку \reload\ перезагрузите результаты вашего запроса вы можете увидеть полную документацию https //github com/parse community/parse react/tree/master/packages/parse react для получения дополнительной информации о том, как настроить и использовать \@parse/react\ библиотеку 4 протестируйте приложение теперь вы должны иметь возможность запустить ваше react приложение и увидеть результаты yarn start имейте в виду, что вам следует добавить некоторые данные в ваш проект back4app, чтобы увидеть некоторые элементы в вашем приложении готово! на этом этапе вы установили \@parse/react\ в вашем проекте, настроили соединения с back4app и написали ваш первый запрос в следующем руководстве вы увидите одну из основных функций этой библиотеки, как использовать её, создавая пример приложения для живого чата