如何将 Markdown 查询转换为 GraphiQL 上的 Strapi 查询？

Question

我正在尝试进行 Gatsby + Strapi 开发（为样式添加材料），我对 Gatsby 和 Strapi 都是新手，尽管我对 React 有一些基本知识并且它正在制作更容易遵循的方式。 我正在使用这个 Gatsby Starter：https://www.gatsbyjs.org/starters/Vagr9K/gatsby-material-starter/，其中包括我想要实现的 Material 设计，但是我在将 Markdown 查询更改为 Strapi 查询时遇到了一些问题> 避免进行大量代码更改（帖子完全相同，但存储在 Strapi 中）。我在 Strapi 中有三种内容类型，对应于原始启动器提供的三个不同页面：Post、Category 和 Tag。

这是 post.jsx 模板中包含的原始 MarkdownRemark graphQL 查询：

query BlogPostBySlug($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    html
    timeToRead
    excerpt
    frontmatter {
      title
      cover
      date
      category
      tags
    }
    fields {
      slug
      date
    }
  }
}

如何更改它以从 Strapi 检索相同的信息？ 我对这个 Strapi 世界真的很陌生，所以我对 GraphQL 有很多疑问，因为我无法遵循 Markdown 查询中的指南，因为显示的信息不一样。

我也很难区分 allStrapiArticles 和 StrapiArticle，它们的主要目的是什么？

编辑：我一直在测试 GraphiQL 上的现有查询以检查它们返回的内容，这就是我所看到的：

对于 tag.jsx 查询：

query TagPage($tag: String) {
  allMarkdownRemark(
    limit: 1000
    sort: { fields: [fields___date], order: DESC }
    filter: { frontmatter: { tags: { in: [$tag] } } }
  ) {
    totalCount
    edges {
      node {
        fields {
          slug
          date
        }
        excerpt
        timeToRead
        frontmatter {
          title
          tags
          cover
          date
        }
      }
    }
  }
}

GraphiQL 不返回任何内容：

{
  "data": {
    "allMarkdownRemark": {
      "totalCount": 0,
      "edges": []
    }
  }
}

对于 category.jsx 查询：

query CategoryPage($category: String) {
  allMarkdownRemark(
    limit: 1000
    sort: { fields: [fields___date], order: DESC }
    filter: { frontmatter: { category: { eq: $category } } }
  ) {
    totalCount
    edges {
      node {
        fields {
          slug
          date
        }
        excerpt
        timeToRead
        frontmatter {
          title
          tags
          cover
          date
        }
      }
    }
  }
}

在这种情况下，一切正常，它会检索文章数据。

对于我在这篇文章中作为示例添加的查询（问题的上半部分），我收到以下错误：

 "errors": [
    {
      "message": "Variable \"$slug\" of required type \"String!\" was not provided."
    ...

Answer 1

确保您通过 GraphiQL 底部的查询变量传递变量。

---

首先，我会查询 AllMarkdownRemark 以确保您从 Gatsby 获取节点。比如：

query MyQuery {
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
    }
  }
}

如果 slug 出现了，那么这应该可以工作：

有时不会生成 slug。应该显示检查 allMarkdownRemark。