クライアント側のストアで接続メタデータを更新するにはどうすればよいですか？

Question

私は最初から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

idのcompletedフィールドをTodoに変更する突然変異を作成しています。 突然変異のペイロードに新しいcompletedCountを返す必要がありますが、getConfigs()を実装してクライアントサイドストアでこれを更新する方法がわかりません。接続にはidがありません。スキーマ設計に欠陥がありますか？ありがとう！

Answer 1

突然変異がviewerを返すと仮定すると、とgetConfigsにviewerを追加する必要があります。私はthis tutorialが役に立つかもしれないと思う。タスクに関連する抜粋は次のとおりです。

Todoを追加する方が複雑です。その理由は、 を更新する必要があるということです。 も格納されている接続 - Todosの数が変更されます。 とTodoノードのリストエッジで。 allTodos接続のビューアオブジェクトのIDとカウント数 - この変異を行うために

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, 
     }, 
     }, 
    }; 
    } 
} 

は、私たちは、コンポーネントが利用できる ではないかもしれないいくつかのデータを必要とします。したがって、我々は容器に指定するのと同じ方法で 変異の断片を指定する必要があります。

私たちの設定は今度はもっと複雑です - 接続に新しい Todoを追加する必要があるので、私たちはRANGE_ADD mutation configを使用します。リレー は、Todo、Reindexだけでなく、ペイロードにエッジが渡されることを予期します。 はchangedTodoEdgeを提供します。最後に、更新された の接続数をサーバーから取得する必要があります。このビューアのフィールドでは、すべてのペイロードで利用可能な です。

私たちの楽観的なアップデートでは、allTodosの数を増やすので、 は「総計」ディスプレイを遅滞なく変更します。