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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (6)

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关于使用IDapollo graphql变异和查询自动更新存储。但它似乎没有用。我有下面的查询和变异:

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

提问于
用户回答回答于

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

您可以cache.writeData按照上面提到的那样手动使用,也可以使用它refetchQueries来更新购物车项目数组。

扫码关注云+社区

领取腾讯云代金券