中继。访问同级组件的数据

Question

玩 Relay 我在访问数据时遇到了问题。我试图用 Relay 项目的官方 Todo 示例重现问题。请考虑要点以更改 Todo 示例。 here

以下是问题：

1. 为什么摘要组件无法访问同级（查看器）组件数据？
2. “查询必须只有一个字段”的原因是什么？我相信 GraphQL 没有这样的限制。
3. 为什么我得到 Invariant Violation: Relay(TodoApp).getFragment(): summary is not a valid fragment name ?

提前致谢！

Answer 1

1. Summary 想要从查看器中使用的任何数据都必须在 Summary 容器中声明为 GraphQL，并一直组合到应用程序的根目录。

   class Summary extends React.Component {
     render() {
       return <span>{this.props.viewer.bar}</span>;
     }
   }
   export default Relay.createContainer(Summary, {
     fragments: {
       viewer: () => Relay.QL`
         fragment on Viewer {
           bar
         }
       `,
     },
   });
   
   class TodoApp extends React.Component {
     render() {
       return <Summary viewer={this.props.viewer} />;
     }
   }
   export default Relay.createContainer(TodoApp, {
     fragments: {
       viewer: () => Relay.QL`
         fragment on Viewer {
           foo
           ${Summary.getFragment('viewer')}
         }
       `,
     },
   });
   

   注意foo 字段不在Summary 中可用。因为Summary 没有要求，所以我们将其屏蔽掉。

2. Relay.Route 中可以有多个查询，但每个查询只能有一个根字段。我们需要这种一对一的对应关系，以便我们知道将哪个结果分配给哪个道具。

   class MyRoute extends Relay.Route {
     queries: {
       summary: () => Relay.QL`query { summary }`,
       viewer: () => Relay.QL`query { viewer }`,
     },
     /* ... */
   }
   

3. 您需要将摘要片段一直编写到应用程序的根目录，使其在TodoApp 上可用。

   export default Relay.createContainer(TodoApp, {
     fragments: {
       summary: () => Relay.QL`
         fragment on Summary {
           ${Summary.getFragment('summary')}
         }
       `,
     },
   });