迁移后如何更新存储

Question

我有一个评论列表，其中每个评论都是 Message 个组成部分。

一条消息有一个 "edit" 按钮，单击此按钮时，它的文本将被替换为未连接到 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 表示会自动更新组件收听 returns 他们的任何查询。更多关于 automatic cache updates.

迁移后如何更新存储

How storage gets updated after migration

react-apollo

apollo-client