Question

我有一个评论列表，每个评论都是Message组件。

邮件中有一个“编辑”按钮，单击该按钮时，其文本将替换为未连接到ApolloClient的表单。

Message组件也仅用于显示数据，未连接到ApolloClient。

代码如下：

import React from 'react';
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apollo';
import { number } from 'prop-types';
import withCurrentUser from '!/lib/hoc/withCurrentUser';
import Message from '!/components/messages/Message';


class CompanyComments extends React.Component {
  static propTypes = {
    companyId: number.isRequired
  };

  updateComment = (content, contentHTML, id) => {
    const {doEditCommentMutation, companyId} = this.props;

    return doEditCommentMutation({
      variables: {
        id: id,
        content: content
      }
    });
  }


  render(){
    const { data: {loading, comments}, companyId } = this.props;

    return(
      <div>
        <ul>
          {
            !loading &&
            comments &&
            comments.map((comment, i)=>(
              <Message
                key={i}
                index={i}
                id={comment.id}
                content={comment.content}
                user={comment.user}
                onReply={this.handleReply}
                handleUpdate={(content, contentHTML)=>(
                  this.updateComment(content, contentHTML, comment.id)
                )} />
            ))
          }
        </ul>
      </div>
    );
  }
}

const getCommentsQuery = gql`query
  getComments(
    $commentableId: Int,
    $commentable: String
  ) {
    comments(
      commentableId: $commentableId,
      commentable: $commentable,
      order: "createdAt ASC"
    ) {
      id
      content
      user {
        id
        nickname
      }
      createdAt
    }
  }
`;

const editCommentMutation = gql`mutation
  editCommentMutation(
    $id: Int!,
    $content: String!
  ) {
    editComment(
      id: $id,
      content: $content
    ) {
      id
      content
      createdAt
      user {
        id
        nickname
      }
    }
  }
`;

export default compose(
  graphql(getCommentsQuery, {
    options: ({companyId}) => ({
      variables: {
        commentableId: companyId,
        commentable: 'company'
      },
      pollInterval: 5000
    })
  }),
  graphql(editCommentMutation, {name: 'doEditCommentMutation'})
)(CompanyComments);

连接到ApolloClient的唯一组件是具有上面代码的该组件。

有趣的行为开始，当执行editComment突变并且getComments查询收到的组件列表得到神奇更新时。

如何？我没有使用乐观的回应或refetch。

这是ApolloClient存储的新行为吗，它代替了Redux，可以自动确定获取的数据中的更改？

Answer 1

我在

中看到pollInterval: 5000

graphql(
  getCommentsQuery, 
  { 
    options : { ... }  // << here
  }
)

pollInterval强制重复获取查询。在您的示例中，每5秒一次。了解更多here

由于Apollo缓存存储了规范化的数据，因此__typename和id相同的所有项目都将在存储中进行更新，并且它的UI表示会针对正在侦听返回的任何查询的组件自动更新他们。有关automatic cache updates的更多信息。

迁移后如何更新存储空间

1 个答案: