React Native环境中Relay的安装和配置指南

中继设置 介绍 在我们之前的指南中，我们学习了如何获取模式文件，保存它，并将其粘贴到我们的 react native 应用程序中。在本指南中，我们将安装 relay 并准备我们的环境以开始开发 react native 应用程序。 目标 为了设置 relay，我们首先需要在我们的 react native 应用程序上安装 relay，然后准备 relay 环境。 先决条件 我们建议对以下主题有基本了解： relay modern , babel js , javascript (ecs5 和 ecs6), graphql js readme 一个在本地环境中运行的基本 react native 项目。 在您的 react native 项目中下载的 schema graphql 文件。 在接下来的步骤中，您将找到一个专注于 react native 应用程序的基本 relay 安装。如果您想深入了解此主题，请访问 官方文档 1 安装 react relay 官方 api 让我们开始安装官方库 react relay 。这个库是 relay 核心团队的官方 api，拥有构建数据片段所需的一切。 重要提示：本教程使用版本 10 0 0 安装 relay modern。从版本 11 0 0 开始，使用 react relay 的方法有所不同，因为引入了新的 hooks。 2 relay 配置 relay 配置包含 relay 编译器所需的信息。在其中，我们将指定 relay 编译器可以找到 schema file 的位置，应该查找哪些文件夹，以及其他配置。让我们首先安装 relay config 包： 注意：本教程使用 yarn 作为包管理客户端，但您也可以使用 npm。 现在让我们创建 relay 配置文件，relay 将在其中找到 schema 路径。 在应用程序根目录下创建一个新文件。 将其命名为 relay config js。 打开文件并使用以下信息保存它 3 relay babel 插件 为了在运行时转换 graphql 工件，我们需要安装一个 babel 插件。 现在，在你的 babel 配置文件中，你必须在插件数组中添加 relay babel 插件。最终的 babel config js 将如下所示 在 expo 项目中，按照相同的方法在 babel config js 中的 presets 数组后面添加插件数组。最终结果应如下所示 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; relay 插件必须在其他插件之前运行，以正确转换 graphql 工件。查看插件 babel 文档以了解更多信息。 4 relay 编译器 自从我们第一次文档以来，我们一直在解释 relay 编译器。为了让我们的应用程序编译数据片段，我们现在将安装它。 让我们打开我们的 package json 并配置一个新的脚本命令来运行 relay 编译器。 watchman 负责配置 relay 编译器是否必须监视 relay 片段的任何更改。如果为真，它将在每次更改时重新运行。如果为假，它将在你单独运行 yarn relay 后运行。 package json 文件应如下所示 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 运行 yarn relay 最后，安装步骤完成后，我们可以在应用程序的根目录下运行 yarn relay 命令 由于我们没有构建任何数据片段，relay 编译器返回任何已更改的文件 很好，你的应用程序已经安装并配置了 relay。现在，让我们实现我们的环境，以开始向 back4app 服务器发出请求。 6 准备获取环境 relay 环境定义了网络层将如何处理请求，以及 relay store 必须如何工作。store 通过仅在更改时更新数据并进行缓存来控制我们在前端的数据。一个简单的环境至少需要网络层和 store。 网络层 这个 网络层 很容易构建。它将处理我们应用程序的每个请求，进行查询、变更和订阅（如果您的应用程序支持）。使用它时，relay 将知道如何准备调用以访问应用程序服务器。 relay 存储 这个 存储 负责在客户端更新我们应用程序的数据。每个请求可以有一个更新函数。在更新函数内部，您可以使用一系列辅助函数通过存储接口更新您的数据。 为了准备 relay 环境，我们需要创建一个环境配置文件。每次执行查询时，查询渲染器都会读取该文件。让我们准备这个文件。 6 1 创建环境文件 我们将遵循 relay 库的设计原则，即协同定位概念。首先，让我们在应用程序的根目录下创建一个文件夹，并将其命名为 relay。在其中，创建一个文件并命名为 environment js environment js 。 6 2 配置环境 之后，从 relay runtime relay runtime 导入我们所需的一切 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 配置网络层 网络层需要一个函数来从服务器获取数据。首先，让我们创建一个负责执行post请求的fetch函数 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; 我们通过try catch包装了对后端的请求。发生错误时将抛出异常，应用程序将处理它。否则将遵循正常行为并返回数据。 在网络层，您还可以配置应用程序与服务器的连接。在back4app中，我们使用两个主要密钥：应用程序id和客户端密钥。这些密钥必须在头部中提供，同时还要提供服务器url。要获取此信息，请转到您的应用程序，然后单击api控制台 > graphql菜单。 打开graphql控制台后，您将在顶部看到url，在底部看到所需的应用程序密钥。用您的信息替换fetch函数中的内容。 记得不要暴露主密钥 6 4 导出环境 relay runtime 提供了消费网络层所需的函数，并创建了存储。最后，让我们将它们组合成一个新的环境并导出到我们的应用程序中。在您的环境文件中使用以下代码。 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; 环境最终文件将如下所示： 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; 结论 太棒了。现在，随着 relay 和 relay 环境的安装和配置，是时候开始使用 back4app graphql api 了。因此，下一步是创建我们的第一个查询渲染器并与我们的服务器进行通信。