使用結果作爲中繼集裝箱道具

用戶點擊一個按鈕「創建X」
使用繼電器突變
創建一個空白X打開一個模式編輯X

我有返回x（X型）的服務器端的突變，其母公司，以及它們之間的邊緣，所以我可以做一個RANGE_ADD客戶方，並更新商店。

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

showModal是一個終極版動作這產生從第一個參數的部件，並將其提供從第二個參數道具。

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看上去是一樣的 - 與_...片段屬性，仍然）。

來源

2017-08-17 Tyler Sebastian

-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，所有片段都可以被適當地解決。

來源

2017-08-17 18:53:15

使用結果作爲中繼集裝箱道具

回答

相關問題