{"id":135647,"date":"2019-06-17T16:38:50","date_gmt":"2019-06-17T16:38:50","guid":{"rendered":"https:\/\/inchoo.net\/?p=33089"},"modified":"2019-06-17T16:38:50","modified_gmt":"2019-06-17T16:38:50","slug":"magento-pwa-studio-routing-and-root-components","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/magento-pwa-studio-routing-and-root-components\/","title":{"rendered":"Magento PWA Studio: Routing and Root Components"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Routing in React is quite complex, and trying to adapt it to work with Magento 2 can be a very challenging task, considering how many URL-related functionalities (like URL rewrites) Magento 2 offers. Luckily, Magento PWA Studio comes with a built-in solution for handling Magento 2 URL-s which is very flexible. In this article, we are going to take a look at the Magento PWA Studio routing and Root Components concept.<\/span><\/p>\n<p><span id=\"more-33089\"><\/span><\/p>\n<p><span style=\"font-weight: 400\">Please note that at the time of writing this article, Magento PWA Studio is still in early development, so some details may be out of date depending on the time you\u2019re reading the article.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Magento PWA Studio Peregrine package comes with a MagentoRouter component which is a wrapper around the <a href=\"https:\/\/github.com\/ReactTraining\/react-router\" target=\"_blank\" rel=\"noopener\">React Router<\/a><\/span><span style=\"font-weight: 400\">&nbsp;and is extended with Magento-specific route-handling functionalities. MagentoRouter compontent is located on the following path inside the folder where pwa studio is located:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">packages\/peregrine\/src\/Router\/Router.js<\/code><\/pre>\n<p><span style=\"font-weight: 400\">Currently, MagentoRouter supports only 3 types of page URL-s:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">CMS Pages<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Category Pages<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Product pages<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400\">How Routing in Magento PWA Studio works<\/span><\/h2>\n<p><span style=\"font-weight: 400\">React Router is extended with Magento Router functionality which, basically, asks Magento 2 (using GraphQL) to return a page type variable based on the received URL. When Magento 2 returns a page type, Magento Router renders a Root Component that has been assigned to the respective page type. <\/span><\/p>\n<p><span style=\"font-weight: 400\">This is how routing in Magento PWA Studio works step-by-step:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\"><strong>MagentoRouter<\/strong> passes the URL to the <strong>MagentoRouteHandler<\/strong> component<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\"><strong>MagentoRouteHandler<\/strong> resolves the route by querying Magento 2 using GraphQL and then it receives page type from the query. Currently, those page types are: <strong>CMS_PAGE<\/strong>, <strong>CATEGORY<\/strong> and <strong>PRODUCT<\/strong>.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">If the URL doesn\u2019t exist, Magento 2 will send out a 404 error (temporary until proper 404 page type has been implemented). If the URL exists, <strong>MagentoRouter<\/strong> will render a <strong>RootComponent<\/strong> which is assigned to the received page type.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400\">How to specify a Root Component for a specific page type<\/span><\/h2>\n<p><span style=\"font-weight: 400\">All Root Component folders must be placed in the following path in Magento PWA studio theme:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">src\/RootComponents\/<\/code><\/pre>\n<p><span style=\"font-weight: 400\">One of the interesting features of Magento PWA studio is that the Root Components are not specified by file type, so you can name the page-specific Root Component folder however you like. For example, for CMS_PAGE type, we can create a following subfolder:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">src\/RootComponents\/MyCMS\/<\/code><\/pre>\n<p><span style=\"font-weight: 400\">In the subfolder, we then create the index.js entry point file with the following content and this is where it gets interesting:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-javascript\"><span class=\"coMULTI\">\/**\n* @RootComponent\n* description = 'Basic CMS Page'\n* pageTypes = CMS_PAGE\n*\/<\/span>\n&nbsp;\n<span class=\"kw5\">export<\/span> <span class=\"br0\">&#123;<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">&#125;<\/span> from <span class=\"st0\">'.\/path\/to\/cms\/main\/component;<\/span><\/code><\/pre>\n<p><span style=\"font-weight: 400\">As you can see, the commented section in index.js defines the RootComponent for a specific page type. If we change <strong>pageTypes<\/strong> variable value to <strong>PRODUCT<\/strong> (webpack restart is required to perform code-splitting again), this component will be used for Product page, and not for CMS page as specified previously.<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Where to look for page type value for a specific page<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Since Magento PWA Studio is still in development, page types are limited to the three types mentioned in the article (CMS, category and product). Memorizing all page type variables when Magento PWA Studio is fully released would be really hard, not to mention custom page type values, in case we add some custom-created pages or pages created by an extension. Luckily, we can see the page type values from the GraphQL schema.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-33092\" src=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2019\/06\/magento-pwa-studio-routing-and-root-components.png\" alt=\"\" width=\"579\" height=\"1000\" \/><\/p>\n<p><span style=\"font-weight: 400\">Magento 2.3 Magento core comes with some modules adapted for GraphQL. And each module containing GraphQL comes with a GraphQL schema which is basically a very detailed and accessible documentation for GraphQL queries. It specifies which GraphQL queries are available, types, interfaces, etc. For example, let\u2019s open up the following file:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">Magento\/CatalogUrlRewriteGraphQl\/etc\/schema.graphqls<\/code><\/pre>\n<p><span style=\"font-weight: 400\">We can see the following line:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">enum UrlRewriteEntityTypeEnum @doc(description: &quot;This enumeration defines the entity type.&quot;) {\nPRODUCT\nCATEGORY\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">These are our page types for product page and category page which can be used in our RootComponents assignment. Now we know where to look for GraphQL schema data. Following the path and naming pattern, you can easily find the page type variable for CMS page in:<\/span><\/p>\n<pre class=\"ish\"><code class=\"language-text\">Magento\/CmsUrlRewriteGraphQl\/etc\/schema.graphqls<\/code><\/pre>\n<pre class=\"ish\"><code class=\"language-text\">enum UrlRewriteEntityTypeEnum {\nCMS_PAGE\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">This is the value that we have used in our example in this article. So you can know which page type value to use either by opening a <strong>schema.graphqls<\/strong> file of the module you are using, or by searching <em>UrlRewriteEntityTypeEnum<\/em>&nbsp;string to list all possible values.<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Peregrine package, which is the part of Magento PWA studio, comes with a Magento Router wrapper for React Router which adapts React Router to work with Magento 2 URL logic. Magento Router offers a flexible way of defining Root Components for each page type and an easy way of finding page type variable value for each module. It will be interesting to see how Magento PWA Studio will handle other Magento 2 specific functionalities like layout updates. Expect more articles from Inchoo as we keep playing around with the development version of Magento PWA Studio.<\/span><\/p>\n<p>The post <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\/magento-2\/magento-pwa-studio-routing-root-components\/\">Magento PWA Studio: Routing and Root Components<\/a> appeared first on <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\">Inchoo<\/a>.<\/p>\n<h1><a target=\"_blank\" href=\"http:\/\/www.circulatetechnology.com\/\">Click here for more informations about top website development services <\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>Routing in React is quite complex, and trying to adapt it to work with Magento 2 can be a very challenging task, considering how many URL-related functionalities (like URL rewrites) Magento 2 offers. Luckily, Magento PWA Studio comes with a built-in solution for handling Magento 2 URL-s which is very flexible. In this article, we &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[225,363,20,9801,1110,13268,13269,13270,13271],"tags":[],"class_list":["post-135647","post","type-post","status-publish","format-standard","","category-frontend","category-magento","category-magento-2","category-magento-pwa-studio","category-pwa","category-pwa-studio","category-root-components","category-routing","category-turorial"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-zhR","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/135647"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=135647"}],"version-history":[{"count":0,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/135647\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=135647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=135647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=135647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}