use contentful for headless cms

Author: dowdiness

gatsby-config.js

@@ -69,11 +69,20 @@ module.exports = {
         name: `pages`,
       },
     },
+    {
+      resolve: `gatsby-source-contentful`,
+      options: {
+        spaceId: process.env.CONTENTFUL_SPACE_ID,
+        // Learn about environment variables: https://gatsby.dev/env-vars
+        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
+        // host: process.env.NODE_ENV !== 'production' ? `preview.contentful.com` : `cdn.contentful.com`,
+        downloadLocal: true,
+      },
+    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
-          `gatsby-remark-normalize-paths`,
           `gatsby-remark-check-links`,
           `gatsby-remark-external-links`,
           {
@@ -87,13 +96,14 @@ module.exports = {
             }
           },
           {
-            resolve: `gatsby-remark-images`,
+            resolve: `gatsby-remark-images-contentful`,
             options: {
+              // max-w-3xlのwidthと同じサイズ
               maxWidth: 768,
               linkImagesToOriginal: false,
               backgroundColor: "transparent",
               withWebp: true,
-              showCaptions: ['alt'],
+              showCaptions: true,
               wrapperStyle: `white-space: normal; text-align: center;`,
             },
           },

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require(`path`)
-const { createFilePath } = require(`gatsby-source-filesystem`)
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
@@ -8,90 +7,73 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const verticalArticle = path.resolve(`./src/templates/vertical-article.tsx`)
   const horizontalArticle = path.resolve(`./src/templates/horizontal-article.tsx`)
 
-  const resultAllMarkdowns = await graphql(
+  const resultContentfulMarkdowns = await graphql(
     `
       {
-        allMarkdownRemark(
-          filter: { fields: { draft: { eq: false } } }
-          sort: { fields: [frontmatter___publishedAt], order: DESC }
-          limit: 1000
-        ) {
-          nodes {
-            id
-            frontmatter {
-              vol
-              writing
-            }
-            fields {
+        allContentfulMarkdownArticle(sort: {fields: publishedAt, order: DESC}) {
+          edges {
+            node {
+              id
               slug
+              isVirticalWriting
+              publishedAt
+            }
+            next {
+              id
+            }
+            previous {
+              id
             }
           }
         }
       }
     `
   )
 
-  if (resultAllMarkdowns.errors) {
+  if (resultContentfulMarkdowns.errors) {
     reporter.panicOnBuild(
       `There was an error loading your article posts`,
-      resultAllMarkdowns.errors
+      resultContentfulMarkdowns.errors
     )
     return
   }
 
-  const posts = resultAllMarkdowns.data.allMarkdownRemark.nodes
+  const posts = resultContentfulMarkdowns.data.allContentfulMarkdownArticle.edges
 
   // Create blog posts pages
   // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
   // `context` is available in the template as a prop and as a variable in GraphQL
 
   if (posts.length > 0) {
     posts.forEach((post, index) => {
-      const previousPostId = index === 0 ? null : posts[index - 1].id
-      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id
-
-      const { slug } = post.fields
+      const { slug } = post.node
       if (!slug) return
 
-      if (post.frontmatter.writing === "horizontal") {
+      if (post.node.isVirticalWriting === true) {
         createPage({
-          path: `/articles${slug}`,
-          component: horizontalArticle,
+          path: `/articles/${slug}/`,
+          component: verticalArticle,
           context: {
-            id: post.id,
-            previousPostId,
-            nextPostId,
+            id: post.node.id,
+            previousPostId: post.previous ? post.previous.id : null,
+            nextPostId: post.next ? post.next.id :  null,
           },
         })
-      } else if (post.frontmatter.writing === "vertical") {
+      } else{
         createPage({
-          path: `/articles${slug}`,
-          component: verticalArticle,
+          path: `/articles/${slug}/`,
+          component: horizontalArticle,
           context: {
-            id: post.id,
-            previousPostId,
-            nextPostId,
+            id: post.node.id,
+            previousPostId: post.previous ? post.previous.id : null,
+            nextPostId: post.next ? post.next.id :  null,
           },
         })
       }
     })
   }
 }
 
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
-
-  if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
-
-    createNodeField({
-      name: `slug`,
-      node,
-      value,
-    })
-  }
-}
-
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions
 
@@ -103,48 +85,7 @@ exports.createSchemaCustomization = ({ actions }) => {
   // article posts are stored inside "content/article" instead of returning an error
   createTypes(`
     type SiteSiteMetadata {
-      author: Author
       siteUrl: String
-      social: Social
-    }
-
-    type Author {
-      name: String
-      summary: String
-    }
-
-    type Social {
-      twitter: String
-    }
-
-    type MarkdownRemark implements Node @infer {
-      frontmatter: Frontmatter
-      fields: Fields
-    }
-
-    type Frontmatter @infer {
-      title: String
-      description: String
-      author: String
-      vol: String
-      align: String
-      writing: String
-      profile: String
-      twitter: String
-      instagram: String
-      minnakikeru: String
-      bandcamp: String
-      linktree: String
-      hatena: String
-      createdAt: Date @dateformat
-      updatedAt: Date @dateformat
-      publishedAt: Date @dateformat
-      disableSideHeader: Boolean
-      featuredImage: File
-    }
-
-    type Fields {
-      slug: String
     }
   `)
 }

package.json

@@ -38,13 +38,14 @@
     "gatsby-remark-embedder": "^4.1.0",
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^3.6.0",
+    "gatsby-remark-images-contentful": "^2.10.0",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-normalize-paths": "^1.1.0",
     "gatsby-remark-responsive-iframe": "^2.6.0",
     "gatsby-remark-smartypants": "^2.5.0",
+    "gatsby-source-contentful": "^4.6.1",
     "gatsby-source-filesystem": "^2.6.0",
     "gatsby-transformer-json": "^2.6.0",
-    "gatsby-transformer-remark": "^2.11.0",
+    "gatsby-transformer-remark": "^2.16.0",
     "gatsby-transformer-sharp": "^2.12.0",
     "gsap": "^3.5.1",
     "intersection-observer": "^0.12.0",