Apollo客戶端寫入查詢不更新UI

我們正在用Apollo客戶端構建離線的第一個React Native應用程序。目前，我正嘗試在離線狀態下直接更新Apollo Cache以樂觀地更新UI。自從我們離線後，我們不會嘗試觸發突變，直到連接處於「Online」狀態，但希望UI在離線狀態下觸發突變之前反映這些更改。我們使用http://dev.apollodata.com/core/read-and-write.html#writequery-and-writefragment中的readQuery/writeQuery API函數。並且能夠通過Reacotron查看正在更新的緩存，但是，UI不會隨着此緩存更新的結果而更新。Apollo客戶端寫入查詢不更新UI

const newItemQuantity = existingItemQty + 1; 
    const data = this.props.client.readQuery({ query: getCart, variables: { referenceNumber: this.props.activeCartId } }); 
    data.cart.items[itemIndex].quantity = newItemQuantity; 
    this.props.client.writeQuery({ query: getCart, data });

來源

2017-08-29 Dadles

如果你看一下文檔的例子，你會看到他們使用的數據在一個不變的方式。傳遞給寫查詢的數據屬性與讀取的數據屬性不同。 Apollo不太可能支持這個對象的變化，因爲它不會很有效地檢測出你修改了哪些屬性，而不需要在前後進行深度拷貝和數據比較。

const query = gql` 
    query MyTodoAppQuery { 
    todos { 
     id 
     text 
     completed 
    } 
    } 
`; 
const data = client.readQuery({ query }); 
const myNewTodo = { 
    id: '6', 
    text: 'Start using Apollo Client.', 
    completed: false, 
}; 
client.writeQuery({ 
    query, 
    data: { 
    todos: [...data.todos, myNewTodo], 
    }, 
});

所以你應該嘗試相同的代碼而不改變數據。您可以使用例如的lodash/fp來幫助您

const data = client.readQuery({...}); 
const newData = set("cart.items["+itemIndex+"].quantity",newItemQuantity,data); 
this.props.client.writeQuery({ ..., data: newData });

來源

2017-09-08 21:48:39

Apollo客戶端寫入查詢不更新UI

回答

相關問題