ReactRelayNetworkLayer 使用教程
1. 项目介绍
ReactRelayNetworkLayer 是一个为 Relay 设计的网络层,提供了多种中间件来处理请求和响应。它可以在浏览器、React Native 或 Node.js 服务器中使用。该模块的核心是使用全局 fetch
方法,因此如果你的客户端较旧,需要显式导入适当的 polyfill(例如 whatwg-fetch
、node-fetch
或 fetch-everywhere
)。
2. 项目快速启动
安装
首先,使用 npm 或 yarn 安装 ReactRelayNetworkLayer:
yarn add react-relay-network-layer
# 或者
npm install react-relay-network-layer --save
配置
在你的项目中配置 ReactRelayNetworkLayer,并注入到 Relay 网络层:
import Relay from 'react-relay';
import { RelayNetworkLayer, urlMiddleware, batchMiddleware } from 'react-relay-network-layer';
Relay.injectNetworkLayer(new RelayNetworkLayer([
urlMiddleware({
url: (req) => '/graphql',
}),
batchMiddleware({
batchUrl: (req) => '/graphql/batch',
batchTimeout: 10,
}),
]));
运行
确保你的 GraphQL 服务器已经启动,并且能够处理 /graphql
和 /graphql/batch
请求。然后运行你的 React 应用,Relay 将通过 ReactRelayNetworkLayer 发送请求。
3. 应用案例和最佳实践
案例1:使用 authMiddleware
处理认证
在实际应用中,你可能需要处理认证信息。ReactRelayNetworkLayer 提供了 authMiddleware
来处理认证头:
import { authMiddleware } from 'react-relay-network-layer';
Relay.injectNetworkLayer(new RelayNetworkLayer([
authMiddleware({
token: () => store.get('jwt'),
}),
// 其他中间件
]));
案例2:使用 retryMiddleware
处理重试
如果你的服务器有时会返回非 200 状态码,可以使用 retryMiddleware
来处理重试逻辑:
import { retryMiddleware } from 'react-relay-network-layer';
Relay.injectNetworkLayer(new RelayNetworkLayer([
retryMiddleware({
fetchTimeout: 15000,
retryDelays: (attempt) => Math.pow(2, attempt + 4) * 100,
statusCodes: [500, 503, 504],
}),
// 其他中间件
]));
4. 典型生态项目
Relay
ReactRelayNetworkLayer 是为 Relay 设计的,因此 Relay 是它的核心生态项目。Relay 是一个用于构建数据驱动的 React 应用的 JavaScript 框架。
GraphQL
GraphQL 是 Relay 使用的查询语言,ReactRelayNetworkLayer 通过中间件处理 GraphQL 请求和响应。
React Native
ReactRelayNetworkLayer 可以在 React Native 中使用,为移动应用提供强大的网络层支持。
Node.js
在服务器端渲染(SSR)中,ReactRelayNetworkLayer 也可以在 Node.js 环境中使用,帮助处理服务器端的 GraphQL 请求。
通过这些模块的结合使用,你可以构建出高效、可靠的 React 应用。