为什么react应用程序中的“自动存储更新”在客户端存储上不起作用？

Question

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

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

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

我读过这篇文章https://www.apollographql.com/docs/angular/features/cache-updates/#automatic-存储更新关于使用apollo 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，缓存也不会更新，查询也不会反应。我可以通过手动更新resolve by缓存中的缓存数据来实现。写入数据。

Answer 1

您的用例与react apollo提供的自动更新场景不同：您运行的变异不会更新项目本身。相反，它会更新一个未以任何方式设置关键帧的数组，以便“react apollo”跟踪其更改。

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

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

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

或者，您可以手动使用cache.writeData，正如您已经提到的，或者使用refetchQueries来更新购物车项目数组。