在 React Native 中使用 Parse 进行关系查询的技术实现

9min
使用 Parse 在 React Native 中进行关系查询
介绍
在本指南中，您将执行 Parse 中的关系查询，并使用这些查询实现一个 React Native 组件。您将学习如何使用 Back4App 和 React Native 设置和查询真实数据。
先决条件
要完成本教程，您需要：
一个创建并连接到 Back4App 的 React Native 应用程序。
如果您想测试/使用本指南提供的屏幕布局，您应该设置react-native-paper﻿库。
目标
从 React Native 应用程序查询存储在 Back4App 上的关系数据。
- 理解 Parse.Query 类
任何 Parse 查询操作都使用 Parse.Query 对象类型，这将帮助您在整个应用程序中从数据库中检索特定数据。重要的是要知道 Parse.Query 只有在调用检索方法（如 Parse.Query.find 或 Parse.Query.first）后才会解析，因此可以设置查询并在实际调用之前链接多个修饰符。
要创建一个新的 Parse.Query，您需要将所需的 Parse.Object 子类作为参数传递，这将包含您的查询结果。下面可以看到一个示例查询，其中查询了一个虚构的 Book 子类。
JS
// This will create your query
let parseQuery = new Parse.Query("Book");
// The query will resolve only after calling this method
let queryResult = await parseQuery.find();
// This will create your query
let parseQuery = new Parse.Query("Book");
// The query will resolve only after calling this method
let queryResult = await parseQuery.find();
﻿
您可以在官方文档中阅读更多关于 Parse.Query 类的内容，在这里查看官方文档。
- 在 Back4App 上保存一些数据
让我们创建一组类，这些类将是本指南中查询的目标。这些类是： 作者, 书籍, 出版商 和 书店, 在其中 书籍 与 出版商 之间有 1:N 关系，和 作者 之间有 N:N 关系，书店 与 书籍 之间有 N:N 关系。
在 Parse JS 控制台中，可以直接运行 JavaScript 代码，使用 JS SDK 命令查询和更新您的应用程序数据库内容。从您的 JS 控制台运行下面的代码并将数据插入 Back4App。以下是您仪表板中 JS 控制台的样子：
﻿
继续创建具有以下示例内容的类:
JS
// Add objects and create tables
// Authors
const AuthorA = new Parse.Object('Author');
AuthorA.set('name', 'Aaron Writer');
await AuthorA.save();

const AuthorB = new Parse.Object('Author');
AuthorB.set('name', 'Beatrice Novelist');
await AuthorB.save();

const AuthorC = new Parse.Object('Author');
AuthorC.set('name', 'Casey Columnist');
await AuthorC.save();

// Publishers
const PublisherA = new Parse.Object('Publisher');
PublisherA.set('name', 'Acacia Publishings');
await PublisherA.save();

const PublisherB = new Parse.Object('Publisher');
PublisherB.set('name', 'Birch Distributions');
await PublisherB.save();

// Books
const BookA = new Parse.Object('Book');
BookA.set('title', 'A Love Story');
BookA.set('publisher', PublisherA);
BookA.set('publishingDate', new Date('05/07/1998'));
const BookARelation = BookA.relation("authors");
BookARelation.add(AuthorA);
await BookA.save();

const BookB = new Parse.Object('Book');
BookB.set('title', 'Benevolent Elves');
BookB.set('publisher', PublisherB);
BookB.set('publishingDate', new Date('11/31/2008'));
const BookBRelation = BookB.relation("authors");
BookBRelation.add(AuthorB);
await BookB.save();

const BookC = new Parse.Object('Book');
BookC.set('title', 'Can You Believe It?');
BookC.set('publisher', PublisherB);
BookC.set('publishingDate', new Date('08/21/2018'));
const BookCRelation = BookC.relation("authors");
BookCRelation.add(AuthorA);
BookCRelation.add(AuthorC);
await BookC.save();

// BookStore
const BookStoreA = new Parse.Object('BookStore');
BookStoreA.set('name', 'Books of Love');
const BookStoreARelation = BookStoreA.relation("books");
BookStoreARelation.add(BookA);
await BookStoreA.save();

const BookStoreB = new Parse.Object('BookStore');
BookStoreB.set('name', 'Fantasy Books');
const BookStoreBRelation = BookStoreB.relation("books");
BookStoreBRelation.add(BookB);
await BookStoreB.save();

