Question

我目前正在使用Gatsby创建网站，并使用gatsby-source-wordpress插件从Wordpress查询数据。在我的gatsby-node文件中，我已经进行了设置，可以根据帖子的类别动态创建网页。当我尝试运行按类别条目分类的查询并按发布日期过滤的查询时，收到错误消息：“错误：无法获取此StaticQuery的结果。”

有人可以看看这个，让我知道我到底要去哪里了吗？

gatsby节点文件：

const path = require('path')

module.exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
  const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')

  const res = await graphql(`
      query {
        allWordpressPost {
          edges {
            node {
              slug
            }
          }
        }
        allWordpressCategory {
          edges {
            node {
              slug
            }
          }
        }
      }
    `)

  res.data.allWordpressPost.edges.forEach((edge) => {
    createPage({
      component: blogPostTemplate,
      path: `/blog/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      }
    })
  })

  res.data.allWordpressCategory.edges.forEach((edge) => {
    createPage({
      component: blogCategoryFilter,
      path: `/blog/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      }
    })
  })

}

我用来实际生成经过过滤和排序的内容的模板文件（blog-filter-category.js）：

import React from "react"
import Layout from '../components/layout'
import { Link, graphql, useStaticQuery } from 'gatsby'

import BlogNav from '../components/blognav'

import blogStyles from '../components/modules/blog.module.css'



const BlogPage = () => {
  const data = useStaticQuery(graphql`
  query($slug: String!) {
    allWordpressCategory (filter: { slug: { eq: $slug } }) {
      edges {
        node {
          name
        }
      }
    }
    allWordpressPost (sort: {fields:date, order:DESC}) {
      edges {
        node {
          title
          slug
          content
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }
  `)


  return (
    <Layout>
      <div className={blogStyles.blog_container}>
        <div className={blogStyles.blogContent_container}>
          <ol>
            {data.allWordpressPost.edges.map((edge) => {
              return (
                <div className={blogStyles.blogPost_container}>
                  <li className={blogStyles.blog_list}>
                    <h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}></Link></h2>
                    <p className={blogStyles.blog_date}>{edge.node.date}</p>
                    <p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} />
                  </li>
                </div>
              )
            })}
          </ol>
        </div>
        <BlogNav />
      </div>

    </Layout>
  )
}

export default BlogPage

我还尝试在我的blog-filter-category.js文件中查询此问题：

  query($slug: String!) {
    allWordpressPost (filter: {categories: {elemMatch: {slug: { eq: $slug }}}}) {
      edges {
        node {
          title
          slug
          content
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }

似乎更近了，但是我最终得到了相同的错误消息。我迷路了！预先感谢您的帮助。

Answer 1

恭喜您选择使用Gatsby进行构建。

我看到的第一个问题是您尝试在静态查询中使用变量。目前尚无法实现。传递给页面上下文的变量仅在page queries中可用。

页面查询在页面模板中定义为简单的导出，例如：

import { graphql } from 'gatsby'

export const query = graphql`
  query MyQuery($slug: String!) {
    allWordpressPost (filter: {categories: {elemMatch: {slug: { eq: $slug }}}}) {
      edges {
        node {
        title
        slug
        content
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
}`

在此处详细了解Gatsby中页面查询与静态查询之间的区别： https://www.gatsbyjs.org/docs/static-query/#how-staticquery-differs-from-page-query

筛选Gatsby中的Wordpress类别

1 个答案: