Product detail page rendering issue

[Starotitorov]

This issue is for the following packages:

[x] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-module
[ ] pwa-devdocs
[ ] upward-js
[ ] upward-spec

This issue is a:

[x] Bug
[ ] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version	2.3
Operating System + version	Ubuntu 18.04
node.js version (node -v)	8.12.0
npm version (npm -v)	6.4.1

Description

I installed venia sample data. When I open category page and click on a product item, the application navigates me to the product detail page, GraphQL query returns empty array of items and rendering of the page fails because of this line https://github.com/magento-research/pwa-studio/blob/release/2.0/packages/venia-concept/src/RootComponents/Product/Product.js#L71 .

GraphQL request payload:

{"operationName":"productDetail","variables":{"urlKey":"silver-sol-earrings","onServer":false},"query":"query productDetail($urlKey: String, $onServer: Boolean!) {\n productDetail: products(filter: {url_key: {eq: $urlKey}}) {\n items {\n sku\n name\n price {\n regularPrice {\n amount {\n currency\n value\n __typename\n }\n __typename\n }\n __typename\n }\n description\n media_gallery_entries {\n label\n position\n disabled\n file\n __typename\n }\n meta_title @include(if: $onServer)\n meta_keyword @include(if: $onServer)\n meta_description @include(if: $onServer)\n __typename\n }\n __typename\n }\n}\n"}

Response:

{"data":{"productDetail":{"items":[],"__typename":"Products"}}}

HAR:
magento-venia-concept-djt-z.local.pwadev.zip

Expected result:

Product detail page renders correctly. GraphQL query should return items.

Possible solutions:

Start checking if array of items is empty, correct this line https://github.com/magento-research/pwa-studio/blob/release/2.0/packages/venia-concept/src/RootComponents/Product/Product.js#L71 .

[zetlen]

@Starotitorov This should theoretically never happen, because the product detail query should never run unless urlResolver has already determined that a product exists with that urlKey.

Your HAR file shows that your browser posted the following GraphQL query on line 75:

          "postData": {
            "mimeType": "application/json",
            "text": "{\"query\":\"{\\n                    urlResolver(url: \\\"/silver-sol-earrings.html\\\") {\\n                        type\\n                        id\\n                    }\\n                }\"}"
          }

Your Magento instance's response is visible on line 140:

          "content": {
            "size": 50,
            "mimeType": "application/json",
            "compression": 0,
            "text": "{\"data\":{\"urlResolver\":{\"type\":\"PRODUCT\",\"id\":5}}}"
          },

You can see that the urlResolver query response indicates that the URL /silver-sol-earrings.html should resolve to a particular product detail page.

So the PWA loads the Product RootComponent, and executes the query in line 584 of your HAR:

          "postData": {
            "mimeType": "application/json",
            "text": "{\"operationName\":\"productDetail\",\"variables\":{\"urlKey\":\"silver-sol-earrings\",\"onServer\":false},\"query\":\"query productDetail($urlKey: String, $onServer: Boolean!) {\\n  productDetail: products(filter: {url_key: {eq: $urlKey}}) {\\n    items {\\n      sku\\n      name\\n      price {\\n        regularPrice {\\n          amount {\\n            currency\\n            value\\n            __typename\\n          }\\n          __typename\\n        }\\n        __typename\\n      }\\n      description\\n      media_gallery_entries {\\n        label\\n        position\\n        disabled\\n        file\\n        __typename\\n      }\\n      meta_title @include(if: $onServer)\\n      meta_keyword @include(if: $onServer)\\n      meta_description @include(if: $onServer)\\n      __typename\\n    }\\n    __typename\\n  }\\n}\\n\"}"
          }

If Magento's urlResolver says that /silver-sol-earrings.html is a product, then that means there exists a product with the urlKey of silver-sol-earrings. However, your Magento instance responded to the above query on line 649, with:

          "content": {
            "size": 63,
            "mimeType": "application/json",
            "compression": 0,
            "text": "{\"data\":{\"productDetail\":{\"items\":[],\"__typename\":\"Products\"}}}"
          },

I have to conclude that this is a malfunction in your particular Magento instance, unless you can produce a minimal reproducible case on another instance. If you do, please reopen!