SaaS CMSのページへのルーティング

SaaS CMSインスタンスを使用したより早い調査結果。 Visitor PageViewsとEditorのプレビューの両方で機能するグラフクエリのセットアップ。

これらのクエリは、コンテンツタイプパッケージでテストされています 前のブログ投稿のCLIツール。

Optimizelyのドキュメント以外では、これらのリソースは周りを見るのに非常に役立ちます。

パラメーターは、パス +フルパスの最初の部分からロケールを解析するか、 loc、 key または ver 編集モードによって送信されたクエリストリングパラメーター。

フルパスに基づいた場合のBlazor Static SSRの例。

@page "/{*pageRoute:nonfile}"
..
[Parameter] public string? PageRoute { get; set; }
..

if (path == "https://krompaco.nu/")
{
    path = "/en/";
}

この例では、セット en ロケールパラメーターの値としても。

query ContentByPath($path: String!, $locale: [Locales]!) {
    _Content(
      where: {
        _or: [
          { _metadata: { url: { default: { eq: $path } } } }
          { _metadata: { url: { hierarchical: { eq: $path } } } }
        ]
      }
      locale: $locale
    ) {
      item {
        _metadata {
            key
            locale
            types
            displayName
            version
            url {
                default
                hierarchical
            }
        }
        _type: __typename
      }
    }
}

編集モードの使用が検出された場合、代わりに編集モードで送信されたpreview_tokenをグラフhttpclientリクエストメッセージのHTTPヘッダーとして追加します。

public class GraphClientDelegatingHandler(IHttpContextAccessor httpContextAccessor) : DelegatingHandler
{
    protected override TaskHttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        
        request.Headers.Add("cg-stored-query", "template");

        var uriBuilder = new UriBuilder(request.RequestUri!);
        uriBuilder.Query += "&stored=true";
        request.RequestUri = uriBuilder.Uri;

        
        var httpContext = httpContextAccessor.HttpContext;

        if (httpContext != null)
        {
            if (httpContext.Request.Query.TryGetValue("preview_token", out var previewToken))
            {
                request.Headers.Add("Authorization", $"Bearer {previewToken}");
            }
        }

        return base.SendAsync(request, cancellationToken);
    }
}

次に、ContentBypathと同一の結果構造を持つこのクエリを使用しますが、トークンとともに未発表のバージョンからデータを取得できます。

query ContentByKeyAndVersion($key: String!, $version: String!, $locale: [Locales]!) {
    _Content(
            locale: $locale,
            where: { _metadata: { key: { eq: $key}, version: { eq: $version }  } }
        ) {
        item {
            _metadata {
                key
                locale
                types
                displayName
                version
                url {
                    default
                    hierarchical
                }
            }
            _type: __typename
        }
    }
}

空の結果が得られた場合、404ページを表示し、すべてのフラグメントで大きなクエリを送信することを避けることができます。

その結果、最初のアイテム types プロパティは、使用するコンポーネントを選択するのに最も適しています。

それが私たちであることがわかったら StandardExperience タイプ両方のケースで同じクエリを使用できるようになりました。訪問者のページビューでは、バージョンパラメーターを省略します。

fragment heading1Element on Heading1 {
  Heading
}

fragment heading2Element on Heading2 {
  Heading
}

fragment heading3Element on Heading3 {
  Heading
}

fragment proseElement on Prose {
  Body {
    html
  }
}

fragment singleParagraphElement on SingleParagraph {
  Text
  Highlight
}

fragment preambleElement on Preamble {
  Text
}

fragment singleImageElement on SingleImage {
  ImageReference
  {
    url
    {
      default
    }
  }
  AlternativeText
}

fragment callToActionLinksElement on CallToActionLinks {
  Links {
    text
    url {
      default
    }
  }
}

fragment personElement on Person {
  FullName
  Title
  Telephone
  ImageReference
  {
    url
    {
      default
    }
  }
}

fragment compositionStructureNode on CompositionStructureNode {
  displaySettings { key, value }
  displayTemplateKey
  key
  displayName
  nodeType
  type
}

fragment compositionComponentNode on CompositionComponentNode {
  displaySettings { key, value }
  displayTemplateKey
  key
  displayName
  nodeType
  type
  component {
    ...heading1Element
    ...heading2Element
    ...heading3Element
    ...proseElement
    ...singleParagraphElement
    ...preambleElement
    ...singleImageElement
    ...callToActionLinksElement
    ...personElement
  }
}

query StandardExperienceByKeyAndVersion($key: String!, $version: String, $locale: [Locales]!) {
  StandardExperience(
    locale: $locale
    where: { _metadata: { key: { eq: $key}, version: { eq: $version }  } }
  ) {
    item {
      composition {
        ...compositionStructureNode
        grids: nodes {
          ...compositionComponentNode
          ...compositionStructureNode
          ... on CompositionStructureNode {
            rows: nodes {
              ...compositionStructureNode
              ... on CompositionStructureNode {
                ...compositionStructureNode
                columns: nodes {
                  ...compositionStructureNode
                  ... on CompositionStructureNode {
                    ...compositionStructureNode
                    elements: nodes {
                      ...compositionComponentNode
                    }
                  }
                }
              }
            }
          }
        }
      }
      PageTitle
      _metadata {
        published
        url {
          default
        }
      }
    }
  }
}

これで、グリッドセクションまたはセクションレベルの共有ブロックのレンダリングを開始するために必要なものがあります（CLIリポジトリには Person それをテストするためのコンテンツタイプ）。

フローはクラシックページタイプでも機能しますが、私が指摘したように 私の最初のSaaS CMSブログ投稿 新しいセットアップの必要性はめったにありません。

これはまだ探索段階にあるが、JSがわずかに遅れていることに注意してください contentSaved イベントコードは、ヘッドアプリをローカルに使用して環境に展開するときの両方で、正しいバージョンの表示を取得する際に安定しています。

script src="@(this.CmsUrl)/util/javascript/communicationinjector.js">script>

script>
    window.addEventListener('optimizely:cms:contentSaved', (event) => {
        const message = event.detail;
        setTimeout(function () {
            document.location.href = message.previewUrl;
        }, 600);
    });
script>