Question

我试图通过从头开始实施TodoMVC来学习Relay。我可以查询我的数据，这样做效果很好：

query {
  allTodos(first: 100) {
    totalCount
    completedCount
    edges {
      node {
        id
        text
        completed
      }
    }
  }
}

我想从这里将totalCount和completedCount元数据添加到连接中：http://graphql.org/learn/pagination/#end-of-list-counts-and-connections
在此示例中类似：https://github.com/graphql/swapi-graphql/blob/master/src/schema/index.js#L78

现在我正在编写一个变异来更改completed给定Todo的{{1}}字段。我收集我将需要在变异有效负载中返回新的id，但我不确定如何在客户端存储中实现completedCount来更新它。我的连接没有getConfigs()，对吧？我的架构设计有缺陷吗？谢谢！

Answer 1

假设您的变异返回viewer，您需要将viewer添加到fatQuery和getConfigs。我认为this tutorial可能会有所帮助。以下是与您的任务相关的摘录：

添加Todo更复杂。原因是我们需要不仅更新我们将创建的Todo对象的状态，而且也是存储它的连接 - 待办事项的数量会改变，以及边缘中Todo节点的列表。
import Relay from 'react-relay';

export default class AddTodoMutation extends Relay.Mutation {
  static fragments = {
    viewer: () => Relay.QL`fragment on ReindexViewer {
      id
      allTodos {
        count,
      }
    }`
  };

  getMutation() {
    return Relay.QL`mutation{ createTodo }`;
  }

  getVariables() {
    return {
      text: this.props.text,
      complete: false,
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on _TodoPayload {
        changedTodoEdge,
        viewer {
          id,
          allTodos {
            count
          }
        }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentID: this.props.viewer.id,
      connectionName: 'allTodos',
      edgeName: 'changedTodoEdge',
      rangeBehaviors: {
        '': 'prepend',
      },
    }, {
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        viewer: this.props.viewer.id,
      },
    }];
  }

  getOptimisticResponse() {
    return {
      changedTodoEdge: {
        node: {
          text: this.props.text,
          complete: false,
        },
      },
      viewer: {
        id: this.props.viewer.id,
        allTodos: {
          count: this.props.viewer.allTodos.count + 1,
        },
      },
    };
  }
}
为了执行此突变，我们需要一些可能不存在的数据   可用于组件 - 查看器对象的ID和计数   allTodos连接。因此我们需要指定片段   变异与我们为容器指定它们的方式相同。

这次我们的配置也更复杂 - 我们需要添加新的配置   Todo连接，所以我们使用RANGE_ADD变异配置。中继   期望在有效载荷中传递边缘，而不仅仅是Todo，Reindex   为此提供changedTodoEdge。最后我们需要获取更新   来自服务器和此查看器字段的连接计数是   可用于每个有效载荷。

在我们的乐观更新中，我们增加了allTodos的数量，这样   我们毫不拖延地更改“总”显示。

如何更新客户端存储中的连接元数据？

1 个答案: