试着将React Native与GraphQL和Relay结合使用

2 年 ago
清, 宇
1 minute

这篇文章是2016年React Native Advent Calendar第五天的文章。

这篇文章主要介绍了如何使用由Facebook开发的React Native、GraphQL和Relay的组合。具体来说，我们将使用React Native实现Relay官方网页上的一个简单列表示例。关于GraphQL和Relay的详细信息将不会在本文中详细讨论。同时，本文引用并修改了Relay官方网站上的代码，Relay的许可证是BSD许可证。

水

做的事情是：
1. 运行Relay官方页面上的示例。
2. 将其改写成React Native的代码。
这就是流程。

在 Relay 的官方网站上，使用 Relay Starter Kit 在本地启动了一个应用程序服务器（前端）和一个 GraphQL 服务器（后端），前端服务器使用 Relay 来访问后端服务器。

准备

GraphQL 表现层协议

按照Relay官方教程的指引，执行以下命令。

git clone https://github.com/relayjs/relay-starter-kit.git react-native-relay-test
cd react-native-relay-test
npm install

React Native 是一种用于原生中文应用开发的框架。

按照 React Native 官方网站上的说明，执行以下命令。
同时，安装所需的模块以创建 Relay 应用程序。

brew install watchman
npm install -g react-native-cli
react-native init ReactNativeRelayProject
cd ReactNativeRelayProject
react-native run-ios

npm install react-relay --save
npm install babel-core --save-dev
npm install babel-preset-react-native --save-dev
npm install babel-relay-plugin --save-dev
npm install graphql --save-dev
npm install sync-request --save-dev

在Relay的官方网站上运行示例。

将 react-native-relay-test 改写为一个简单列表的例子。
文件将被改写为：

GraphQL 侧

    • react-native-relay-test/data/database.js

 

    react-native-relay-test/data/schema.js

转播的一方

    • react-native-relay-test/js/app.js

 

    • react-native-relay-test/js/components/App.js

 

    react-native-relay-test/js/routes/AppHomeRoute.js

以下是5个文件。
我们在以下URL上发布了修正示例。
https://github.com/kohei-takata/relay-starter-kit

当代码修复完成后，使用以下命令生成 shema.graphql 文件并更新 schema.json 文件，然后启动前后端服务器。

npm run update-schema
npm start

当你访问 http://localhost:3000/ 时，会显示类似于Relay官方页面的界面，当你访问http://localhost:8080/ 时，会显示GraphiQL的界面。

如果你想更多地了解和理解GraphQL，我建议你在这里使用GraphiQL的界面，尝试创建和玩耍各种查询。
预测转换可以轻松地生成查询，所以应该很有趣。
此外，你会发现GraphQL的一个特点是请求和响应的格式是相同的，这很容易理解。

用React Native重新编写。

让我们把之前搭建的前端服务器移植到 React Native 中。
由于在之前的情况下，前端和后端服务器都在同一个 localhost 上运行，所以可能没有很明显地感觉到与服务器的通信部分。
但是，让我们使用 React Native 来意识到这一点。

需要修改的文件是:
– ReactNativeRelayProject/index.ios.js
– ReactNativeRelayProject/.babelrc
并且，还需要创建一个新的文件:
– ReactNativeRelayProject/babelRelayPlugin.js。

我在以下的URL上公开了修正案例：
https://github.com/kohei-takata/ReactNativeRelayProject

修改完毕后，使用命令”react-native run-ios”来执行。

スクリーンショット 2016-12-11 21.38.54.png

这篇文章中虽然只涉及到基本的运行，但在GraphQL服务器端，可以尝试与实际的RDB连接，而不是直接写入数据。另外，可以在获取数据时尝试进行各种更改（同时在GraphiQL上确认），并尝试使用被称为具备强大修正能力的GraphQL。因此，除了仅获取数据外，我认为你可以从这里开始尝试各种不同的操作，所以请务必试一试。

由于React Native仍在不断进化中，因此明年我也想继续关注其发展情况，并尝试着进行一些探索和实验。

bannerAds