【问题标题】:Apollo update after a mutation isn't triggering a rerender突变后的 Apollo 更新不会触发重新渲染
【发布时间】:2018-03-05 08:08:58
【问题描述】:

我遇到了 graphQL apollo 中的突变问题。当页面加载时,它将运行查询lectureResponseQuery,如果查询== null,则运行突变fetchLectureResponseMutation 以创建新文档。此突变返回新结果,我对查询进行更新,我希望组件将使用新数据重新呈现,但事实并非如此。有谁知道这是为什么?谢谢!

@graphql(fetchLectureResponseMutation, {
  options: ownProps => ({
    variables: { lectureName: ownProps.match.params.lectureName },
    update: (proxy, { data: { fetchLectureResponse } }) => {
      const data = proxy.readQuery({
        query: lectureResponseQuery,
        variables: { lectureName: ownProps.match.params.lectureName },
      });
      data.lectureResponse = fetchLectureResponse;
      proxy.writeQuery({
        query: lectureResponseQuery,
        data,
      });
    },
  }),
  name: 'fetchLectureResponse',
})
@graphql(lectureResponseQuery, {
  options: ownProps => ({
    variables: { lectureName: ownProps.match.params.lectureName },
  }),
})
class LecturePage extends React.PureComponent {
  componentWillUpdate(nextProps) {
    if (nextProps.data.lectureResponse === null) {
      this.props.fetchLectureResponse();
    }
  }


  render() {
    const { data } = this.props;
    if (data.loading || data.lectureResponse === null) {
      return <Loading />;
    }

    return <LectureLayout lectureResponse={data.lectureResponse} />
  }
}

【问题讨论】:

    标签: reactjs graphql apollo react-apollo


    【解决方案1】:

    对于将来研究此问题的任何人 - 核心问题是我想做一个查找或创建操作。当查询只返回不存在的新对象时,这会更好,因为这样您只需进行 1 次后端调用,这意味着您不必同步查询和突变之间的时间。

    TLDR:对 findOrCreate 操作使用查询!

    【讨论】:

      猜你喜欢
      • 2018-08-12
      • 2021-01-23
      • 2021-06-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-08-18
      • 2019-05-07
      • 2017-06-09
      相关资源
      最近更新 更多