0

使用 redux，当状态发生变化时，它会更新connect使用mapStateToProps. 但是，使用 Apollo 在执行突变时，任何使用相同数据的组件都会收到新的 props。

我理解这是预期的行为，因为 Apollo 不知道数据集是相同的。这是我所得到的一个例子： 

const query = gql`query { me { username } }`

@graphql(query)
class Header extends React.Component {
  render () {
    return <h1>{this.props.data.me.username}</h1>
  }
}

const mutation = gql`mutation updateAccount($username: String!) {
  updateAccount(username: $username) {
    me {
      username
    }
  }
}`
@graphql(mutation)
class Edit extends React.Component {
  render () {
    # ...
  }
  onSubmit(e) {
    e.preventDefault()
    this.props.mutate({variables: {username: this.state.username})
  }
}

该Header组件渲染出username，而 Edit 组件更新username. Header我想在更改时重新渲染username。我不确定如何在不轮询查询的情况下执行此操作。

4

1 回答 1

1

Apollo 保留了查询的内部缓存，并且能够使用保存在 redux 存储中的内部缓存使用dataIdFromObject规范化结果集。

为了使用内部缓存，您必须dataIdFromObject在初始化客户端时设置：

const client = new ApolloClient({
  dataIdFromObject: o => o.id
})

然后在执行突变时，确保id在返回类型中返回：

const mutation = gql`mutation updateAccount($username: String!) {
  updateAccount(username: $username) {
    me {
      id
      username
    }
  }
}`

查询还应包含 id：

const query = gql`query { me { id username } }`

Apollo 将识别id查询和突变的返回类型之间的相同，并相应地更新查询数据。

我在我的 GraphQL API 中使用全局 ID，因此它id在类型之间始终是唯一的，但是如果您使用自动增量 ID 或者它们不是唯一的，那么您可以__typename从对象中使用：

const client = new ApolloClient({
  dataIdFromObject: o => `${o.__typename}:${o.id},`
})
于 2016-10-07T12:47:47.067 回答