GraphQL检索特定块的数据-盖茨比&x2B；Wordpress

我有一个React+Gatsby JS项目，通过他们的headless 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\U fc\U布局的旁边。
页面标题和文本以及
两列媒体和文本都是该页面中的页面块

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

起初，我想我会从我的React组件运行另一个查询，请求该特定块的字段。但我意识到我不能在组件中的静态查询中添加变量（页面Id），因此我无法查询特定页面的字段。如果我错了，请纠正我

我相信我必须从我在这里向大家展示的主查询中检索我需要的字段，但是，当不是所有页面都有相同的块时，必须查询站点上所有可能的自定义字段，这似乎是绝对疯狂的

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

...
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

我担心将来想要添加块的开发人员每次都必须重写查询，这会损害站点的可伸缩性和潜在性能
 你说你是《盖茨比》的初学者，但你所要做的事涉及到《盖茨比》中的许多高级话题。我的答案很可能不完整，你需要自己解决很多问题

准备大量的文档阅读和大量的调试，以便与盖茨比一起工作


您希望根据GraphQL查询的结果进行修改。这意味着您需要创建一个页面范围的页面模板组件

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

正确的方法是什么

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

acf:acf_fc_布局均衡页面_标题_和_文本->反应组件
PageTitleAndText.jsx

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

// NO GraphQL query

export default PageTitleAndText;

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布局定义页面模板。为每个布局选择正确的组件，并从GraphQL查询结果中将道具作为数据传递

您需要向页面查询传递变量。唯一的方法是使用页面上下文，如下所述：

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



但我意识到，根据盖茨比文档，我不能在组件内的静态查询中添加变量（页面Id），因此我无法查询特定页面的字段。如果我错了，请纠正我

对。这就是为什么需要在
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


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

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

我的建议是，如果你决定这样做，在下一个兔子洞之前，用一个特定的布局来完成这项工作。
谢谢你非常详尽的回答。我确实按照所有的指示做了。我正在使用Gatsby-node.js创建页面，使用页面模板查询API并检索我的所有字段，现在我陷入了在该页面模板中呈现块的步骤。我试图实现的站点在页面之间没有一致性。所有页面都有不同顺序的不同块，因此我无法为每个布局创建页面模板。因此，我的问题是，如何高效地检索块信息，而不必查询页面中不存在的块。例如，如果我的站点总共有45个块，每个块中都有一组自定义字段，那么每次加载页面模板时，我真的需要查询这45个块中的每个字段吗，或者我可以根据页面中实际包含的块进行查询。因此，如果一个页面有块1、5和6，查询会跳过其他块吗？或者我必须有一个可能长达几百行的查询吗？盖茨比在构建时“加载”模板一次。一旦建立了网站，无论查询有多么复杂或高效都无关紧要。在这里了解构建过程：首先按照我所描述的方式让模板只处理一个块。通过这种方式，您可以逐步接近解决方案。从那里你应该问一个新问题w