reactjs - 通过观察 ID 使 Apollo 客户端自动更新缓存

Question

我尝试使用带有 Apollo 客户端的 Next.js 设置 Shopify 商店。我只是想知道每当我将新商品放入购物车（在另一个组件中）时，让购物车组件从购物车中重新获取商品的最简单方法是什么。有问题的两个查询如下：

query ($id: ID!) {
    node(id: $id) {
        id
        ... on Checkout {
            lineItems(first: 250) {
                edges {
                    node {
                        id
                        title
                        quantity
                    }
                }
            }
        }
    }
}

在购物车组件中和

mutation checkoutLineItemsAdd(
    $lineItems: [CheckoutLineItemInput!]!
    $checkoutId: ID!
) {
    checkoutLineItemsAdd(lineItems: $lineItems, checkoutId: $checkoutId) {
        checkout {
            id
        }
    }
}

在产品组件中。

阿波罗文档说

如果突变更新了单个现有实体，Apollo 客户端可以在突变返回时自动更新其缓存中该实体的值。为此，突变必须返回被修改实体的 id，以及被修改字段的值。方便的是，突变在 Apollo Client 中默认执行此操作。

我想知道结帐ID是否可以以某种方式用于在我的情况下启动此行为？

标签： reactjsnext.jsapollo-clientshopify-api

Answer 1

我必须在突变查询中包含缓存信息，如下所示：

mutation checkoutLineItemsAdd(
    $lineItems: [CheckoutLineItemInput!]!
    $checkoutId: ID!
) {
    checkoutLineItemsAdd(lineItems: $lineItems, checkoutId: $checkoutId) {
        checkout {
            id
            lineItems(first: 250) {
                edges {
                    node {
                        id
                        title
                        quantity
                    }
                }
            }
        }
    }
}