GraphQL Request Triggered on Product Click Resulting a 404 Page on a ScandiPWA (6.2.1)

[Ahmed Mohamed]

The Issue

Working on a ScandiPWA (6.2.1) extension for algolia search, and my plugin is centered around the Component/SearchField/Component and renderSearch function. I've encountered an issue where, upon clicking on any product returned by my search, a GraphQL request is triggered, resulting in a 404 page on the product page. However, upon reloading the page, it works fine. Additionally, if I visit the same product again, the GraphQL request does not get fired.

Request: http://localhost:81/graphql?hash=519789&identifier_1=%22blue-slim-fit-jeans-cliff-3.html%22
Response:

{
    "errors": [
        {
            "message": "The CMS page with the \"blue-slim-fit-jeans-cliff-3.html\" ID doesn't exist.",
            "path": [
                "cmsPage"
            ]
        }
    ],
    "data": {
        "cmsPage": null
    }
}

console error: executeGet failed message: The CMS page with the "blue-slim-fit-jeans-cliff-3.html" ID doesn't exist.

The solution:

• How to override: https://docs.scandipwa.com/developing-with-scandi/override-mechanism/overriding-the-index-file

1. For index.html or index.php: find window.actionName object declaration and add the initialUrl property as following:

window.actionName = {
            type: `<?= $this->getAction(); ?>`,
            id: parseInt(`<?= $this->getId(); ?>`) || null,
            sku: `<?= $this->getSku(); ?>` || null,
            name: `<?= $this->getName(); ?>`,
            display_mode: `<?= $this->getDisplayMode(); ?>`,
            cmsPage: <?= json_encode($this->getCmsPage()); ?> || {},
            description: `<?= $this->getDescription(); ?>`,
            slider: <?= json_encode($this->getSlider()); ?> || {},
            categoryDefaultSortBy: `<?= $this->getCategoryDefaultSortBy(); ?>`,
            initialUrl: (location && location.pathname) || ''
        };

2. Override UrlRewrites.container

import { connect } from 'react-redux';

import {
    mapDispatchToProps,
    mapStateToProps,
    UrlRewritesContainer as SourceUrlRewritesContainer,
} from 'SourceRoute/UrlRewrites/UrlRewrites.container';

export {
    mapStateToProps,
    mapDispatchToProps,
};

/** @namespace SykehusapotekenePwa/Route/UrlRewrites/Container */
export class UrlRewritesContainer extends SourceUrlRewritesContainer {
    componentDidMount() {
        this.initialUrl = window?.actionName?.initialUrl || '';

        if (this.getIsLoading()) {
            this.requestUrlRewrite();
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(UrlRewritesContainer);