使用Relay查询渲染器在Back4App中查询GraphQL

在 back4app 上的查询渲染器 介绍 在我们之前的 指南 , 我们已经学习了如何准备我们的 relay 环境。现在你准备好开始开发你的 react native 应用程序了。 在本指南中，你将学习如何在 back4app 上进行你的第一个查询。我们将深入了解 relay 查询渲染器，理解其主要原理，并使用它来获取来自 back4app 的第一条数据。 目标 获取 relay 查询渲染器的概述； 从使用 relay 的 react native 应用程序对 back4app graphql api 进行查询； 先决条件 在 back4app 仪表板上创建的应用程序 react native 应用程序，并且根据之前的文档配置了 relay 环境。 阅读关于 relay 节点和连接的内容 什么是查询渲染器？ 正如 react 构建组件树，relay 构建数据组件树。这意味着应用程序的每个组件将拥有其片段数据。该片段将包含在屏幕上渲染所需的数据信息，relay 确保在渲染组件之前这些数据是可用的。 处理整个方法时，查询渲染器是一个根组件，必要时用于组合这些片段并准备从我们的后端获取查询。 为什么要理解查询渲染器？ 理解查询渲染器的使用使得以不同方式抽象你的应用程序变得重要。良好的代码抽象可以防止数小时的工作、错误、调试时间等。 渲染器如何与 back4app api 一起工作 在上一个教程中，我们准备了 relay 环境文件，该文件指定了 back4app 连接信息。使用此配置，relay 将负责与 back4app api 的通信。您无需担心连接。只需专注于构建数据组件。 1 在 back4app 控制面板上创建一个类 让我们创建您的第一个类，并使用 back4app graphql 控制台填充一些对象。person 类有 2 个字段，name 是一个字符串，salary 是一个整数。前往控制面板 >核心 >graphql 控制台，并使用以下代码 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } 您将看到下面的结果 创建类 现在让我们在这个类中创建一些对象。前往创建对象变更 指南 https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic ，看看如何处理这个案例。确保您使用的是最新的 parse server 版本，以便使用 back4app 上可用的最新 graphql api 语法。 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } 创建对象 现在，person 类已创建，并具有名称和薪资字段。 创建新类后，back4app 会自动生成所有必要的资源，以安全地使用后端。 一个例子是对象的列表。back4app 已经创建了查询 person people 列表所需的连接。 为了更好地理解，请访问游乐场，刷新并打开文档标签，查找 people。back4app 生成了连接字段。您还可以将类 person 查询为列表。请注意，query people 字段是 personconnection。 relay 将使用连接字段来渲染 person 对象的列表。 person 字段文档： 以及 people (person) 连接字段文档： 2 更新架构 重要的是要记住，如果有新的类进入您的应用程序，则需要在 react native 应用程序的根目录中更新架构。 如有必要，请访问 下载架构 文档并重复步骤以更新架构。 3 第一个片段容器示例 在我们继续教程之前，让我们向您介绍片段容器。 让我们创建一个组件，它将是 person 信息的拥有者。这个组件将包含个人的姓名和薪水。在这里，您可以请求任何人字段来构建您的组件。现在，我们将继续这两个字段。 创建一个文件并命名为 personcard js personcard js 在其中，让我们创建一个简单的函数组件 1 import react from 'react'; 2&#x9; 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; 用下面的代码替换export default这一行 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); 上面的代码将创建一个person的片段，只请求id、name和salary 用以下代码完成组件的其余部分的更新 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; 最终结果应该是这样的 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4&#x9; 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13&#x9; 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 创建查询渲染器 下一步是为您的对象列表创建查询渲染器。查询渲染器是一个根组件，用于检索数据组件并准备从后端获取数据。您将学习如何为 back4app 上的 person 类检索数据。 4 1 创建文件 创建一个新文件并命名为 personrenderer js personrenderer js 复制下面的代码并粘贴到 personrenderer 文件中。 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26&#x9; 27 export default personrenderer; 4 2 理解 queryrenderer 的属性 让我们从一个属性为空的 query renderer 开始：graphql、variables 和 render。一步一步地，您将逐步实现每一个属性。 首先，您的应用程序需要为 query renderer 提供查询。在这里，我们的应用程序将使用一个 people 列表。在查询属性中，粘贴以下代码： 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` graphql 来自 react relay，并将查询实现为字符串。 理解 edges 和 node 连接是很重要的。上面的查询正在从 back4app 服务器获取一个人节点连接。每次您创建一个新类时，它将伴随一个节点连接。 变量 在必要时，查询渲染器将使用变量。一个好的例子是：当应用程序根据 id 请求一个人的查询时。由于现在不是这种情况，让我们在变量属性中传递 null。 填充人员卡片 此查询将返回一个人员列表。查询渲染器确保数据在渲染时可用。如果不可用，则会抛出错误。负责此操作的属性是 render。 用以下代码填充 render 属性： 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} 用 javascript map 替换注释的 todo，以便为列表中的每个结果渲染一个人员卡片。 如前所述，查询渲染器负责在数据准备好时才使其可用。在此之前，将显示加载消息。如果发生错误，它将显示在屏幕上，防止应用程序意外崩溃。 最后，让我们通过一个新函数替换 map 来改善人员的渲染。将其放在查询渲染器之前 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; 最终结果应该看起来像 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6&#x9; 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11&#x9; 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46&#x9; 47 export default personrenderer; 5 创建你的第一个查询 现在是时候使用 personrenderer 获取人员了。如果一切正常，你的应用程序现在有两个新组件：personrenderer 和 personcard。 在启动应用程序之前，relay 需要 relay 编译器来运行并生成组件类型。为此，请在终端中运行 在 app js 中添加以下代码： 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3&#x9; 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6&#x9; 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28&#x9; 29 export default app; app js 的代码最初来自 create react native app。它添加了一个 view，样式用于将内容居中显示，顶部边距为 10px。内部有一个文本标签，以提供一些打印的上下文，以及 personrenderer 用于显示人员列表。 您需要获得以下结果： 渲染 在我们的 back4app react native 应用中，我们直接将 personrenderer 导入到 app js app js 由于 personrenderer 是一个根组件并且有其 queryrenderer，person 必须无错误地显示 6 输入组件 这一步对于使用 typescript 的应用是有意义的。如果您的应用不使用 typescript，请继续 relay 编译器的一个强大之处在于能够从每个数据组件生成类型。让我们为 personrenderer 和 personcard 输入类型，以增强应用的功能 输入 personrenderer 将 renderperson 函数参数 people people 输入到 personrenderer 中 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; 导入 personrendererquery personrendererquery 类型从 generated generated 文件夹，该文件夹位于 personrenderer 的同一文件夹内 输入 personcard 继续到 personcard，创建一个新的类型对象并命名为 personcardprops 1 type personcardprops = {}; 导入 personcard person personcard person 类型从 generated generated 文件夹 1 import {personcard person} from ' / generated /personcard person graphql'; 在类型 personcardprops 中添加人员 1 type personcardprops = { 2 person personcard person; 3 }; 在 personcard 的 props 参数中，使用 personcardprops personcardprops 两个组件的最终结果应该如下所示 personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7&#x9; 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12&#x9; 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47&#x9; 48 export default personrenderer; personcard 1 import react from 'react'; 2&#x9; 3 import {createfragmentcontainer, graphql} from 'react relay'; 4&#x9; 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7&#x9; 8 type personcardprops = { 9 person personcard person; 10 }; 11&#x9; 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); 结论 queryrenderer的最终结果展示了应用程序如何被抽象化。该应用程序可以在query renderer中显示person。由于personcard有更多组件，它并没有改变query renderer的构建方式。 personrenderer的构建展示了如何通过简单的步骤进行查询，结合back4app服务器的强大功能。在下一个指南中，您将学习如何检索特定的person对象并显示其属性。