Sitecore JSS component datasource xPath query

Question

I am having following content tree

Sitecore

• Content

• myapp

  • home

    -Products

    -Product-1

    • Related-Products-1 (based on Related-Products custom template) – having multi-list field in which we can select products which are related and source would be /Sitecore/Content/myapp/home/Products

    -Product-2

    • Related-Products-2

    -Product-3

    • Related-Products-3

    -Product-4

    • Related-Products-4

To display Related Products items on Product-1 (Product template based item) page, I created the component and in component’s datasource added the xPath query like query:self:://[@@templateid = '{XXXX-XXXX-XXXX}'], so that I will get Product listing but it’s returning the xPath query in datasource attribute like: "dataSource": "query:self:://[@@templateid = '{XXXX-XXXX-XXXX}']"

If, I will assign direct path of item Related-Products, in the component then I am getting the details, with this way in each and every page I have to change the datasource manually and I can’t use __StandardValue of template to assign the Component with datasource, is there any other way to achieve this use case?

Answer 1

JSS does not resolve multi-item datasources such as query: expressions.

In JSS you'll want to look at Rendering Contents Resolvers which enable you to precisely control the JSON returned for the fields property on the layout service, or Integrated GraphQL.