ReactRelayNetworkLayer 使用教程

ReactRelayNetworkLayer 使用教程

react-relay-network-layerReactRelayNetworkLayer with middlewares and query batching for Relay Classic.项目地址:https://gitcode.com/gh_mirrors/re/react-relay-network-layer

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 应用。

react-relay-network-layerReactRelayNetworkLayer with middlewares and query batching for Relay Classic.项目地址:https://gitcode.com/gh_mirrors/re/react-relay-network-layer