# yireo/magento2-sync-graph-ql-session-with-frontend

> Magento 2 module to sync a GraphQL session with the regular session

`composer require yireo/magento2-sync-graph-ql-session-with-frontend`

Canonical URL: https://packagento.com/yireo/magento2-sync-graph-ql-session-with-frontend

## At a glance

- **Vendor**: yireo (https://packagento.com/yireo.md)
- **Latest version**: 0.0.2 — released 2020-07-10
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/yireo/magento2-sync-graph-ql-session-with-frontend and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require yireo/magento2-sync-graph-ql-session-with-frontend:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Magento 2 module to sync a GraphQL session with the regular session

## README

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:

```graphql
mutation {
  createEmptyCart
}
```

The result might be something like the following:

```json
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:
```graphql

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`:

```graphql
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:
```graphql
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](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

### [Unreleased]

### [0.0.2] - 2020-07-10
- Complete refactoring to use CustomerData sections

### [0.0.1] - 2020-05
- Initial draft with a GET token

## Recent Versions

| Version | Released |
|---|---|
| 0.0.2 | 2020-07-10 |
| 0.0.1 | 2020-04-17 |

## Dependencies

### Require

| Package | Constraint |
|---|---|
| magento/framework | ^100.1\|^101.0\|^102.0 |
| magento/module-checkout | ^100.1 |
| magento/module-quote | ^100.1\|^101.0 |

## Quality

Latest release (0.0.2) passes the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | not tested | not tested | – | – |
| 2.4.8 | – | not tested | not tested | – |
| 2.4.9 | – | – | not tested | not tested |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Warning | 2 | 2 warnings (ruleset: Magento2) |
| PHPMD | Warning | 5 | 5 rule violations (UnusedFormalParameter:2, EmptyCatchBlock:2, UnusedPrivateMethod:1) |
| Cpd | Pass | 0 |  |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Error | Error | – | – |
| 2.4.8 | – | Error | Error | – |
| 2.4.9 | – | – | Error | Error |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | N/A | 0 | no resolvable dependency tree to audit — Your requirements could not be resolved to an installable set of packages. Problem 1 |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["yireo/magento2-sync-graph-ql-session-with-frontend"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

yireo is a Magento 2 vendor on Packagento. See https://packagento.com/yireo.md for their full catalogue.