javascript - 使用 Apollo 执行突变后如何更新单独的组件 props

Question

使用 redux，当状态发生变化时，它会更新使用 mapStateToProps 连接到存储的任何组件 props。然而，使用 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 更改时重新渲染 Header 。我不知道如何在不轮询查询的情况下执行此操作。

Answer 1

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

为了使用内部缓存，您必须在初始化客户端时设置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},`
})