Question

我在Apollo Client中使用React。

我的总体目标是将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;

修改Apollo缓存中的对象数组

0 个答案: