构建无头WordPress+Gatsby站点：获取页面数据函数报错问题

1. 先修复当前代码错误 #

你遇到的no-unused-expressions错误，是因为箭头函数内部的模板字符串没有被返回——箭头函数如果用大括号包裹代码块，必须显式写return语句。另外，字符串拼接可以用模板字符串的插值语法简化，不用手动+拼接。修复后的代码如下：

const GetPage = {
  graphql: ({ id }) => {
    return `query GetPage {
        pages(where: {id: ${id}}) {
          edges {
            node {
              title
              content
              featuredImage {
                node {
                  uri
                }
              }
            }
          }
        }
    }`
  }
}

或者省略大括号，让箭头函数自动返回表达式：

const GetPage = {
  graphql: ({ id }) => `query GetPage {
        pages(where: {id: ${id}}) {
          edges {
            node {
              title
              content
              featuredImage {
                node {
                  uri
                }
              }
            }
          }
        }
    }`
}

2. 你的实现思路可以优化，并非最优方案 #

在Gatsby+无头WordPress的架构中，通常不会单独封装这样的查询字符串生成函数，而是结合Gatsby的查询机制来处理：

场景一：静态页面查询（固定id的页面） #

如果是固定id的页面，直接在页面组件中使用pageQuery或者useStaticQuery，Gatsby会在构建时自动执行查询并注入数据：

// 页面组件中
import { graphql } from "gatsby"

export const query = graphql`
  query GetPage {
    pages(where: {id: 1}) {
      edges {
        node {
          title
          content
          featuredImage {
            node {
              uri
            }
          }
        }
      }
    }
  }
`

const PageComponent = ({ data }) => {
  const page = data.pages.edges[0].node
  return (
    <div>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  )
}

export default PageComponent

场景二：动态生成页面（根据不同id生成多个页面） #

如果需要根据WordPress中的多个页面动态生成Gatsby页面，应该在gatsby-node.js中使用createPage API，结合查询获取所有页面的id，再为每个页面生成路由：

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // 查询所有WordPress页面
  const result = await graphql(`
    query AllPages {
      pages {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)

  // 为每个页面生成路由
  result.data.pages.edges.forEach(({ node }) => {
    createPage({
      path: `/page/${node.slug}`,
      component: require.resolve("./src/templates/page-template.js"),
      context: {
        id: node.id,
      },
    })
  })
}

然后在页面模板page-template.js中，通过pageQuery接收context中的id参数：

// src/templates/page-template.js
import { graphql } from "gatsby"

export const query = graphql`
  query GetPageById($id: String!) {
    pages(where: {id: $id}) {
      edges {
        node {
          title
          content
          featuredImage {
            node {
              uri
            }
          }
        }
      }
    }
  }
`

const PageTemplate = ({ data }) => {
  const page = data.pages.edges[0].node
  return (
    <div>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </div>
  )
}

export default PageTemplate

这种方式更贴合Gatsby的构建流程，能充分利用Gatsby的静态生成优势，比单独封装查询字符串函数更高效、更符合框架规范。

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