突变后的 Apollo 更新不会触发重新渲染

Posted 2023-03-10

【中文标题】突变后的 Apollo 更新不会触发重新渲染

【英文标题】：Apollo update after a mutation isn't triggering a rerender

【发布时间】：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 />
  

【参考方案1】：

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

TLDR：对 findOrCreate 操作使用查询！