将内容丰富的 CMS 与 gatsby 页面连接起来答案

【问题标题】：connecting contentful CMS with gatsby page将内容丰富的 CMS 与 gatsby 页面连接起来
【发布时间】：2018-10-12 18:49:42
【问题描述】：

我正在尝试将 Contentful 和 Gatsby 联系起来以创建一个博客。

const path = require('path');

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    const blogPostTemplate = path.resolve('src/templates/blog-post.js');
    resolve(
      graphql(`
        {
          allContentfulBlog(limit: 100) {
            edges {
              node {
                id
                slug
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          reject(result.errors);
        }
        result.data.allContentfulBlog.edges.forEach(edge => {
          createPage({
            path: edge.node.slug,
            component: blogPostTemplate,
            context: {
              slug: edge.node.slug
            }
          });
        });
        return;
      })
    );
  });
};

这是我在 gatsby-node.js 中写的。当我执行 npm run develop 时，它给了我一个错误，说“TypeError: Cannot read property 'allContentfulBlog' of undefined.”我不知道我应该如何解决这个问题。有人有想法吗？

【问题讨论】：

你的内容类型的名称是什么，应该是博客。 gatsby 是否输出有关 graphql 查询的内容？
我将其命名为博客。嗯，上面提到的错误，它说“- gatsby-node.js:23 graphql.then.result”除此之外，我找不到任何关于graphql查询的具体信息。
我在承诺解决后将“结果”记录到控制台，并且它给了我这个错误> GraphQLError：无法在“ContentfulBlog”类型上查询字段“slug”。
你有那个内容类型的字段 slug，也许它是一个大写的 Slug？
我发现在 JSON Preview 中，只有“titletext”而不是“slug”。我将所有“slug”从 atom 更改为“titletext”，但它仍然给出错误消息：“GraphQL Error Unknown field title on type ContentfulBlog”来自 blog-post.js，pageQuery graphql。

标签： javascript content-management-system gatsby contentful

【解决方案1】：

我遇到了同样的困难，我假设您正在关注 this youtube tutorial by khaled 并尝试使用默认的内容博客模板来检查它，如下所示：

确保您在撰写 allContentful{contentModelName} 帖子时使用的是正确的 contentModelName。当使用默认博客示例获取内容时，标题显示为“博客文章”。只需将其从“Blog Post”更改为“Blog”，如果您按照 Khaled 的步骤并添加“新 Promise”修复（我看到您已经这样做了），一切都应该正常工作。

祝你好运！

【讨论】：