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

IT技术 reactjs relayjs graphql-js
2021-05-09 04:46:46

我试着做一些像这样有react，接力-从列表中单个项目的流畅的动画效果。

我目前有列表组件（列表查询）和单项组件（节点查询），但有一个问题：这是两个不同的、独立的视图和查询，我想不出一种在这两个视图之间平滑动画的简单方法。

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

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

数据呢？Relay 可以实现这样的功能吗？我可以在列表查询获取了单个项目更多的数据或者我可以用节点查询在相同的组件，网HRS欧洲使用的每个组件的两个查询？

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

其它你可能感兴趣的问题
上一篇创建发布版本时 index.android.bundle 未更新 下一篇谷歌地图 Api 标记未与 Reactjs 一起显示