2017-08-17 6 views
1

流れは利用リレー突然変異の結果を

  1. ユーザーは
  2. 「Xを作成」ボタンをクリックされた中継突然変異
  3. を使用して空白のXを作成します私は、サーバー側(タイプXの)Xを返す突然変異、その親、およびそれらの間のエッジので、私はRANGE_ADDクライアント側の操作を行うと、ストアを更新することができますを持っているX

を編集するためのモーダルを開きます。

const mutation = new CreateBlankXMutation({ ... }) 
Relay.Store.commitUpdate(mutation, { 
    onSuccess: ({ createBlankXMutation }) => { 
    const { x } = createBlankXMutation 
    showModal(EditXModal, { x }) 
    } 
}) 

showModal最初の引数からコンポーネントを作成し、それが二番目の引数から小道具供給するReduxの作用です。

EditXModalは私が取得しています特定のエラーは、あなたがそうCreateBlankXMutationで、適切にあなたのフラグメントを構成することを忘れたときにあなたは通常、そのエラーを取得する

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 `{}`. 

ある

{ 
    fragments: { 
    x:() => Relay.QL` 
     fragment on X { ... } 
    ` 
    } 
} 

リレーコンテナ、

です私はを getFatQueryに、 REQUIRED_CHILDRENの設定に(両方の時間を xの下に)加えようとしました - ダイスも同じエラーもありませんでした。

私はオブジェクト(console.log)「を調べる」私は断片は、突然変異した後に正しく装着されていることを確認できた場合 - x{ id: "...", ..., _someField: ... }のように見えますが、モーダルはxは同じに見えます(ロードされるとフラグメントが適切に解決されている - と_...フラグメントプロパティ、まだ)。

答えて

-1

私はそれを修正しましたが、私はそれを修正した方法が好きではありませんので、他の人からの洞察に感謝します。

Relay.Store.commitUpdate(mutation, { 
    onSuccess: ({ createBlankXMutation }) => { 
    const { x: { id: xId } } = createBlankXMutation 

    // re-fetch all xs in the parent container 
    this.props.relay.forceFetch(null, (readyState) => { 
     if (readyState.done) { 
     const { xList } = this.props // all xs in the parent 
     const x = xList.find((x) => x.id === xId) 

     this.props.showModal(EditXModal, { x }) 
     } 
    }) 
    } 
}) 

親は、適切な断片をフェッチするため、オブジェクトがEditXModalによってロードされるとき、すべての断片が正しく解決されるために利用可能です。

関連する問題