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

начало работы с хуком parse react для обновлений в реальном времени с использованием parse введение самый простой способ интегрировать parse/back4app в ваш проект на javascript — это через parse javascript sdk эта библиотека работает в нескольких средах javascript, таких как nodejs, reactjs, vuejs, angularjs, react native, и предоставляет доступ к функциям back4app цель хука parse react — сделать этот опыт еще лучше для разработчиков reactjs, предоставляя легкий и простой в использовании слой, который требует минимальной настройки и повторного использования кода использование этого пакета обеспечит автоматическую доступность таких элементов, как настройка учетных данных, http запросы, синхронизация в реальном времени, взаимодействие с приоритетом оффлайн для вашего react приложения библиотека полностью написана на typescript, на основе parse javascript sdk , и в настоящее время находится на альфа версии в этом первоначальном руководстве вы установите и настроите библиотеку @parse/react @parse/react в вашем проекте react @parse/react @parse/react в настоящее время находится на альфа версии библиотека находится на стадии тестирования, поэтому мы рекомендуем действовать с осторожностью ваши отзывы очень ценны, поэтому не стесняйтесь использовать библиотеку и отправлять нам ваши вопросы и первые впечатления, написав на community\@back4app com предварительные требования чтобы завершить этот учебник, вам потребуется приложение созданное на back4app; следуйте учебнику включить live query npm или yarn установленными; npx пакетный менеджер установлен 1 установка установите @parse/react @parse/react и его зависимость parse parse в вашем react приложении 2 настройка приложения чтобы приложение могло безопасно подключаться к серверам back4app, вы должны предоставить parse javascript sdk учетные данные приложения в вашем app js app js (или app tsx app tsx ) файле не забудьте использовать ваш поддомен back4app, созданный, когда вы включили ваше приложение для выполнения live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); обратите внимание, что метод initializeparse initializeparse заменяет обычный parse initialize parse initialize метод вы можете найти свои app id app id и javascript key javascript key учетные данные, открыв вашу апп dashboard dashboard на сайт back4app https //www back4app com/ и нажав на core settings core settings , в разделе server settings server settings 3 создание вашего первого запроса далее вы создадите свой первый запрос и отобразите его в своем приложении библиотека @parse/react @parse/react экспортирует хук useparsequery useparsequery , так что вам не нужно тратить время на изучение того, как реализовать такие функции, как поддержка оффлайн, изменения в реальном времени и так далее он принимает parse query 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&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 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&#x9; 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 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 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } при передаче запроса в хук он сначала будет искать кэшированные результаты, которые он мог сохранить затем он создает соединение websocket для связи с сервером back4app livequery, который синхронизируется автоматически другими словами, подход с приоритетом оффлайна и изменения в реальном времени включены по умолчанию чтобы проверить состояние запроса, используйте props props возвращенные хуком islive islive если true true , это указывает на то, что запрос подписан на обновления в реальном времени isloading isloading если true true , запрос получает результаты issyncing issyncing если true true , запрос получает обновленные результаты с серверов back4app results results это данные, возвращенные из запроса count count указывает количество объектов, соответствующих запросу error error когда что то идет не так с запросом, он возвращает ошибку reload reload перезагрузите результаты вашего запроса вы можете увидеть полную документацию для получения дополнительной информации о том, как настроить и использовать @parse/react @parse/react библиотеку 4 протестируйте приложение теперь вы должны иметь возможность запустить ваше react приложение и увидеть результаты имейте в виду, что вам следует добавить некоторые данные в ваш проект back4app, чтобы увидеть некоторые элементы в вашем приложении готово! на этом этапе вы установили @parse/react @parse/react в вашем проекте, настроили соединения с back4app и написали ваш первый запрос в следующем руководстве вы увидите одну из основных функций этой библиотеки, как использовать её, создавая пример приложения для живого чата