React Native 开发者的GraphQL Relay架构指南

开始使用 graphql relay 介绍 在本指南中，您将学习什么是 relay，如何使用模式以及如何在 back4app 上使用 graphql 先决条件 这还不是一个教程，但为了让您在阅读时感到舒适，您需要： 基本的 javascript 知识。 对 graphql 的基本理解。如果您没有， graphql js 是一个很好的起点 relay relay 是由 facebook 工程团队开发的 graphql 客户端，旨在构建数据驱动应用程序时提高性能。更准确地说，relay 是一个用于在客户端声明性地获取和管理 graphql 数据的框架，它使用严格的约定来帮助您的应用程序成功。它是在可扩展性方面构建的，以支持像 facebook 这样的复杂应用程序。graphql 和 relay 的最终目标是提供即时的用户界面响应交互。 使用 graphql 的主要优点之一是您可以通过单个查询获取构建应用程序页面所需的所有数据。例如。这当然是好的（您可以节省与服务器的往返请求），但随之而来的是一个问题。当在应用程序的不同部分重用此组件时，您可能会对同一组件使用不同的查询。为了避免这种问题，relay 使用了一个重要的概念：共置。 共置 在使用 relay 时，组件及其数据需求是一起存在的。组件的数据需求在内部声明。这意味着所有组件都声明它们所需的数据。relay 确保每个组件在渲染时都有它所需的数据。 共置概念背后的 relay 结构是容器。最常见的是 relay 片段容器。容器是尝试在渲染每个组件时满足所需数据的组件。容器使用 graphql 片段声明其数据依赖。 每个组件将拥有自己的片段容器。容器不会直接获取数据；它仅声明渲染时所需数据的规范。数据将在服务器端获取。relay 将确保在渲染发生之前数据是可用的。relay 通过这些容器组合一个数据树，忽略冗余，并在服务器上获取数据。 让我们用一个例子来说明这个概念。片段是 graphql 类型上字段的选择。relay 与片段、分页和重新获取容器一起工作。最常见的是片段容器。请参见下面的 graphql 片段，然后是 relay 中的相同片段。 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); 在第一段代码中，您可以看到 graphql 版本，它允许我们将此查询拆分为可重用的片段。在下一段代码中，您可以看到 relay 版本，它在同一组件中显示片段和数据。 共置意味着数据定义和视图定义共同存在。共置有一些好处。我们只需要准确声明我们需要的数据。这意味着很难过度获取数据，从而改善我们的应用程序，并且很难获取不足的数据，从而防止缺少数据的错误。另一个重要概念是数据掩码，这意味着组件只能访问它们请求的数据。数据掩码有助于防止依赖错误。此外，只有在它们使用的数据发生变化时，组件才会更新。 查询渲染器现代 我们建议您查看 官方查询渲染器文档 https //relay dev/docs/en/query renderer html#docsnav 以获得更好的理解。 基于片段容器，relay 将读取它们并根据它们拥有的数据向服务器发出请求。但是，这个请求是如何发生的呢？这就是查询渲染器现代的作用。 查询渲染器现代是读取片段容器、向服务器发出请求并将数据返回给组件的组件。 每个根组件都会有一个查询渲染器现代来发出这个请求。在上面的示例中，我们有一个抽象，以便我们只传递必须读取的片段，因此所有其他工作都在 createqueryrenderermodern 内部完成。 在文档的下一步中，我们将输入createqueryrenderermodern，以理解基于上述纯示例的抽象 下面是query render modern的一个纯示例 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } 我们可以看到query renderer modern是一个 hoc组件 换句话说，用要请求的数据包装拥有容器的组件，使用relay环境发起请求并将数据向下传递给组件。 自动类型生成 使用relay，我们可以安全地构建应用程序类型。正如我们所说，每个组件将是其数据的拥有者。因此，当我们运行relay compiler时，它会读取每个数据片段并与您的graphql模式进行检查。如果relay编译器的所有检查都通过，它将生成类型到一个名为 generated 该文件夹位于根组件文件夹内。 请参见下面的示例 组件主页检查api健康状态： 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); 生成的文件夹包含home组件的类型： 生成的类型： 之后我们只需要在组件中导入类型并组合它： 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; 该类型是用flow生成的，这是facebook的核心类型语言。但是，使用一个库你可以生成typescript。这在使用react native时最为常见。总结一下，使用relay编译器我们可以在运行时之前检查数据实现。这帮助我们防止错误，从而提高应用程序的质量和开发时间。 在查询中，我们可以避免在n个不同组件中重复数据。它会检查某些数据是否重复。如果有，它将删除冗余。这将减少查询的负载大小，并进一步提高应用程序的性能。 开发中 在查询中，我们可以避免在n个不同组件中重复数据。它会检查某些数据是否重复。如果有，它将删除冗余。这将减少查询的负载大小，并进一步提高应用程序的性能。 在服务器端 back4app back4app生成一个可直接使用的符合relay的graphql api，以便在你的项目中使用。back4app为你生成的内容，这样你就不必在服务器端自己构建： 基础设施 在 back4app 控制面板上，您可以创建一个完整的数据模型，包括类、类型和数据库所需的其他一切。您不必担心自己设置和维护服务器。在创建您的数据模型后，back4app 将生成在前端使用 graphql 所需的所有内容。让我们来看看 graphql api 架构。 架构 架构文件是任何 graphql 应用程序的核心。它描述了可在客户端使用的整个服务器。relay 使用您的架构文件来确认查询字符串，并生成出现在 / 生成的 /mycomponent graphql，如我们在 自动类型生成 主题中所述。 要使用 relay 编译器，您需要一个 graphql 或 json graphql 架构文件，描述您的 graphql 服务器的 api。这些文件是服务器真实来源的本地表示，不会被编辑。 每个 graphql 架构可以由查询类型、变更类型和订阅类型组成。要在前端使用 relay 消费的架构，您需要一些后端的核心概念：节点接口和连接。 我们建议阅读有关节点接口和 relay 连接的内容，以使这次阅读更容易抽象。 节点接口 节点接口实现了graphql的每种类型，以帮助通过id获取数据。这是一个实现，使从服务器获取和更新数据变得更加简单。因此，每种类型的数据将具有一个唯一的id，称为全局唯一id，由节点接口实现。通过节点，relay避免了嵌套查询，并使用它进行获取和重新获取。这很难实现，需要一些工作，但我们已经为您构建了这个! 分页 构建为可组合的，正如在前端和后端，relay将帮助我们组合我们的数据。为了处理分页，我们有连接。这些连接实现了我们正在获取的类型的节点，并具有标准模型，方便在服务器端实现分页。幸运的是，我们已经为前端构建了这个。 结论 在本指南中，我们介绍了什么是relay，它的主要概念以及它是如何工作的。我们还可以看到back4app如何自动化graphql服务器的创建，并为我们提供一个完整的数据库和graphql api供我们使用。 总结一下，整个后端已经由back4app构建。您只需在仪表板上创建您的类型，并开始根据生成的架构进行使用。在下一部分中，我们将解释如何在前端处理此架构，以及如何准备您的环境以使用relay。我们还有一个 graphql cookbook https //www back4app com/docs/parse graphql/graphql getting started , 您可以使用它来帮助您理解我们仪表板上的更多概念。