获取列表查询中单个项目的附加数据答案

【问题标题】：Fetch additional data for a single item in a list query获取列表查询中单个项目的附加数据
【发布时间】：2017-01-26 13:42:56
【问题描述】：

我正在尝试使用 React 和 Relay 做类似 this 的事情 - 从列表到单个项目的平滑动画。

我目前有列表组件（列表查询）和单项组件（节点查询），但有一个问题：这是两个不同的、孤立的视图和查询，我想不出一种简单的方法来在这两者之间进行动画处理意见。

最简单的方法可能是转换/缩放同一个列表项：

React 部分很简单，我会在点击时计算屏幕大小并将列表项转换为全屏大小。

数据呢？ Relay可以做到这样的事情吗？我可以为列表查询中的单个项目获取更多数据，还是可以在同一组件中使用节点查询，a'la 每个组件使用两个查询？

// Simple list query example

export default Relay.createContainer(PostList, {
    initialVariables: {
        count: 10
    },
    fragments: {
        viewer: () => Relay.QL`
            fragment on Viewer {
                posts(first: $count) {
                    edges {
                        node {
                            id
                            title
                        }
                    }
                }
            }`
    }
})

// What if I needed to fetch "content" for a single item as well?

【问题讨论】：

标签： reactjs relayjs graphql-js

【解决方案1】：

是的，您可以为每个组件获取多个片段。我的建议是为所选帖子创建一个单独的片段，并在专用于帖子详细信息（永久链接）视图的路线中使用它。

首先，添加一个片段来表示所选帖子。

export default Relay.createContainer(PostList, {
  initialVariables: {
    count: 10,
  },
  fragments: {
    selectedPost: () => Relay.QL`
      fragment on Post {
        id
        title
        description
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        posts(first: $count) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `,
  },
});

然后创建两条路线。一个只代表索引视图的查询，一个代表永久链接视图的查询。

class IndexRoute extends Relay.Route {
  static queries = {
    viewer: () => Relay.QL`query { viewer }`,
  };
  static routeName = 'IndexRoute';
}

class PostPermalinkRoute extends Relay.Route {
  static queries = {
    selectedPost: () => Relay.QL`query { node(id: $postID) }`,
    viewer: () => Relay.QL`query { viewer }`,
  };
  static paramDefinitions = {
    // By setting `required` to true, `PostPermalinkRoute` 
    // will throw if a `postID` is not supplied when instantiated.
    postID: {required: true},
  };
  static routeName = 'PostPermalinkRoute';
}

现在，当您想要在索引视图和永久链接视图之间切换时，您需要编写一些代码以使用新路由重新呈现应用程序。默认情况下，Relay 将在加载下一个路由的数据时继续渲染旧路由，因此您应该能够在等待数据时执行转换。

function render(route) {
  ReactDOM.render(
    <Relay.RootContainer
      Component={PostList}
      route={route}
    />,
    container,
  );
}

// When it's time to render the index...
render(new IndexRoute());

// Upon selecting a post...
render(new PostPermalinkRoute({postID: 123}));

您可以使用当前路线为this.props.relay.route，因此您应该能够使用this.props.relay.route.name 和this.props.relay.route.params 推断出您应该处于什么状态。

【讨论】：