Craft CMS のコンテンツを GraphQL / Vue.js で検索する #craftcms

Craft CMS でテンプレート管理していれば普通に検索ができるのだけど。

検索 | Craft 3 ドキュメント
https://docs.craftcms.com/v3/j...

Headless とか考えると GraphQL で検索できたらいいのかもな、ということで試してみた。

試してみたといっても nystudio107 さんのエントリをほぼコピペさせてもらった。

nystudio107 | Using VueJS + GraphQL to make Practical Magic
https://nystudio107.com/blog/u...

どのエントリもほんとすごい。

このエントリは CraftQL で実装されてるみたいだけど、 Craft CMS 本体の GraphQL でも問題なく検索できた。

スキーマの設定で検索対象のセクションを設定する

記事内にあるように検索用の対象は GraphQL のスキーマの設定で選べるような感じにできるのはいいのかもと思った。

スキーマ（とセットの Token ）で対象のセクションとか選べると思うのだけど、ソースの中でセクションを指定してるのは何か理由があるんだろうな。

フィールド自体を検索対象にするかどうか？はフィールドの設定にあるし。

ひとまず動作確認っていう意味合いでテンプレートで出力しているところで Vue.js / GraphQL で検索させてみた。

とりあえず Vue や Axios 周りを読み込ませる。

{% set appendHeadJs %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endset %}

テンプレート（JS）側で検索対象のセクションは絞らなくてもいいのかも？？と思ったので、その辺はコメントアウト。

const apiUrl = '/api';
const searchPrefix = 'title:';
// The query to search for entries in Craft
const searchQuery =
    `
    query searchQuery( $needle: String!)
    {
        entries( search: $needle) {
            title
            url
        }
    }
    `;

その他、 searchSections 関係は削除。

ヘッダからの検索時に検索する

英語圏だとIMEでの変換とかがないから基本は keyup で処理されてるからなのかどうなのか。

検索ページでの検索は問題なく動くのだけど、ヘッダとかの検索ボックスにいれて検索してきた時、というのをどのようにとったものかとおもったので、ひとまず検索キーの有無で。

ググって出てきたこちらを使わせてもらう感じで。

function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

これ自体をどこかのタイミングで動かして検索させる必要もあると思うので、 mounted に設定してみる。

methods: {
    ~~~~
},
mounted: function() {
    let search_key = getParam('q');
    if (search_key){
        this.performSearch();
    }
}

mounted
https://vuejs.org/v2/api/#moun...

Vue.js の本読んだけどこの辺はそこまで出てなかった（？？見落としかもだけど）ような気がするからこのタイミングで調べられてよかったかも。

発火タイミングが正しいかどうかとか、コード的にどうこう、、ってのはあるけど。

とりあえずこれでヘッダーの検索窓からでも、検索結果の検索ボックスでも検索が動くのが確認できた。

Twig と Vue.js の Mustache の調整に verbatim

Twig のテンプレートのなかで Vue.js の記述 {{ とかもするから verbatim ってので展開しないようにするとかもする必要があった。

a-blog cms のでみたなー、という気がしつつ、 Twig のドキュメントにもあった。

波括弧を展開しない (@verbatim) | テンプレート | ドキュメント | a-blog cms developer
https://developer.a-blogcms.jp...

verbatim - Documentation - Twig - The flexible, fast, and secure PHP template engine
https://twig.symfony.com/doc/2...

なるほどなるほど。。。

このタグで囲ってるのを忘れてて、 Twig のコメントアウトとか使ってた（苦笑

検索結果がない時の表示をいれとくとか、キーワード検索だけじゃない詳細検索とかをどうするのか？というのはやってみても良さそう。

1/16に Craft CMS Meetup Tokyo vol.2 やります！

BUNさん、こもりさんのセッション情報もあります。
こもりさんのは GraphQL 関係もありそうで楽しみ！

Craft CMS Meetup Tokyo vol.2 Craft CMS の実際のところ | Meetup
https://www.meetup.com/ja-JP/J...