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

我试图通过从零开始实施TodoMVC来学习中继。我可以查询我的数据是这样它运作良好：如何更新客户端存储中的连接元数据？

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给定其id。我收集我将需要在突变有效载荷中返回新的completedCount，但我不确定如何实施getConfigs()以在客户端存储中更新此项。我没有用于连接的id，对不对？我的模式设计是否存在缺陷？谢谢！

来源

2016-11-07 Dan Train

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

添加Todo更复杂。原因是我们需要更新不仅是我们将创建的Todo对象的状态，而且还有一个存储它的连接 - Todos的计数将会改变，以及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, 
     }, 
     }, 
    }; 
    } 
} 
为了执行这一突变，我们需要一些数据可能不是提供给组件 - allTodos连接的观众对象的ID和计数。因此，我们需要为我们为容器指定它们的方式指定突变的片段。

我们的配置也更复杂 - 我们需要将新的 Todo添加到连接，因此我们使用RANGE_ADD突变配置。继电器预计在有效载荷中传递边缘，而不仅仅是Todo，Reindex 为此提供了changedTodoEdge。最后，我们需要从服务器获取更新的连接计数，并且对于此查看器字段，每个有效负载均可用。

在我们的乐观更新中，我们增加了allTodos的数量，以便我们无任何延迟地改变我们的“总计”显示。

来源

2017-01-27 15:14:33 Brandon

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

回答

相关问题