BUG#PWA-3215 Products not found using URL key

packages/peregrine/lib/talons/MagentoRoute/magentoRoute.gql.js

@@ -12,6 +12,7 @@ export const RESOLVE_URL = gql`
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ProductInterface {
                 uid
+                sku
                 __typename
             }
             # eslint-disable-next-line @graphql-eslint/require-id-when-available

packages/peregrine/lib/talons/RootComponents/Product/product.gql.js

@@ -12,9 +12,9 @@ export const GET_STORE_CONFIG_DATA = gql`
     }
 `;
 
-export const GET_PRODUCT_DETAIL_QUERY = gql`
-    query getProductDetailForProductPage($urlKey: String!) {
-        products(filter: { url_key: { eq: $urlKey } }) {
+export const GET_SINGLE_PRODUCT_DETAIL_QUERY = gql`
+    query getProductDetailForProductPage($sku: String!) {
+        products(filter: { sku: { eq: $sku } }) {
             items {
                 id
                 uid
@@ -27,5 +27,5 @@ export const GET_PRODUCT_DETAIL_QUERY = gql`
 
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getProductDetailQuery: GET_PRODUCT_DETAIL_QUERY
+    getSingleProductDetailQuery: GET_SINGLE_PRODUCT_DETAIL_QUERY
 };

packages/peregrine/lib/talons/RootComponents/Product/useProduct.js

@@ -24,10 +24,10 @@ import { useEventingContext } from '../../../context/eventing';
  * @returns {Bool}      result.product - The product's details.
  */
 export const useProduct = props => {
-    const { mapProduct } = props;
+    const { mapProduct, sku } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getStoreConfigData, getProductDetailQuery } = operations;
+    const { getStoreConfigData, getSingleProductDetailQuery } = operations;
     const { pathname } = useLocation();
     const [
         ,
@@ -45,12 +45,12 @@ export const useProduct = props => {
     const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
-    const { error, loading, data } = useQuery(getProductDetailQuery, {
+    const { error, loading, data } = useQuery(getSingleProductDetailQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
         variables: {
-            urlKey
+            sku
         }
     });
 

packages/venia-ui/lib/RootComponents/Product/product.js

@@ -18,9 +18,10 @@ import ProductShimmer from './product.shimmer';
  */
 
 const Product = props => {
-    const { __typename: productType } = props;
+    const { __typename: productType, sku } = props;
     const talonProps = useProduct({
-        mapProduct
+        mapProduct,
+        sku
     });
 
     const { error, loading, product } = talonProps;