Question

我正在使用react-apollo来管理我的react应用程序中的客户端存储，因此没有后端graphql服务器。与apollo相关的所有内容都在客户端运行。我将所有UI状态存储在ApolloClient的缓存中。而且，我还在客户端定义了所有解析器。

以下是新建客户端实例的代码：

new ApolloClient({
    cache,
    resolvers: {
      Mutation: {
        ...cartResolvers,
      },
    },
    typeDefs: [typeDefs]
  });

我已阅读本文https://www.apollographql.com/docs/angular/features/cache-updates/#automatic-store-updates，其中涉及在阿波罗graphql突变和查询中使用ID自动更新存储。但这似乎不起作用。我下面有查询和变异：

export const queryCart = gql`
  {
    cart @client {
      items {
        id
        name
        price
        quantity
        image
      }
    }
  }
`;

export const addToBasket = gql`
  mutation addToBasket($sku: ID!) {
    addToBasket(id: $sku)  @client {
      items {
        id
        name
        price
        quantity
        image
      }
    }
  }
`;

我已经为该突变addToBasket定义了解析器。

const addToBasket = (_parent: any, item: { id: string }, { cache }: ResolverCacheType): CartProps => {
   ...
   return {
      items: [ {id, name, price, quantity, image } ]
   }
}

我发现，即使我在解析器中返回了id，缓存也不会更新，查询也不会响应。我可以通过在cache.writeData的解析中手动更新缓存数据来使其正常工作。

Answer 1

您的用例与react-apollo提供的自动更新方案不同：您运行的变异不会更新项目本身。相反，它会更新一个数组，该数组不会以任何方式供react-apollo跟踪其更改。

要利用自动更新功能，可以将item数组的数据结构从现在的简单数组更改为看起来类似于以下内容的对象：

{ _id, [{id, name, price, ...}]}

查询和变异都应返回此对象。然后，您将进行与the doc中的示例相同的设置。变异运行后，返回对象与本地缓存具有相同的_id，因此react-apollo知道需要更新缓存数据。

或者，您可以如上所述手动使用cache.writeData或使用refetchQueries更新购物车商品数组。

为什么“自动商店更新”在React应用程序的客户端商店上不起作用？

1 个答案: