Reactjs 未找到任何结果：使用WordPress API和Netlify上的Gatsby在live deploy上进行GraphQL查询

我不明白为什么在本地开发中运行

gatsby build&&gatsby service

on

localhost:9000

，我能够通过编程创建分类页面，根据分类

slug

变量查询并输出帖子列表，但当我将站点部署到Netlify时，分类页面显示零结果，无论类别或与查询匹配的帖子数量如何

//gatsby.node
exports.createPages=异步（{graphql，actions}）=>{
const{createPage}=actions
const categoryTemplate=path.resolve（'src/templates/categoryTemp.js'）
常量结果=等待图形ql(`
质疑{
AllWordPress类别{
边缘{
节点{
身份证件
路径
鼻涕虫
名称
描述
}
}
}
}
`)
const{allWordpressCategory}=result.data
allWordpressCategory.edges.forEach（（{node}）=>{
如果（node.slug==='portfolio'）返回
创建页面({
路径：node.path，
组件：categoryTemplate，
背景：{
id:node.id，
slug:node.slug，
name:node.name，
description:node.description，
url:node.path
}
})
})

createPage

操作中的

context

属性（包含类别的

slug

）被传递到我设置的

categoryTemplate

页面/组件（

categoryTemp.js

）

slug

在GraphQL查询中用作过滤变量，并应返回与该类别匹配的所有帖子：

//src/templates/categoryTemp.js
从“React”导入React
从“盖茨比”导入{graphql，Link}
从“./组件/布局/布局”导入布局
从“./组件/布局/页面内容”导入页面内容
导出默认值（{data，pageContext}）=>{
const{allWordpressPost}=数据
返回(
{allWordpressPost.totalCount}类别中的帖子：{pageContext.name}

{allWordpressPost.edges.map（{node}，idx）=>(
{node.title}
))} 

)
}
export const categoryQuery=graphql`
查询（$slug:String！）{
allWordpressPost（筛选器：{categories:{elemMatch:{slug:{eq:$slug}}}）{
边缘{
节点{
身份证件
标题
路径
}
}
总数
}
}
`

正如我之前所说，这在开发过程中以及在我运行

gatsby build&&gatsby service

时在本地起作用，这通常有助于了解您的gatsby站点在服务器上的运行情况。但是，实时站点无法返回任何查询匹配：

我想知道我是否需要采取一些中间步骤，比如以编程方式处理和创建这些类别模板，但我恐怕有点怀疑我是否能够及时或根本解决这个问题

类似地，我经常看到这种模式：但在如何实现它方面需要一点提示

有人有什么想法或建议吗

//gatsby-config.js
module.exports={
站点元数据：{
...
},
插件：[
`盖茨比`，
{
解析：`gatsby源文件系统`，
选项：{
名称：`images`，
路径：`${uu dirname}/src/images`，
},
},
`盖茨比变压器，
`盖茨比，
{
解析：`gatsby插件清单`，
选项：{
名称：“Peak网站”，
简称：“Peak网站”，
起始url:“/”，
背景颜色：“27688E”，
主题颜色：“27688E”，
显示：“最小用户界面”，
图标：“src/images/logo/logo_squared.png”，
},
},
{
解析：`gatsby source wordpress`，
选项：{
baseUrl:`pathtomysite.com`，
协议：`https`，
useACF:错误，
详细输出：false，
hostingWPCOM:false
}
},
`盖茨比`，
{
解析：`gatsby插件预取google字体`，
选项：{
字体：[{
家庭：`蒙特塞拉特'，
变体：[`300`、`300i`、`400`、`400i`、`700`]
}],
},
}, {
解析：`gatsby插件google analytics`，
选项：{
trackingId:process.env.GA_跟踪代码，
头:错,，
},
},
//`盖茨比插件网站地图`
//此（可选）插件支持渐进式Web App+脱机功能
//要了解更多信息，请访问：https://gatsby.dev/offline
//“盖茨比插件离线”，
],
}

为了解决这个问题，我做了两次调整

首先，我在我的

gatsby node.js

中将查询修改为

allWordpressPosts

下的数据层，以查询

categories>slug

，即：

allWordpressPost {
    edges {
        node {
            id
            wordpress_id
            status
            path
            categories {
                slug
            }
        }
    }
}

然后，在呈现匹配帖子列表之前，我在函数组件中编写了一个过滤函数

const filteredPosts = allWordpressPost.edges.filter(({node}) => {
    return node.categories.some(({ slug }) => slug === pageContext.slug)
})

return (
        <Layout path={pageContext.url} layoutClass={"category"}>

            <PageContent>
                <h2>{allWordpressPost.totalCount} posts in category: {pageContext.name}</h2>
                <ul>
                    {filteredPosts.map(({ node }, idx ) => (
                        <li key={idx}><Link to={node.path} title={S(node.title).decodeHTMLEntities().s}>{S(node.title).decodeHTMLEntities().s}</Link></li>
                    ))}
                </ul>
            </PageContent>
           
        </Layout>
    )

---

我做了两次调整来解决这个问题

首先，我在我的

gatsby node.js

中将查询修改为

allWordpressPosts

下的数据层，以查询

categories>slug

，即：

allWordpressPost {
    edges {
        node {
            id
            wordpress_id
            status
            path
            categories {
                slug
            }
        }
    }
}

然后我在函数组件中编写了一个过滤器函数