const BookStoreC = new Parse.Object('BookStore');
BookStoreC.set('name', 'General Books');
const BookStoreCRelation = BookStoreC.relation("books");
BookStoreCRelation.add(BookA);
BookStoreCRelation.add(BookC);
await BookStoreC.save();

console.log('Success');
// Add objects and create tables
// Authors
const AuthorA = new Parse.Object('Author');
AuthorA.set('name', 'Aaron Writer');
await AuthorA.save();

const AuthorB = new Parse.Object('Author');
AuthorB.set('name', 'Beatrice Novelist');
await AuthorB.save();

const AuthorC = new Parse.Object('Author');
AuthorC.set('name', 'Casey Columnist');
await AuthorC.save();

// Publishers
const PublisherA = new Parse.Object('Publisher');
PublisherA.set('name', 'Acacia Publishings');
await PublisherA.save();

const PublisherB = new Parse.Object('Publisher');
PublisherB.set('name', 'Birch Distributions');
await PublisherB.save();

// Books
const BookA = new Parse.Object('Book');
BookA.set('title', 'A Love Story');
BookA.set('publisher', PublisherA);
BookA.set('publishingDate', new Date('05/07/1998'));
const BookARelation = BookA.relation("authors");
BookARelation.add(AuthorA);
await BookA.save();

const BookB = new Parse.Object('Book');
BookB.set('title', 'Benevolent Elves');
BookB.set('publisher', PublisherB);
BookB.set('publishingDate', new Date('11/31/2008'));
const BookBRelation = BookB.relation("authors");
BookBRelation.add(AuthorB);
await BookB.save();

const BookC = new Parse.Object('Book');
BookC.set('title', 'Can You Believe It?');
BookC.set('publisher', PublisherB);
BookC.set('publishingDate', new Date('08/21/2018'));
const BookCRelation = BookC.relation("authors");
BookCRelation.add(AuthorA);
BookCRelation.add(AuthorC);
await BookC.save();

// BookStore
const BookStoreA = new Parse.Object('BookStore');
BookStoreA.set('name', 'Books of Love');
const BookStoreARelation = BookStoreA.relation("books");
BookStoreARelation.add(BookA);
await BookStoreA.save();

const BookStoreB = new Parse.Object('BookStore');
BookStoreB.set('name', 'Fantasy Books');
const BookStoreBRelation = BookStoreB.relation("books");
BookStoreBRelation.add(BookB);
await BookStoreB.save();

const BookStoreC = new Parse.Object('BookStore');
BookStoreC.set('name', 'General Books');
const BookStoreCRelation = BookStoreC.relation("books");
BookStoreCRelation.add(BookA);
BookStoreCRelation.add(BookC);
await BookStoreC.save();

console.log('Success');
﻿
- 查询数据
现在您已经填充了所有类，我们可以在其中执行一些关系查询。让我们开始通过出版商过滤 书籍 结果，搜索属于 “出版社 “金合欢出版”（或“出版社 A”）的书籍，使用基本的 Parse.Query.equalTo 方法:
JS
// Get PublisherA object
const PublisherAQuery = new Parse.Query('Publisher');
PublisherAQuery.equalTo('name', 'Acacia Publishings');
const PublisherA = await PublisherAQuery.first();

// Query Books with PublisherA
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('publisher', PublisherA);
let queryResults = await bookQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('title'));
};
// Get PublisherA object
const PublisherAQuery = new Parse.Query('Publisher');
PublisherAQuery.equalTo('name', 'Acacia Publishings');
const PublisherA = await PublisherAQuery.first();

// Query Books with PublisherA
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('publisher', PublisherA);
let queryResults = await bookQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('title'));
};
﻿
现在让我们查询哪些 书店 对象包含 书籍 对象，出版日期晚于 2010 年 1 月 1 日，使用内查询和 Parse.Query.greaterThan 方法，然后使用 Parse.Query.matchesQuery 方法:
JS
// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
现在让我们创建一个更复杂的关系查询，寻找 书店 对象，这些对象至少有一本由 书籍 编写的 作者 “Aaron Writer”（或 “AuthorA”），使用 equalTo 和 matchesQuery 方法:
JS
// Get AuthorA object
const AuthorAQuery = new Parse.Query('Author');
AuthorAQuery.equalTo('name', 'Aaron Writer');
const AuthorA = await AuthorAQuery.first();

// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('authors', AuthorA);

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Get AuthorA object
const AuthorAQuery = new Parse.Query('Author');
AuthorAQuery.equalTo('name', 'Aaron Writer');
const AuthorA = await AuthorAQuery.first();

// Create inner Book query
const bookQuery = new Parse.Query('Book');
bookQuery.equalTo('authors', AuthorA);

// Query BookStore using inner Book query
const bookStoreQuery = new Parse.Query('BookStore');
bookStoreQuery.matchesQuery('books', bookQuery);
let queryResults = await bookStoreQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
- 从 React Native 组件查询
现在让我们在 React Native 中的一个组件内使用我们的示例查询，界面简单，包含一个显示结果的列表和用于调用查询的按钮。这就是组件代码的布局，注意 doQuery 函数，包含之前的示例代码。
JavaScript
TypeScript
import React, {FC, ReactElement, useState} from 'react';
import {Alert, Image, View, ScrollView, StyleSheet} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 const doQueryA = async function (): Promise<boolean> {
   // Get PublisherA object
   const PublisherAQuery: Parse.Query = new Parse.Query('Publisher');
   PublisherAQuery.equalTo('name', 'Acacia Publishings');
   const PublisherA: Parse.Object = await PublisherAQuery.first();

   // Query Books with PublisherA
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('publisher', PublisherA);

   try {
     let results: [Parse.Object] = await bookQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const doQueryB = async function (): Promise<boolean> {
   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: [Parse.Object] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const doQueryC = async function (): Promise<boolean> {
   // Get AuthorA object
   const AuthorAQuery: Parse.Query = new Parse.Query('Author');
   AuthorAQuery.equalTo('name', 'Aaron Writer');
   const AuthorA: Parse.Object = await AuthorAQuery.first();

   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('authors', AuthorA);

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: [Parse.Object] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Relational Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={
                 result.get('name') !== undefined
                   ? result.get('name')
                   : result.get('title')
               }
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryA()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query A'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryB()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query B'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryC()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query C'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
import React, {FC, ReactElement, useState} from 'react';
import {Alert, Image, View, ScrollView, StyleSheet} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 const doQueryA = async function (): Promise<boolean> {
   // Get PublisherA object
   const PublisherAQuery: Parse.Query = new Parse.Query('Publisher');
   PublisherAQuery.equalTo('name', 'Acacia Publishings');
   const PublisherA: Parse.Object = await PublisherAQuery.first();

   // Query Books with PublisherA
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('publisher', PublisherA);

   try {
     let results: [Parse.Object] = await bookQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const doQueryB = async function (): Promise<boolean> {
   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.greaterThan('publishingDate', new Date('01/01/2010'));

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: [Parse.Object] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const doQueryC = async function (): Promise<boolean> {
   // Get AuthorA object
   const AuthorAQuery: Parse.Query = new Parse.Query('Author');
   AuthorAQuery.equalTo('name', 'Aaron Writer');
   const AuthorA: Parse.Object = await AuthorAQuery.first();

   // Create inner Book query
   const bookQuery: Parse.Query = new Parse.Query('Book');
   bookQuery.equalTo('authors', AuthorA);

   // Query BookStore using inner Book query
   const bookStoreQuery: Parse.Query = new Parse.Query('BookStore');
   bookStoreQuery.matchesQuery('books', bookQuery);

   try {
     let results: [Parse.Object] = await bookStoreQuery.find();
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Relational Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={
                 result.get('name') !== undefined
                   ? result.get('name')
                   : result.get('title')
               }
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryA()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query A'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryB()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query B'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryC()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query C'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
﻿
这是组件在渲染后以及通过其中一个查询函数查询时的样子:
﻿
结论
在本指南的最后，您了解了如何在Parse上进行关系查询，以及如何从React Native应用程序中在Back4App上执行这些查询。在下一个指南中，您将学习如何在Parse中处理用户.
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
React Native应用中的Parse.Query详解与示例
下一个
如何在React Native中使用Parse进行地理定位查询
在 React Native 中使用 Parse 进行关系查询的技术实现

使用 Parse 在 React Native 中进行关系查询

介绍

先决条件

目标

1 - 理解 Parse.Query 类

2 - 在 Back4App 上保存一些数据

3 - 查询数据

4 - 从 React Native 组件查询

结论
