3

私は理解しようとしていますRANGE_ADD。のミューテーション構成にRANGE_ADD必要なすべての情報を提供しました。命名規則を使用viewerし、接続を 内にネストしますviewer。以下は、私の完全なリレーミューテーションがどのように見えるかです...

import Relay from "react-relay";

export default class CreateTeamMutation extends Relay.Mutation {
  static fragments = {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
      }
    `
  }

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

  getVariables() {
    return {
      name: this.props.name
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on CreateTeamPayload {
        edge,
        viewer {
          teams
        }
      }
    `;
  }

  getConfigs() {
    console.log(this.props.viewer);
    return [{
      type: "RANGE_ADD",
      edgeName: "edge",
      parentID: this.props.viewer.id,
      parentName: "viewer",
      connectionName: "teams",
      rangeBehaviors: {
        "": "append"
      }
    }];
  }
};

idのフラグメントを提供しますviewer。これは、実行時に 内getConfigsに存在することがわかります。

GraphQL ミューテーション レスポンス ペイロードでCreateTeamPayloadは、viewerフィールドが提供されているため、Relay は のミューテーション構成内で接続を利用できますRANGE_ADD。また、 内CreateTeamPayloadでは、新しいエッジが として提供されedgeます。

これら 3 ビットの情報 (親のビューアー ID、接続情報、エッジ) だけで十分なようですRANGE_ADD。また、Relay がミューテーション構成のためにデータにアクセスできるように、fat クエリを介してサーバーからこのデータを要求するようにします。

ただし、リレーは、ファットクエリで指定したものと、サーバーにディスパッチするものにミューテーション構成に必要なものを含めていないようです。Relay が要求しているのはclientMutationId. これがRelayからのリクエストです...

{
  "query": "mutation CreateTeamMutation($input_0:CreateTeamInput!){createTeam(input:$input_0){clientMutationId}}",
  "variables": {
    "input_0": {
      "name": "foo bar",
      "clientMutationId": "0"
    }
  }
}

そして、連鎖反応のように、これにより、ミューテーション構成のviewerandedgeを期待している Relay がエラーをスローします...

Warning: writeRelayUpdatePayload(): Expected response payload to include the newly created edge `edge` and its `node` field. Did you forget to update the `RANGE_ADD` mutation config?

Relayに含まれていた場合、これらの必須フィールドは完全にそこにある可能性があります。これが機能RANGE_ADDするために同行する必要がありREQUIRED_CHILDRENますか? ミューテーションはサーバーに送信され、サーバー上にレコードが作成されます。クライアント側のミューテーション構成が変更されたデータをストアに組み込むことができないだけです。

4

1 に答える 1