レイアウト・サービスのレンダリング出力のカスタマイズ

Sitecoreレンダリングのレイアウト サービス出力をカスタマイズするには、レンダリングでGraphQLクエリを設定します。JSSでは、この手法を 統合GraphQLと呼びます。クエリは、レイアウトサービスリクエスト中、またはExperience Edgeを使用している場合は公開時にサーバー側で実行されます。

Sitecoreレイアウト サービスがページをレンダリングすると、ページのレイアウトのJSON表現と各レンダリング/コンポーネントのデータが返されます。通常、レンダリング/コンポーネント データは、Sitecoreデータソース アイテムのフィールドのセットです。統合されたGraphQLを使用すると、これをGraphQLクエリ結果に形を変えることができます。

この手法を使用するには、次のことを行う必要があります。

統合されたGraphQLは、GraphQLクエリをコンポーネントのレンダリングアイテムのComponent GraphQL Queryフィールドに格納することで動作します。たとえば、GraphQLサンプル アプリでは、/sitecore/layout/Renderings/JssBasicAppGraphQL/IntegratedPageに対してクエリを設定します。例えば：

query IntegratedPageQuery(
  $datasource: String!
  $language: String!
  $contextItem: String!
) {
  datasource: item(path: $datasource, language: $language) {
    ... on IntegratedPage {
      title {
        jsonValue
      }
      text {
        jsonValue
      }
      logoImage {
        jsonValue
      }
    }
  }

  contextItem: item(path: $contextItem, language: $language) {
    id
    children(hasLayout: true) {
      results {
        displayName
        url {
          url
        }
      }
    }
  }
}
    

Sitecoreがレイアウト リクエストを受信すると、コンポーネントが空でないGraphQLクエリを定義している場合、クエリはアプリに設定されたGraphQLエンドポイントに対してインプロセスで実行されます。結果は、返される通常のレンダリング フィールド値を置き換えます。

ヘッドレス サービスでは、レンダリングごとにRendering Contents Resolverを設定して、レンダリングとそれに関連するデータのシリアル化方法を決定できます。レンダリング コンテンツ リゾルバは /sitecore/system/Modules/Layout Service/Rendering Contents Resolvers.デフォルトでは、ヘッドレスサービスは次のリゾルバーを提供します。

Rendering Contents Resolversフォルダに独自の設定を作成するには、次の使用可能なパラメータを使用します。

レンダリング コンテキスト リゾルバを使用するには、適用先のコンポーネントを参照するレンダリング アイテムのRendering Contents Resolverフィールドで設定する必要があります。例については、Sitecore FormsをJSSと統合するときにFormレンダリングのリゾルバーを設定する このチュートリアル を参照してください。

レイアウト サービスでは、IRenderingContentsResolverインターフェイスを使用して、シリアル化されたレンダリングの内容を完全にカスタマイズできます。

レンダリングのデフォルトのIRenderingContentsResolverインタフェースをオーバーライドするには、独自の実装を作成し、Rendering Contents Resolverアイテムを作成してカスタムTypeを指定します。例えば：

public class ExampleRenderingContentsResolver : Sitecore.LayoutService.ItemRendering.ContentsResolvers.IRenderingContentsResolver
{
    public bool IncludeServerUrlInMediaUrls { get; set; }
    public bool UseContextItem { get; set; }
    public string ItemSelectorQuery { get; set; }
    public NameValueCollection Parameters { get; set; }

    public object ResolveContents(Rendering rendering, IRenderingConfiguration renderingConfig)
    {
        //if you want to access the datasource item
        var datasource = !string.IsNullOrEmpty(rendering.DataSource)
            ? rendering.RenderingItem?.Database.GetItem(rendering.DataSource)
            : null;

        return new
        {
            name = datasource.Name,
            date = DateTime.Now,
            hello = "world"
        };
    }
}

実装によって返されたオブジェクトのフィールドは、アイテムコンテンツであるかのようにフロントエンドコンポーネントにバインドできます(たとえば、Reactのprops )。

上記の一部のシナリオでは、必要なデータにアクセスするために別のRESTエンドポイントを作成することが別の方法になる場合があります。ただし、前述の手法には、RESTエンドポイントを使用する場合と比較して、次のようないくつかの利点があります。