Модифицировать массив объектов в кеше Apollo

Question

Я использую React с клиентом Apollo.

Моя общая цель - использовать кэш Apollo в качестве "глобального состояния или хранилища", в котором я могу запрашивать данные о продукте из любого места в моем приложении.

Я запускаю запрос, чтобы перенести данные о моем продукте в приложение с сервера, и Apollo автоматически сохраняет эти данные в кеше.Это здорово, но я бы хотел добавить пару значений к каждому из этих кэшированных продуктов, теперь, когда они на стороне клиента.Таким образом, когда я сделаю запрос к своим продуктам @client, я смогу получить доступ к этим новым значениям и для этих объектов продукта.

Я прочитал большую часть документации Apollo по мутациям, распознавателям и кешу, но все жене совсем понимаюЛюбая помощь будет принята с благодарностью!

Вот песочница с кодом, показывающая упрощенную модель моей проблемы: https://codesandbox.io/s/61k1988wrr

А вот для сохранения постоянной записи вот как выглядит мое упрощенное приложение:

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider, Query } from "react-apollo";
import gql from "graphql-tag";
import Client from "./Client";


const Root = () => {
  return (
    <ApolloProvider client={Client}>
      <Query query={PRODUCTS_QUERY}>
        {({ loading, data }) => {
          if (loading) return <div>Loading</div>;
          const { products } = data;

          return products.map(product => {
            // I want to include this salePrice value with each product in the Apollo cache
            // so that I can query it anywhere in my app. How can I do this?
            const salePrice = Math.round(product.price - product.price * 0.1);

            return (
              <div style={{ margin: "50px 20px" }} key={product.id}>
                <p>{`Product is: ${product.product}`}</p>
                <p>{`Price is: ${product.price}`}</p>
              </div>
            );
          });
        }}
      </Query>
    </ApolloProvider>
  );
};


const PRODUCTS_QUERY = gql`
  query allProducts {
    products {
      id
      product
      price
    }
  }
`;


ReactDOM.render(<Root />, document.getElementById("root"));

Client.js

import ApolloClient from 'apollo-boost';


const resolvers = {}


const Client = new ApolloClient({
  uri: 'https://api-useast.graphcms.com/v1/cjnddfnhj0g0q01glc9x9woh8/master',
  clientState: {
    defaults: {},
    resolvers
  }
});

export default Client;