私が達成しようとしている流れは
- ユーザーが「Create X」ボタンをクリック
- リレーミューテーションを使用して空白の X を作成する
- モーダルを開いて X を編集する
X
x (タイプ)、その親、およびそれらの間のエッジを返すサーバー側のミューテーションがあるため、クライアント側で実行しRANGE_ADD
てストアを更新できます。
const mutation = new CreateBlankXMutation({ ... })
Relay.Store.commitUpdate(mutation, {
onSuccess: ({ createBlankXMutation }) => {
const { x } = createBlankXMutation
showModal(EditXModal, { x })
}
})
showModal
最初の引数からコンポーネントを作成し、2 番目の引数から props を提供する redux アクションです。
EditXModal
中継コンテナです。
{
fragments: {
x: () => Relay.QL`
fragment on X { ... }
`
}
}
私が得ている特定のエラーは
RelayContainer: component `Container` was rendered with variables
that differ from the variables used to fetch fragment `creative`.
The fragment was fetched with variables `(not fetched)`,
but rendered with variables `{}`.
通常、フラグメントを適切に構成するのを忘れたときにそのエラーが発生するため、 に、構成CreateBlankXMutation
に追加しようとしましEditXModal.getFragment(...)
たgetFatQuery
(REQUIRED_CHILDREN
両方とも の下x
) - ダイスなし、同じエラー。
オブジェクトを「検査」すると ( console.log
)、変異後にフラグメントが正しく設定されていることがわかります -x
のように見え{ id: "...", ..., _someField: ... }
ますが、モーダルがロードされるとフラグメントは適切に解決されます (x
同じように見えます -_...
フラグメントのプロパティはまだあります)。