README

Magento 2模块，用于从GraphQL会话同步到Knockout会话，以及从Knockout会话同步到GraphQL会话。

摘要

• GraphQL购物车令牌（也称为masked_id）被添加到Knockout前端（customerData.get('cart')）的CustomerDatas部分的购物车中，Knockout会自动同步到本地存储；
• 在本地存储中，你可以从mage-cache-storage.cart.masked_id再次获取GraphQL令牌，例如如果你是从常规Knockout前端切换到基于React的结账；

致谢

感谢Willem Wigman提出了将购物车令牌放在数据部分的想法。

购物车概念验证

在React中使用GraphQL客户端生成购物车令牌

mutation {
  createEmptyCart
}

结果可能如下所示

vGS4ZLj6LkFVrH5CkAPEapLhgfbsoQKF

现在你应该能够导航到Knockout前端。修改购物车（添加新项目，更改数量或清除本地存储）后，你可以检查本地存储条目mage-cache-storage.cart.masked_id：它应包含上述相同的令牌。

如果你在Knockout前端中添加产品到购物车，同样的产品也应该在GraphQL会话中存在

query cart($cartId: String!) {
  cart(cart_id: $cartId){
    id
    items {
      product {
        sku
      }
    }
  }
}

现在，添加一个产品到购物车（在这种情况下，使用产品SKU 24-MB04）

mutation addToCart($cartId: String!) {
  addSimpleProductsToCart(input: {
    cart_id: $cartId, 
    cart_items: [{data: {quantity: 1, sku: "24-MB04"}}]
  }) {
    cart {
      id
      total_quantity
      items {
        id
        prices {
          row_total {
            currency
            value
          }
        }
        product {
          url_key
        }
      }
    }
  }
}

接下来，转到Knockout前端，清除本地存储mage-cache-storage.cart（或在Knockout中通过customerData.clear()执行此操作）并再次检查购物车。

客户概念验证

在React中使用GraphQL客户端生成客户令牌

mutation login($email:String!, $password:String!) {
  generateCustomerToken(email:$email, password:$password) {
    token
  }
}

接下来，在Knockout前端以相同客户身份登录。本地存储项mage-cache-storage.customer.customer_token现在引用的是相同的GraphQL令牌。

这可能需要一些增强，以便你在任一前端立即登录，而不会失去安全性。