Apolloクライアントクエリを更新しないUIを書き込む

Question

私たちは、オフラインの最初のReactネイティブアプリケーションをApollo Clientで構築しています。現在、オフラインのときにApolloキャッシュを直接更新して、UIを楽観的に更新しようとしています。私たちはオフラインなので、connectが "Online"になるまで突然変異を起こそうとはしませんが、まだオフラインの間に突然変異が起こる前にこれらの変更をUIに反映させたいと思います。からreadQuery/writeQuery API関数を使用しています。 Reacotronを介して更新中のキャッシュを表示することはできますが、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 }); 

Answer 1

ドキュメントの例を見ると、データが不変の形で使用されていることがわかります。書き込み照会に渡されるデータ属性は、読み取られたものと同じオブジェクトではありません。このオブジェクトを突然変異させることは、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], 
    }, 
}); 

したがって、データを変更せずに同じコードを試してください。たとえば、setのlodash/fpを使用すると、

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