LoginSignup
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@akashixi(akahixi)

Gatsby + ContentfulをTypeScript化する

Last updated at Posted at 2019-11-28

Gatsby + Contentfulという構成にすることで、CMSのフロントエンドとバックエンドを分離することが可能になります。
ただ、この構成にTypeScriptを導入する場合、一手間必要になります。その手順を書いていきます。
また、GatsbyのTypeScript化については、下記の記事が大変参考になりました。内容が被る箇所が多々あるので、その部分についてはこの記事では割愛します。
Gatsby.js を完全TypeScript化する

Gatsbyアプリ作成

まず、gatsby-cliをインストールします。

yarn global add gatsby-cli

その後、下記コマンドを実行することでgatsbyの雛形がダウンロードされます。

gatsby new <任意のディレクトリ名>

続けて以下のコマンドを実行し、localhost:3000でサイトが表示されればOK。

cd <任意のディレクトリ名>
yarn develop

Contenfulのほうもアカウント登録して、適当なSpaceを作成しておきます。

GatsbyのTypeScript化

GatsbyのTypeScript化については、冒頭で紹介したこちらの記事を参考にしてください。自分が書くよりも確実にわかりやすいはず...！

Contentfulの導入

GatsbyとContentfulを繋げるには、プラグインを2つインストールする必要があるので、以下のコマンドを実行します。

yarn add gatsby-source-contentful gatsby-transformer-remark

gatsby-source-contentfulは、ContentfulからGraphQLでデータを取得できるようにするプラグイン。これを導入することでデータ取得用のQueryが利用できるようになります。

gatsby-transformer-remarkは、Markdownで記述されたテキストをHTMLに変換してくれるプラグインです。これを導入することで、Contentful側でMarkdownで書いた内容を、Gatsby側でそのままHTMLとして表示できます。

また、インストールしたプラグインはgatsby-config.jsに記述しないと有効にならないので、忘れないように注意です。

gatsby-config.js
plugins: [
  ...,
  `gatsby-transformer-remark`,
   {
     resolve: `gatsby-source-contentful`,
     options: {
       spaceId: process.env.CONTENTFUL_SPACE_ID,
       accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
     },
   },
]

spaceIdとaccessTokenはContentfulから取得します。envの参照方法はお好みで。自分はdirenvを使いました。

ここまでできたら、Contentful側で適当なコンテンツを作成しておきます。また、GraphiQLで、Contentfulからデータが取得できることを確認しておきましょう。

gatsby-node.jsをTypeScript対応させる

gatsby-node.jsは、主に動的なサイトページを作る際に変更するファイルです（/posts/:idのような）

また、動的なページテンプレートは、src/templates配下に配置します。gatsby-node.jsでContentfulからデータを取得し、そのデータをテンプレートファイルに流し込み、ページを作るイメージです。

今回やりたいのは、gatsby-node.jsで取得したデータ構造を型（Type）としてexportし、テンプレートファイルでそれをimportして紐づけることです。これにより、テンプレート側で型推論を利用したコーディングが可能になります。

参考にした記事に倣って、gatsby-node.jsに以下を記述します。（ts-nodeをインストールしておく必要があります）

gatsby-node.js
'use strict'
require('ts-node').register({
  compilerOptions: {
    module: 'commonjs',
    target: 'esnext',
  },
})
exports.createPages = require('./gatsby-node/index').createPages

これにより、./gatsby-node/index.tsが実質的なエントリーポイントになりました。TypeScriptを用いてgatsby-nodeファイルを記述していくことができます。

ContentfulからPost（投稿）を取得して、動的にページを割り当てるための記述は以下のようになります。

index.ts
const path = require("path")
import { GatsbyNode } from "gatsby"
import {
  ContentfulPostConnection,
  ContentfulPost,
} from "../types/graphql-types"

// GraphQLにより取得されるデータの型
type Result = {
  allContentfulPost: ContentfulPostConnection
}

// テンプレートファイルに渡すデータの型
export type PostContext = {
  post: ContentfulPost
}

// 実行するGraphQLのQuery
const query = `
{
  allContentfulPost {
    edges {
      node {
        content {
          childMarkdownRemark {
            html
          }
          content
        }
        publishedAt
        slug
        title
      }
    }
  }
}
`

// 動的にページを生成する関数
export const createPages: GatsbyNode["createPages"] = async ({
  graphql,
  actions: { createPage },
}) => {
  // ジェネリクスでGraphQLの返却データ型を指定
  const result = await graphql<Result>(query)
  const { edges } = result.data.allContentfulPost

  // 利用するテンプレートファイルを指定
  const postTemplate = path.resolve("./src/templates/post.tsx")

  edges.forEach(edge => {
    // ジェネリクスでcontextプロパティ（テンプレートに渡すデータ）の型を指定
    createPage<PostContext>({
      path: `/posts/${edge.node.slug}`,
      component: postTemplate,
      context: { post: edge.node },
    })
  })
}

ContentfulPostConnectionやContentfulPostといった型は、gatsby-plugin-graphql-codegenというプラグインを導入後、buildすることで自動的に生成されるものです。

GraphQLでContentfulからデータを取得する際のQueryに対応する型が全て自動的に生成されるので、これを用いて型を指定していきます。大量にあるので目当ての型を探すのも一苦労ですが、頑張って探します。

await graphql<Result>(query)で、GraphQLで取得できるデータの型を指定しています。上記のquery（allContentfulPost {...}）ではこういったデータが返却されてきます。（GraphiQLでの実行結果です）

{
  "data": {
    "allContentfulPost": {
      "edges": [
        {
          "node": {
            "publishedAt": "2019-11-27T00:00+09:00",
            "slug": "sample",
            "title": "sample",
            "content": {
              "childMarkdownRemark": {
                "html": "<p>sample content</p>"
              }
            }
          }
        }
      ]
    }
  }
}

これに対応する、ContentfulPostConnectionの型はこんな感じ。

export type ContentfulPostConnection = {
  totalCount: Scalars['Int'],
  edges: Array<ContentfulPostEdge>,
  nodes: Array<ContentfulPost>,
  pageInfo: PageInfo,
  distinct: Array<Scalars['String']>,
  group: Array<ContentfulPostGroupConnection>,
};

テンプレートファイルとの型による紐付けは、createPage<PostContext>で行なっています。こう書くことで、以下のcontextの部分をPostContextで縛ることができます。

createPage<PostContext>({
  path: `/posts/${edge.node.slug}`,
  component: postTemplate,
  context: { post: edge.node },
})

contextはテンプレートに渡す値を指定している箇所になるので、ここをPostContextで縛ったことにより、テンプレート側に渡される変数も当然PostContext型ということになります。

post.ts
import React from "react"
import Layout from "../components/layout"
import { PostContext } from "../../gatsby-node"

type Props = {
  pathContext: PostContext
}

// pathContextがgatsby-node.tsから渡される変数で、PostContext型となる
const Post: React.FC<Props> = ({ pathContext }) => {
  const contentHtml = pathContext.post.content.childMarkdownRemark.html

  return (
    <Layout>
      <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
    </Layout>
  )
}

export default Post

これにより、テンプレートファイルでも型推論を利用したコーディングが可能になりますね。

まとめ

自動生成される型定義が多すぎて、目当ての型を探すのに一番苦労しました。ここまでやってしまえば、あとはTypeScriptの恩恵を受けながら開発していけるのかなと思います。

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?