使用 React Hook 实现 Parse 后端实时更新技术指南
使用 Parse 的 React hook 开始实时更新
介绍
将 Parse/Back4App 集成到您的基于 JavaScript 的项目中最简单的方法是通过 Parse Javascript SDK. 该库适用于多种 JavaScript 环境，如 NodeJS、ReactJS、VueJS、AngularJS、React-Native，并为您提供对 Back4App 功能的访问。
Parse React 的 hook 目标是通过提供一个轻量级且易于使用的层，使 ReactJS 开发者的体验更好，该层提供最小的配置和代码重用。
使用此包将确保设置凭据、HTTP 请求、实时同步、离线优先交互等项目自动可用于您的 React 应用。该库完全用 TypeScript 编写，基于 Parse Javascript SDK, 目前处于 Alpha 版本。
在本初始指南中，您将安装并设置 @parse/react 库在您的 React 项目中。
@parse/react 目前处于 Alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 [email protected] 向我们提出您的问题和初步印象。
先决条件
1 - 安装
在您的 React 应用中安装 @parse/react 及其对等依赖 parse ：
2 - 应用设置
为了让应用安全地连接到 Back4App 服务器，您必须在您的 App.js（或 App.tsx) 文件中提供 Parse JavaScript SDK 的应用凭据。请记得使用您在启用实时查询时创建的 Back4App 子域名。
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 网站上点击Core Settings，在Server Settings下.
3 - 创建您的第一个查询
接下来，您将构建您的第一个查询并在您的应用程序中显示它。@parse/react库导出了一个useParseQuery 钩子，因此您无需浪费时间研究如何实现离线支持、实时更改等功能。
它接受一个Parse.Query并返回一个对象，其中包含一些属性，您可以使用这些属性访问查询返回的数据：
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 <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 由钩子返回:
- isLive: 如果 true, 表示查询已订阅实时更新。
- isLoading: 如果 true, 查询正在获取结果。
- isSyncing: 如果 true, 查询正在从 Back4app 服务器获取更新结果。 results: 这是查询返回的数据。
- count: 表示与查询匹配的对象数量。
- error: 当查询出现问题时，它会返回一个错误。
- reload: 重新加载您的查询结果。
您可以查看 完整文档 以获取有关如何设置和使用 @parse/react 库的更多详细信息。
4 - 测试应用程序钩子
现在您应该能够运行您的 React 应用程序并查看结果。
请记住，您应该向您的 Back4App 项目添加一些数据，以便在您的应用程序中查看一些项目。
完成了！
在这一点上，您已经在项目中安装了 @parse/react，配置了与 Back4App 的连接，并编写了您的第一个查询。在下一个指南中，您将看到这个库的主要功能之一，如何通过创建一个示例实时聊天应用程序来使用它。