category

Craft CMS と Gatsby をつかった静的ファイル生成：一覧用のデータ取得 #craftcms

2020-12-03

これは Craft CMS Advent Calendar 2020 3日目の記事です。

Craft CMS の GraphQL と Gatsby をつかってページを静的にビルドしてみる。

先日かいたエントリを参考にCraft CMS には Gatsby Helper プラグインをインストールしておく。

2020-11-05

Gatsby Helper, gatsby-source-craft プラグインともに、1.0.0-beta2（2020-12-02時点）だった。（アップデートしてなくて色々こけた）

先日のエントリの内容で gatsby develop で立ち上がるところまでは動いている前提。

20201202 1227

立ち上げた GraphiQL で Craft CMS側のデータがみえているのも確認する。

20201202 1229

GraphiQLでレスポンスを確認する。

{
  allCraftTestTestEntry(limit: 10) {
    nodes {
      id
      title
      url
    }
  }
}

これでひとまず10件のエントリが返ってくるのを確認。

index.js を編集する

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const RecentEntriesQuery = graphql`
  {
    allCraftTestTestEntry(limit: 10) {
      nodes {
        id
        title
        url
      }
    }
  }
`;

export default function Home() {
  const {allCraftTestTestEntry: {nodes}} = useStaticQuery(RecentEntriesQuery);
  return (
    <div>
        <h1>Hello world!</h1>
        <div className="flex flex-wrap -mx-4">
            {nodes.map(({id, title,url}) => (
                <p><a href={url}>{title}</a></p>
            ))}
        </div>
    </div>
  )
}

ひとまずこのように変更することで、GraphQLで取得した一覧がリストアップされる。

20201202 1232

Twig を書く方が楽だなぁと思うところはあるが引き続き続けていく。