Download the PHP package yireo/magento2-sync-graph-ql-session-with-frontend without Composer
On this page you can find all versions of the php package yireo/magento2-sync-graph-ql-session-with-frontend. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download yireo/magento2-sync-graph-ql-session-with-frontend
More information about yireo/magento2-sync-graph-ql-session-with-frontend
Files in yireo/magento2-sync-graph-ql-session-with-frontend
Package magento2-sync-graph-ql-session-with-frontend
Short Description Magento 2 module to sync a GraphQL session with the regular session
License OSL-3.0
Homepage https://github.com/yireo/Yireo_SyncGraphQlSessionWithFrontend
Informations about the package magento2-sync-graph-ql-session-with-frontend
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 sectioncart
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:
The result might be something like the following:
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:
Now, add a product to the cart (in this case with a product SKU 24-MB04
:
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:
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.
All versions of magento2-sync-graph-ql-session-with-frontend with dependencies
magento/module-checkout Version ^100.1
magento/module-quote Version ^100.1|^101.0