QueryRenderer

QueryRenderer 是 Relay 树的根部.需要查询,获取数据并使用数据调用 render 回调。

QueryRenderer 是一个 React 组件,因此它可以在 React 组件渲染的任何地方渲染,而不仅仅是在顶层。A QueryRenderer 可以 其他 Relay 组件中渲染, 例如惰性地为一个弹出窗口获取额外的数据。 但是,在QueryRenderer 安装之前, 将不会开始加载其数据,因此 QueryRenderer 如果使用不必要的嵌套组件,可能导致可避免的请求流。

const {
  QueryRenderer,
  graphql,
} = require('react-relay'); // or require('react-relay/compat') for compatibility

// Render this somewhere with React:
<QueryRenderer
  environment={environment}
  query={graphql`
    query ExampleQuery($pageID: ID!) {
      page(id: $pageID) {
        name
      }
    }
  `}
  variables={{
    pageID: '110798995619330',
  }}
  render={({error, props}) => {
    if (error) {
      return <div>{error.message}</div>;
    } else if (props) {
      return <div>{props.page.name} is great!</div>;
    }
    return <div>Loading</div>;
  }}
/>

查询命名约定 #

要启用 兼容模式, relay-compiler 为查询强制执行简单的命名约定。查询必须命名为 <FileName><OperationType>, 其中 "<OperationType>" 是“查询”, "Mutation", 或 " Subscriptions"之一。上面的查询被命名为 ExampleQuery 所以应该放在 Example.js