未更新 dataIdFromObject 的 Apollo 规范化

Question

我在发送删除突变后无法让 React+Apollo 更新商店。我正在使用内置 apollo+react 和 express graphQL 服务器的 reactQL 样板（我没有安装 apollo 服务器 - 我只是使用参考 express-graphQL 包）。我的数据是用_id存储在mongoDB中的，但是客户端的实际数据使用id作为id。

apollo 客户端是这样定义的：

new ApolloClient(
    Object.assign(
      {
        reduxRootSelector: state => state.apollo,
        dataIdFromObject: o => o.id
      },
      opt
    )
  );

我有一个父组件，它使用 从 'src/graphql/queries/courses.gql

导入课程

@graphql(courses)
export default class CoursesPage extends Component {
  constructor(props){
    super(props)
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleDelete(event) {
    this.props.mutate({ variables: {id: selectedId}}
              .catch(err => console.log(err))
  }

  render() {
    return (
      { this.props.data.courses.map(course =>
         <CourseDelete selectedId={course.id} key={course.id} />
        })
      }
    )
  }

}

还有一个看起来像这样的子组件：

import deleteCoursefrom 'src/graphql/mutations/deleteCourse.gql

@graphql(deleteCourse)
export default class CourseDelete extends Component {
  constructor(props){
    super(props)
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleDelete(event) {
    this.props.mutate({ variables: {id: this.props.selectedId}}
              .catch(err => console.log(err))
  }

  render() {
    return (
      <button onClick={this.handleDelete}>Button</button>
    )
  }

}

deleteCourse.gql:

mutation deleteCourse($id: String!) {
  deleteCourse(id: $id) {
    id
  }
}

我原来的查询是在 courses.gql 中：

query courses {
  courses {
    id
  }
}

Answer 1

Apollo 的dataIdFromObject 用于更新缓存中已经存在的对象。因此，如果您有一条记录和一个 ID，并且您根据同一 ID 更改其他数据，则侦听存储的 React 组件可以重新渲染。

由于您的 deleteCourse 突变似乎返回相同的 ID，因此它仍然存在于缓存中。您的商店不知道它需要删除 - 它只是使用返回的任何数据更新缓存。由于此突变可能返回相同的 ID，因此没有任何迹象表明应该将其删除。

相反，您需要指定 update function（链接转到官方 Apollo 文档）来显式删除底层存储数据。

在我的新 ReactQL user auth example 中，我执行相同的操作 (see the pertinent LOC here) 以在用户登录后“手动”更新商店。

由于组件最初监听的是“空白”用户，因此我不能依赖 dataObjectFromId 使缓存无效，因为我一开始没有用户，因此也没有 ID。所以我手动显式覆盖了存储状态，这会触发任何监听组件的重新渲染。

我解释这个概念是 YouTube 视频中上述用户身份验证的上下文 - 这是相关的部分：https://youtu.be/s1p4R4rzWUs?t=21m12s