Gatsby の File System Route API を使って Craft CMS の詳細ページを静的出力してみる #craftcms

先日 Craft CMS と Gatsby で詳細ページを出すとかを試した。

Gatsby の File System Route API ができたらしくこれを使うと gatsby-node.js を使うのではなく、ページ用のファイルを置くことで、そこのページクエリで詳細ページを生成することが出来る。

File System Route API | Gatsby
https://www.gatsbyjs.com/docs/…

色々と記事を参考にさせてもらった。

• Gatsby.jsの新機能「File System Route API」を試してみる
  https://zenn.dev/ryo_kawamata/…
• GatsbyのFileSystemRouteAPIでさらに使いやすくなった | TOMILOG
  https://blog.ryou103.com/post/…

ひとまず詳細ページ用の {craftTestTestEntry.slug}.js をsrc/pages/test/{craftTestTestEntry.slug}.js
という感じで作成する。

import React from "react"
import {graphql} from 'gatsby';

const PostPage = ({data}) => {
    return (
        <div>
            <div className="content">
                <h1>title: {data.craftTestTestEntry.title}</h1>
                <p>slug :  {data.craftTestTestEntry.slug}</p>
                <p>id :  {data.craftTestTestEntry.id}</p>
                <p>redactor</p>
                <pre>{data.craftTestTestEntry.testredactor}</pre>
            </div>
        </div>
    );
};

export const query = graphql`
  query($slug: String) {
    craftTestTestEntry(slug: {eq: $slug}) {
        id
        title
        url
        slug
        ... on Craft_test_test_Entry{
          testredactor
          testtags{
            id
            title
          }
        }
    }
  }
`

export default PostPage;

URLは slug をベースにして組み立てるようにした。

試した環境は Craft CMS 用の Gatsby Helper プラグインと gatsby-source-craft プラグインを使っている。

Query で取得したデータは {data} で取り出せる。
単一のデータを取り出せればいいので、 craftTestTestEntry で取得する。

これで確認すると /test/aaa というURLで見ることが出来た。

以下のようなのがでてるのでこれは後で調べてみよう。

warn Using the global `graphql` tag is deprecated, and will not be supported in v3.
Import it instead like:  import { graphql } from 'gatsby' in file:

詳細ページがこれなら結構シンプルに使えそうな気がする。
アーカイブ系もつくれそうな気がするなぁ。