Gatsby对接WordPress：获取父页面属性问题求助

方案1：利用现有parentId变量扩展GraphQL查询 #

你已经在gatsby-node.js的页面上下文里传递了parentId，可以直接把它加入查询变量，通过条件查询获取父页面数据：

1. 修改页面查询
   添加$parentId变量，并使用@include指令仅在parentId存在时执行父页面查询：

   query($id: String!, $parentId: String) {
     wpPage(id: {eq: $id}) {
       id
       title
       uri
       content
       parentId
     }
     # 用parentId查询父页面，仅当parentId非空时生效
     parentPage: wpPage(id: {eq: $parentId}) @include(if: $parentId) {
       id
       title
       uri
       # 按需添加需要的父页面属性，比如content、excerpt等
     }
   }
   

   注意：如果parentId是WordPress的数据库ID（数字类型），需要把查询条件改成databaseId: {eq: $parentId}——因为Gatsby中wpPage的id字段是全局唯一的base64编码值，和WordPress后台的数据库ID不是同一个。

2. 在组件中使用父页面数据
   在页面模板里判断parentPage是否存在，再渲染对应的内容：

   export default function PageTemplate({ data }) {
     const currentPage = data.wpPage;
     const parentPage = data.parentPage;
   
     return (
       <div className="page-content">
         <h1>{currentPage.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
   
         {parentPage && (
           <div className="parent-page-info">
             <h3>所属父页面</h3>
             <a href={parentPage.uri}>{parentPage.title}</a>
             {/* 渲染更多父页面属性 */}
           </div>
         )}
       </div>
     );
   }
   

方案2：直接关联WordPress页面的parent字段（更简洁） #

如果你的gatsby-source-wordpress插件配置正确，可以直接在GraphQL查询中嵌套parent字段，无需手动传递parentId：

1. 确保数据源拉取parent字段
   在gatsby-config.js的插件配置中，确保Page类型包含parent字段（默认配置通常已包含，若未生效可显式指定）：

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-source-wordpress`,
         options: {
           url: `https://your-wordpress-site/graphql`,
           // 可选：显式指定Page类型包含parent字段
           type: {
             Page: {
               fields: {
                 parent: {},
               },
             },
           },
         },
       },
     ],
   };
   

2. 简化页面查询
   直接在当前页面的查询中嵌套parent字段：

   query($id: String!) {
     wpPage(id: {eq: $id}) {
       id
       title
       uri
       content
       parent {
         id
         title
         uri
         # 按需添加父页面属性
       }
     }
   }
   

3. 组件中使用parent数据
   直接通过currentPage.parent访问父页面数据：

   export default function PageTemplate({ data }) {
     const currentPage = data.wpPage;
   
     return (
       <div className="page-content">
         <h1>{currentPage.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
   
         {currentPage.parent && (
           <div className="parent-page-info">
             <h3>所属父页面</h3>
             <a href={currentPage.parent.uri}>{currentPage.parent.title}</a>
           </div>
         )}
       </div>
     );
   }
   

两种方案里，方案2更符合GraphQL的关联查询特性，也省去了手动传递parentId的步骤，推荐优先尝试。

内容的提问来源于stack exchange，提问作者KnapLelijk