Relay

Relay 是 Relay 库的入口。如果您正在使用一个预构建的软件包,它可以作为全局的; 如果你使用CommonJS模块就可以 require() 它了。

附注

所述 react-relay npm 模块包括 react 作为 peer 依赖。 您的应用程序应明确指定React作为依赖。

最常用的函数是 createContainer(),它用来包含数据声明的组件。

概述 #

属性

方法

属性 #

DefaultNetworkLayer (static property) #

参阅 网络层指南

Mutation #

参阅 Mutations 指南

QL #

参阅 Relay.QL API 参考

PropTypes #

参阅 PropTypes API 参考

RootContainer #

参阅 RootContainer 指南

Route #

参阅 Routes 指南

Store #

参阅 存储 API 参考

方法 #

createContainer (静态方法) #

var Container = Relay.createContainer(Component, {
  initialVariables?: Object,
  prepareVariables?: (variables: Object, route: string) => Object,
  fragments: {[key: string]: Function}
});

创建新的 Relay 容器 - 有关详细信息和示例,请参阅 容器指南

injectNetworkLayer (静态方法) #

Relay.injectNetworkLayer(networkLayer: {
  sendMutation: (mutation: RelayMutationRequest) => void;
  sendQueries: (queries: Array<RelayQueryRequest>) => void;
  supports: (...options: Array<string>): boolean;
});

Override DefaultNetworkLayer.

示例 #

例如,我们可以记录发送到服务器的每个mutation,如下所示:

var DefaultNetworkLayer = Relay.DefaultNetworkLayer;

class MutationLoggingNetworkLayer extends DefaultNetworkLayer {
  sendMutation(mutation) {
    // log the response or error (note that `mutation` is a promise)
    mutation.then(
      response => console.log(response),
      error => console.error(error),
    );
    // Send the mutation using the default network implementation
    return super.sendMutation(mutation);
  }
};

Relay.injectNetworkLayer(new MutationLoggingNetworkLayer());

injectTaskScheduler (静态方法) #

Relay.injectTaskScheduler(scheduler: Scheduler): void;

type Scheduler = (task: Function) => void;

Relay 将其核心处理功能包含在轻量级任务中,默认情况下会立即执行(即同步执行)。为了定制 这些任务运行-例如,为了避免在触摸手势期间中断动画 - 应用程序可以提供一个自定义调用函数。

示例 #

默认实现如下:

Relay.injectTaskScheduler(task => task());

注意,它立即执行下一个任务。Relay 管理任务的顺序以确保正确的执行顺序 - 调度程序不能跳过或重新排序任务,只决定何时执行下一个任务。

在 React Native 中, 我们可以安排 Relay 处理以避免中断触摸手势,如下所示:

var {InteractionManager} = require('react-native');

Relay.injectTaskScheduler(InteractionManager.runAfterInteractions);

你可以阅读更多关于 InteractionManagerReact Native API 文档

isContainer (静态方法) #

Relay.isContainer(Component: Object): boolean;

示例 #

var Component = require('...');

if (Relay.isContainer(Component)) {
  Component.getFragment('...');
}