Question

我对Relay Modern来说很新，所以我可能在这里做错了。此外，我很难找到有关如何完成此操作的文档。

我有一个应用程序，它提供了一个在React中构建的虚拟目录结构视图，其结构如下：

<ProjectDrive>
  <QueryRenderer>
     <ProjectDriveContainer>
        <ProjectDriveComponent>

当视图加载时，执行QueryRenderer中指定的GraphQL查询并将数据传递给ProjectDriveContainer组件并正确呈现。这个组件的创建如下：

const ProjectDriveContainer = createRefetchContainer(ProjectDriveComponent, {
        processMeta: TrackingBoardFragment.processMeta,
        directory: ProjectDriveComponentFragment.directory
}, ProjectDriveComponentRefetchQuery);

更改目录的方法使用不同的变量执行重新获取，我可以看到此查询正在执行并在浏览器的网络选项卡中返回正确的数据。 componentWillReceiveProps方法接收新的道具，但这些是旧的原始道具 - 即新数据没有替换道具中的对象。

我的查询如下：

原始查询

query DriveDataQuery($processId: Int!, $boardClass: String!, $boardType: String!, $filters: JSONString, $directoryType: DirectoryType!, $root: Boolean!, $directoryId: ID) {
  processMeta(processId: $processId, boardClass: $boardClass, boardType: $boardType, filters: $filters) {
    ...TrackingBoardComponent_processMeta
  }
  userProcessOptions(processId: $processId) {
    ...NavbarComponent_userProcessOptions
  }
  directory(processId: $processId, directoryType: $directoryType, root: $root, directoryId: $directoryId) {
    ...ProjectDriveComponent_directory
  }
}

重新获取查询：

query ProjectDriveComponentRefetchQuery($processId: Int, $directoryId: ID!, $directoryType: DirectoryType!, $root: Boolean!) {
    directory(processId: $processId, directoryType: $directoryType, root: $root, directoryId: $directoryId) {
        ...ProjectDriveComponent_directory
    }
}

我在这里缺少什么？

Answer 1

我在使用RefetchContainer和PaginationContainer时遇到了同样的问题。我花了两天时间来处理这个＆＃34;问题＆＃34;问题出在项目密钥上。

每个项必须具有唯一ID （不是索引）。

{this.props.viewer.items.edges.map((item, index) => (
    <Item viewer={item.node} key={item.node.id} />
))}

在我输入节点ID之后，关键问题就消失了。

顺便说一句，v1.2中的PaginationContainer支持RefetchOptions，因此您可以轻松地将重新组合和分页组合在一起。

Relay Modern refetch不会传递新数据

1 个答案: