跳到主要内容
支持乌克兰 🇺🇦 帮助向乌克兰提供人道主义援助.

中继与您一起扩展的 GraphQL 客户端。

为扩展而生

中继旨在以任何规模提供高性能。无论您的应用程序具有数十、数百还是数千个组件，中继都能轻松管理数据获取。得益于中继的增量编译器，即使您的应用程序不断增长，您的迭代速度也能保持快速。

保持迭代速度

中继将数据获取转变为声明式。组件声明它们的数据依赖项，无需担心如何获取它们。中继保证每个组件所需的数据都会被获取并可用。这使组件保持解耦，并促进重用。

借助中继，组件及其数据依赖项可以快速修改，而无需修改系统的其他部分。这意味着，在重构或对应用程序进行更改时，不会意外地破坏其他组件。

自动优化

中继的编译器会聚合并优化整个应用程序的数据需求，以便能够在一个 GraphQL 请求中高效地获取这些数据。

中继处理繁重的工作，以确保以最有效的方式获取组件声明的数据。例如，通过消除重复的字段，以及预先计算运行时使用信息，以及其他优化措施。

数据一致性

当影响组件的数据发生更改时，中继会自动使所有组件保持最新状态，并仅在严格必要时高效地更新它们。这意味着不会进行不必要的重新渲染。

中继还支持执行 GraphQL 突变，可以选择使用乐观更新，以及更新本地数据，同时确保屏幕上可见的数据始终保持最新状态。

获取查询数据

获取查询数据的最简单方法是直接调用 loadQuery.

稍后，您可以通过调用usePreloadedQuery钩子，在函数式 React 组件中从存储区读取数据。

中继鼓励您在响应事件时调用loadQuery，例如当用户按下链接以导航到特定页面或按下按钮时。有关更多信息，请参阅有关查询的引导游览部分。


import React from "react";
import { graphql, usePreloadedQuery, /* ... */ } from "react-relay";

const artistsQuery = graphql`
  query ArtistQuery($artistID: String!) {
    artist(id: $artistID) {
      name
      ...ArtistDescription_artist
    }
  }
`;
const artistsQueryReference = loadQuery(
  environment,
  artistsQuery,
  {artistID: "1"}
);

export default function ArtistPage() {
  return (
    <EnvironmentProvider environment={environment}>
      <React.Suspense fallback={<LoadingIndicator />}>
        <ArtistView />
      </React.Suspense>
    </EnvironmentProvider>
  )
}

function ArtistView() {
  const data = usePreloadedQuery(artistsQuery, artistsQueryReference);
  return (
    <>
      <Name>{data?.artist?.name}</Name>
      {data?.artist && <ArtistCard artist={data?.artist} />}
    </>
  );
}

片段

第二步是渲染一个由中继驱动的 React 组件树。组件使用片段来声明它们的数据依赖项，并通过调用 useFragment.

从中继存储区读取数据。片段是与 GraphQL 类型（如Artist）绑定的 GraphQL 代码片段，它指定了什么从该类型项中读取的数据。

useFragment采用两个参数：片段字面量和片段引用。片段引用指定了 哪个实体要从中读取数据。

片段本身无法被获取；相反，它们必须最终包含在父查询中。然后，中继编译器将确保在这些片段中声明的数据依赖项作为该父查询的一部分被获取。


import React from "react";
import { graphql, useFragment} from "react-relay";

export default function ArtistCard(props) {
  const {href, image, bio} = useFragment(
    graphql`
      fragment ArtistHeader_artist on Artist {
        href
        bio
        image {
          url
        }
      }
    `,
    props.artist
  );
  const imageUrl = image && image.url;

  return (
    <Card>
      <Link href={href}>
        <Image imageUrl={imageUrl} />
        <Bio>{bio}</Bio>
      </Link>
    </Card>
  );
}

内置的 GraphQL 最佳实践

中继应用并依赖于 GraphQL 最佳实践。为了充分利用中继的功能，您需要让 GraphQL 服务器符合这些标准实践。

片段

GraphQL 片段 是对给定 GraphQL 类型字段的可重用选择。它可以通过将其包含在其他片段中或将其作为 GraphQL 查询的一部分来组合。

中继使用片段来声明组件的数据需求，并组合数据需求。

请参阅引导游览

连接

GraphQL 连接 是用于在 GraphQL 中表示数据列表的模型，因此可以轻松地在任何方向进行分页，还可以对丰富的关系数据进行编码。

GraphQL 连接被认为是 GraphQL 中分页的最佳实践，只要您的 GraphQL 服务器支持连接，中继就会为它们提供一流的支持。

请参阅 连接 文档

全局对象标识

中继依赖于 全局对象标识 以提供可靠的缓存和重新获取功能，并使自动合并对象的更新成为可能。

全局对象标识包括为整个模式中的每种类型提供全局唯一 ID，这些 ID 使用 Node GraphQL 接口构建。

请参阅对象标识文档

灵活的突变

描述数据更改

使用 GraphQL 突变，您可以声明式地定义并请求将在一次往返中执行突变所影响的数据，中继将自动合并并传播这些更改。

自动更新

使用全局对象标识，中继能够自动合并任何受影响对象的突变更新，并仅更新受影响的组件。

对于更新无法自动合并的更复杂情况，中继提供了 API 以手动更新对突变的响应的本地中继数据。

旨在提供出色的 UX

中继的突变 API 支持对数据进行乐观更新，以便向用户显示即时反馈，以及错误处理，并在突变失败时自动回滚更改。

提前的安全

安心

在您处理中继项目时，中继编译器将指导您确保项目范围内的一致性和针对 GraphQL 模式的正确性。

优化的运行时

中继会提前（在构建时）预先计算大量工作（例如处理和优化查询），以便使浏览器或设备上的运行时尽可能高效。

类型安全

中继为每个使用中继的 React 组件生成 Flow 或 TypeScript 类型，这些类型表示每个组件接收的数据，因此您可以在确保正确性的前提下更快速、更安全地进行更改。

中继适合我吗？

逐步采用

如果您已经能够渲染 React 组件，那么您已经完成了大部分工作。中继需要一个 Babel 插件，并且还需要运行中继编译器。

您可以使用 Create React App 和 Next.js 开箱即用地使用中继。

使复杂性显式

中继需要一些预先的设置和工具，以支持隔离组件的体系结构，这些组件可以随着您的团队和应用程序复杂性进行扩展。

只需了解这些原则一次，然后花更多时间处理业务逻辑，而不是对数据进行流水线处理。

在 Facebook 规模中使用

中继是 Facebook 中的关键基础设施，有数万个组件在使用它。中继是与 GraphQL 共同构建的，并且有全职人员在不断改进它。

不仅仅适用于大型应用程序

如果您是那种相信使用 Flow 或 TypeScript 将错误检测转移到开发时间的团队，那么中继很可能适合您。

您很可能在其他情况下会独立地重新创建中继的大量缓存和 UI 最佳实践。

其他用户也引以为傲

中继最初是为 Facebook 应用程序的 React Native 部分而创建的，它已被 Facebook 内部和外部的其他团队改编和改进。

更多中继用户