GraphQL 检索特定块的数据 - Gatsby + Wordpress

Question

我有一个 React + Gatsby JS 项目，该项目通过其无头 API 从 Wordpress 站点检索数据。我是盖茨比的新手。

我网站上的每个页面都由块组成，而块又由字段组成。我正在使用 ACF 来构建这些。

我目前能够使用以下 GraphQL 查询检索每个页面和该页面中的块列表：

 query ($id: String!) {
        currentPage: wordpressPage(id: {eq: $id}) {
            title
            acf {
                page_blocks {
                 block_type {
                     acf_fc_layout
                 }
                }
            }
        }
    }

这将返回 ID 为 f4c4f4a7-ba0d-55b1-8877-16f543c22b80 的页面的以下数据

{
  "data": {
    "wordpressPage": {
      "id": "f4c4f4a7-ba0d-55b1-8877-16f543c22b80",
      "acf": {
        "page_blocks": [
          {
            "block_type": [
              {
                "acf_fc_layout": "page_title_and_text"
              },
              {
                "acf_fc_layout": "two_column_media_and_text"
              }
            ]
          }
        ]
      }
    }
  }
}

这些块在afc_fc_layout 旁边。 page_title_and_text 和 two_column_media_and_text 都是该页面中的页面块。

现在，我认为下一步是为每个块制作一个 React 组件，将每个块的自定义字段数据传递给该组件。如果页面没有块，那么我就不需要检索该块的字段，对吗？

最初我以为我会从我的 React 组件运行另一个查询，请求该特定块的字段。但是我意识到我不能真正将变量（页面 ID）添加到我的组件中的静态查询中，每个 Gatsby docs，所以我将无法查询该特定页面的字段。如果我错了，请纠正我。

我相信我必须从我在这里向您展示的主要查询中检索我需要的那些字段，但是当并非所有页面都将要查询时，必须查询网站上每个可能的自定义字段似乎绝对是疯狂的有相同的块。

理想情况下会有某种语法，例如

...
acf {
    page_blocks {
        block_type {
            acf_fc_layout
            if (acf_fc_layout eq page_title_and_text) {
                title 
                text
            }

            if (acf_fc_layout eq two_column_media_and_text) {
                media
                text
            }
        }
    }
}
...

然后我会将这些字段传递给它们对应的 React 组件。

解决这个问题的正确方法是什么？

注意：我目前能够从 API 检索字段以呈现块。我更想知道我的 graphQL 查询是否可以为我过滤掉数据，或者是否有一种方法可以自定义 WP 端点以向我显示由页面上实际存在的块过滤的字段数据。

例如：站点在块 4、3、2、10、12、15.... 中查询数据，即使页面只有块 2。

我担心将来想要添加块的开发人员每次都必须重写查询，从而损害网站的可扩展性和潜在性能。

Answer 1

您说您是 Gatsby 的初学者，但您正在尝试做的事情涉及 Gatsby 内部的许多高级主题。我的回答很可能是不完整的，你需要自己弄清楚很多事情。

准备好阅读大量文档并进行大量调试，以便与 Gatsby 一起工作。

---

您想要programmatically create pages，具体取决于您的 GraphQL 查询结果。这意味着您需要创建一个页面范围的页面模板组件。

在 Gatsby 项目的 templates 文件夹中，您创建一个模板，该模板以编程方式为您的每条路线选择正确的组件。要获取您的 ACF 数据，您可以使用 GraphQL page queries。

解决这个问题的正确方法是什么？

另一种选择是：创建通过 props 检索数据的 React 组件。您无需为这些组件中的每一个提供自己的 GraphQL 查询，因为您已经在页面模板中进行了查询。

acf: acf_fc_layout eq page_title_and_text -> React 组件PageTitleAndText.jsx

const PageTitleAndText = ({ title, text}) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{text}</p>
    </div>
  );
};

// NO GraphQL query

export default PageTitleAndText;

相反，您将页面模板中的道具传递给您的组件：

acfPageTemplate.jsx

const acfPageTemplate = (props) => {

  return (
    <div>
      {/* pass props as data from the GraphQL query result here */}
        <PageTitleAndText title={props.data.currentPage.acf.page_blocks.block_type.acf_fc_layout.title  } 
                          text ={props.data.currentPage.acf.page_blocks.block_type.acf_fc_layout.text} />

    </div>
  );
};
export const query = graphql`
 query ($id: String!) {
        currentPage: wordpressPage(id: {eq: $id}) {
            title
            acf {
                page_blocks {
                 block_type {
                     acf_fc_layout
                 }
                }
            }
        }
    }
`;

export default acfPageTemplate;

为每个 acf 布局定义一个页面模板。为每个布局选择正确的组件，并将 props 作为 GraphQL 查询结果中的数据传递。

您需要将变量传递给您的页面查询。这样做的唯一方法是使用question 中描述的页面上下文：

gatsby-node.js

createPage({
  path: `/my-acf-page-title-and-text-page/`,
  component: path.resolve(`./src/templates/PageTitleAndText.jsx`),
  // The context is passed as props to the component as well
  // as into the component's GraphQL query.
  context: {
   id: acfFieldId, // pass the acf field id
 },
})

// define a createPage action for each of your acf layouts

---

但我意识到，根据 Gatsby 文档，我无法真正将变量（页面 ID）添加到组件内的静态查询中，因此我无法查询该特定页面的字段。如果我错了，请纠正我。

正确。这就是为什么你需要在gatsby-node.js中使用页面查询、页面模板和页面上下文变量的原因

如果页面没有块，那么我就不需要检索该块的字段，对吧？

是的。这就是您为每个 acf 布局创建不同页面模板的原因。您可以为所有布局创建一个大模板，但是您需要以编程方式决定要添加哪些组件。这超出了这个问题的范围。如果你想这样做，你应该问一个新问题。

如果您决定这样做，我的建议是，在您进入下一个兔子洞之前，让它与一个特定的布局一起工作。