GraphQL Route query to fetch 301 redirect URL data in Magento 2.

GraphQL Route Query is used to fetch URL-related data for entity-type products, categories, or CMS pages. This query will be helpful while you are using PWA stuff to render proper pages based on the older 301 redirect URL.

If you have modified any URL for 301 permanent redirects and your e-commerce app running on PWA, while a user comes to your site and tries to hit the older URL, it will be going to 404 pages because the older URL has been permanently redirected to a new URL.

urlResolver() query is deprecated so try to avoid that query and use the latest route() Query for future proof your system.

Syntax:
{route(url: String!): RoutableInterface}

Input Parameter:

url String! URL value must contain the url_key and suffix value.

You can see the declaration of RoutableInterface from the file, vendor/Magento/module-url-rewrite-graph-ql/etc/schema.graphqls

GraphQL Route Interface query used to fetch URL rewrite data.

Let’s say the Category Example,
Old URL: https://www.rakeshjesadiya.com/type-of-gift.html
New URL: https://www.rakeshjesadiya.com/gifts.html (301 Permanently redirect)

Route Query:

{
  route(url: "type-of-gift.html") {
    relative_url
    redirect_code
    type
    ... on CategoryTree {
      canonical_url
      category_seo_name
      category_url
      url_key
      url_path
      url_suffix
    }
  }
}

Response:

{
  "data": {
    "route": {
      "relative_url": "gifts.html",
      "redirect_code": 301,
      "type": "CATEGORY_PRODUCTS",
      "canonical_url": null,
      "category_seo_name": null,
      "category_url": "toys.html",
      "url_key": "gifts",
      "url_path": "gifts",
      "url_suffix": ".html"
    }
  }
}

Here you can see, redirect_code refers to 301 and the type indicates CATEGORY_PRODUCTS.

If you have a Subcategory, you need to pass subcategory URL details,

Old URL: https://www.rakeshjesadiya.com/type-of-gift/adventure-calendars.html
New URL: https://www.rakeshjesadiya.com/gifts/adventure-calendars.html (301 Permanently redirect)

Request GraphQL Query:

{
  route(url: "type-of-gift/adventure-calendars.html") {
    relative_url
    redirect_code
    type
    ... on CategoryTree {
      canonical_url
      category_seo_name
      category_url
      url_key
      url_path
      url_suffix
    }
  }
}

Response Data:

{
  "data": {
    "route": {
      "relative_url": "gifts/adventure-calendars.html",
      "redirect_code": 301,
      "type": "CATEGORY_PRODUCTS",
      "canonical_url": null,
      "category_seo_name": "Adventure Calendars",
      "category_url": "gifts/adventure-calendars.html",
      "url_key": "adventure-calendars",
      "url_path": "gifts/adventure-calendars",
      "url_suffix": ".html"
    }
  }
}

Example for a category without being 301 Permanently redirect.

{
  route(url: "my-category.html") {
    relative_url
    redirect_code
    type
    ... on CategoryTree {
      canonical_url
      category_seo_name
      category_url
      url_key
      url_path
      url_suffix
    }
  }
}

Response:

{
  "data": {
    "route": {
      "relative_url": "my-category.html",
      "redirect_code": 0,
      "type": "CATEGORY_PRODUCTS",
      "canonical_url": null,
      "category_seo_name": null,
      "category_url": "my-category.html",
      "url_key": "my-category",
      "url_path": "my-category",
      "url_suffix": ".html"
    }
  }
}

Here Category URL doesn’t have any redirect so the redirect_code value will be 0.

You can do it for the product URL also and get the response based on the URL history.

Share this:

Related