在 Gatsby 中过滤 Wordpress 类别答案

【问题标题】：Filtering Wordpress categories in Gatsby在 Gatsby 中过滤 Wordpress 类别
【发布时间】：2019-12-05 20:15:40
【问题描述】：

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

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

gatsby-node 文件：

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")
        }
      }
    }
  }

看起来更近了，但我最终得到了同样的错误信息。我迷路了！提前感谢您的帮助。

【问题讨论】：

标签： javascript wordpress graphql gatsby

【解决方案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

【讨论】：