在列表查询中获取单个项目的其他数据 [英] Fetch additional data for a single item in a list query

问题描述

我正在尝试使用React和Relay做此动画从列表到单个项目.

Im trying to do something like this with React and Relay - smooth animation from list to single item.

我目前有列表组件(列表查询)和单个项目组件(节点查询)，但是有一个问题:这是两个不同的独立视图和查询，我想不出一种简单的方法在这两个之间进行动画处理视图.

I currently have list component (list query) and single item component (node query) but there's a problem: these are two different, isolated views and queries, I can't think of an easy way to smootly animate between these two views.

反应部分很简单，我将在单击时计算屏幕尺寸，然后将列表项转换为全屏尺寸.

React part is simple, I'll calculate screen size on click and transform the list item to full-screen size.

数据呢?中继有可能发生这种情况吗?我可以在列表查询中为单个项目获取更多数据，还是可以在同一组件中使用节点查询， a'la 每个组件使用两个查询?

How about data? Is something like this possible with Relay? Can I fetch more data for single item in list query or could I use node query in same component, a'la use two queries per component?

// 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?

推荐答案

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

Yes, you can fetch multiple fragments per component. My suggestion here would be to have a separate fragment for the selected post, and to make use of it in a route dedicated for the post's detail (permalink) view.

首先，添加一个片段以代表所选帖子.

First, add a fragment to represent the selected 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
            }
          }
        }
      }
    `,
  },
});

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

Then create two routes. One will represent only the index view's queries, and one the permalink view's queries.

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会在加载下一条路线的数据时继续呈现旧路线，因此您应该能够在等待数据的同时执行转换.

Now, you need to write some code that rerenders the app with a new route when you want to switch between the index and the permalink views. By default, Relay will keep rendering the old route while the data for the next route loads, so you should be able to perform your transitions while you wait on the data.

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时应处于的状态做出一些推断.

The current route is available to you as this.props.relay.route, so you should be able to make some inferences about what state you should be in using this.props.relay.route.name and this.props.relay.route.params.

这篇关于在列表查询中获取单个项目的其他数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！