私は理解しようとしています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"
}
}
}
そして、連鎖反応のように、これにより、ミューテーション構成のviewer
andedge
を期待している 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
ますか? ミューテーションはサーバーに送信され、サーバー上にレコードが作成されます。クライアント側のミューテーション構成が変更されたデータをストアに組み込むことができないだけです。