Yireo SyncGraphQlSessionWithFrontend

Magento 2 module to sync from the GraphQL session to the Knockout session and from the Knockout session to the GraphQL session.

Summary

• The GraphQL cart token (aka masked_id) is added to the CustomerDatas section cart of the Knockout frontend (customerData.get('cart')) which is automatically synced by Knockout to local storage;
• Within local storage, you can fetch the GraphQL token again from mage-cache-storage.cart.masked_id, for instance if you are switching from a regular Knockout frontend to a React-based checkout;

Kudos

Thanks to Willem Wigman for coming up with the idea for putting the cart token in the section data.

Proof-of-Concept for cart

Use a GraphQL client within React to generate a cart token:

mutation {
  createEmptyCart
}

The result might be something like the following:

vGS4ZLj6LkFVrH5CkAPEapLhgfbsoQKF

You should now be able to navigate to the Knockout frontend. After making a modification to the cart (adding a new item, changing the quantity or just wiping out local storage), you can then inspect the local storage entry mage-cache-storage.cart.masked_id: It should hold the same token as mentioned above.

If you add a product to the cart in the Knockout frontend, the same product should be there in the GraphQL session as well:

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

Now, add a product to the cart (in this case with a product 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
        }
      }
    }
  }
}

Next, head over to the Knockout frontend, wipe out local storage mage-cache-storage.cart (or do this in Knockout via customerData.clear()) and inspect the cart again.

Proof-of-Concept for customer

Use a GraphQL client within React to generate a customer token:

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

Next, login as the same customer in the Knockout frontend. The local storage item mage-cache-storage.customer.customer_token now refers to the same GraphQL token.

This probably needs some enhancement, so that you are logged in right away in either frontend, without loosing security.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.

[Unreleased]

[0.0.2] - 2020-07-10

• Complete refactoring to use CustomerData sections

[0.0.1] - 2020-05

• Initial draft with a GET token