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

Question

我正在尝试使用 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?

Answer 1

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

首先，添加一个片段来表示所选的post。

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 来推断您应该处于什么状态。

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

Fetch additional data for a single item in a list query

reactjs

relayjs

graphql-js

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