Question

我很难找到能够准确描述如何使用“ gatsby-source-contentful”插件以及如何从内容丰富的API查询数据的文档。我已在gatsby-config.js文件中设置了所有内容，并且没有运行错误。我想知道如何开始拨打这些电话。我已经查看了/ ___ graphql路径，但没有看到与内容相关的任何查询选项。

任何信息将不胜感激。

这是我的插件配置数据

{
   resolve: `gatsby-source-contentful`,
   options: {
     spaceId: keys.spaceId,
     accessToken: keys.accessToken,
   },
},

Answer 1

看来您的gatsby-config文件没有问题（如果您的accessToken有效，那么那里没有错误）。尝试使用以下示例查询从Contentful中检索数据：

export const pageQuery = graphql`
  query HomeQuery {
    allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
      edges {
        node {
          title
          slug
          publishDate(formatString: "MMMM Do, YYYY")
          tags
          heroImage {
            sizes(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
             ...GatsbyContentfulSizes_tracedSVG
            }
          }
          description {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
    allContentfulPerson(filter: { id: { eq: "c15jwOBqpxqSAOy2eOO4S0m" } }) {
      edges {
        node {
          name
          shortBio {
            shortBio
          }
          title
          heroImage: image {
            sizes(
              maxWidth: 1180
              maxHeight: 480
              resizingBehavior: PAD
              background: "rgb:000000"
            ) {
              ...GatsbyContentfulSizes_tracedSVG
            }
          }
        }
      }
    }
  }
`

在页面内部，您可以通过以下方式访问数据：

const siteTitle = this.props.data.site.siteMetadata.title;
const posts = this.props.data.allContentfulBlogPost.edges;
const [author] = this.props.data.allContentfulPerson.edges;

盖茨比和内容丰富的查询

1 个答案: