【Gatsby】GraphQLの使い方

Copy
interface Node {
  id: string;
  children?: Array<string>;
  parent?: string;
  fields: object;
  internal: {
    contentDigest: string;
    mediaType?: string;
    type: string;
    owner: string;
    fieldOwners: object;
    content?: string;
    description?: string;
  };
  [key: string]: unknown; // ...other fields specific to this type of node
}

Copy
import * as React from "react"
import { Link, graphql } from "gatsby"

const BlogIndex = ({ data }) => {
  const nodeList = data.allContentfulBlogPost.edges

  return (
    // 取得したタイトルを一覧で表示する
    <div>
      {nodeList.map(({ node }) => {
        return (
          <div>
            <Link to={node.slug}>{node.title}</Link>
          </div>
        )
      })}
    </div>
  )
}

export default BlogIndex

// 記事のタイトルとslugを取得
export const pageQuery = graphql`
  query {
    allContentfulBlogPost {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
`

Copy
const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // contentful記事のkeyを取得
  const contentfulAirticleResult = await graphql(`
    query airticleQuery {
      allContentfulBlogPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  const contentfulAirticle =
    contentfulAirticleResult.data.allContentfulBlogPost.edges
  //記事数分ループして記事ページを作成する
  contentfulAirticle.forEach(({ node }) => {
    createPage({
      path: `${node.slug}/`, //記事ページのurl
      component: path.resolve(`./src/templates/contentfulPost.jsx`), //記事ページ作成のtemplateコンポーネント
      //templateコンポーネントに渡す引数
      context: {
        slug: node.slug,
      },
    })
  })
}

Copy
import React from "react"
import { graphql } from "gatsby"
import MDXConvert from "../components/mdxConvert"

const ContentfulPost = ({ pageContext,data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  // MDX形式の記事データをMDXConvertでhtmlに変換する
  return <MDXConvert>{body.childMdx.body}</MDXConvert>
}

export default ContentfulPost

// gatsby-node.jsのcreatePageから渡されたslugを元にGraphQLで記事を取得する
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              body
            }
          }
        }
      }
    }
  }
`

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

const Alltags = () => {
    //staticQuery
    const data = useStaticQuery(graphql`
    {
      allContentfulTags {
        edges {
          node {
            title
          }
        }
      }
    }
  `)

  const nodeList = data.allContentfulTags.edges

  return (
    // 取得したタグタイトルを一覧で表示する
    <div>
      {nodeList.map(({ node }) => {
        return (
          <div>
            <button>{node.title}</button>
          </div>
        )
      })}
    </div>
  )
}

export default Alltags

Copy
import * as React from "react"
import { Link, graphql } from "gatsby"
import Alltags from "../components/allTags"

const BlogIndex = ({ data }) => {
  const nodeList = data.allContentfulBlogPost.edges

  return (
    // 取得したタイトルを一覧で表示する
    <div>
      <Alltags />
      {nodeList.map(({ node }) => {
        return (
          <div>
            <Link to={node.slug}>{node.title}</Link>
          </div>
        )
      })}
    </div>
  )
}

export default BlogIndex

// 記事のタイトルとslugを取得
export const pageQuery = graphql`
  query {
    allContentfulBlogPost {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
`