在 Gatsby 和 GraphQL 的 wordpress 中过滤 ACF Post 对象字段

Filtering on an ACF Post Object-field in wordpress in Gatsby and GraphQL

这是

的跟进问题

经过一些调试,我收集到了,如果我错了请纠正我,Gatsby on build 下载整个数据结构并缓存它。所以所有的 GraphQL 查询都是针对缓存执行的。这使得我尝试对 wordpress 进行的所有调整(例如 https://www.wpgraphql.com/2020/04/14/query-posts-based-on-advanced-custom-field-values-by-registering-a-custom-where-argument/)都没有用。我仅限于在 Gatsby 中为我的 GraphQL 查询使用过滤器参数。

考虑以下查询:

query Test {
  allWpPage(filter: {pagesGeo: {}}) {
    edges {
      node {
        pagesGeo {
          genericPage {
            ... on WpPage {
              id
            }
          }
          hreflangValue
        }
      }
    }
  }
}

在这种情况下,我想在 genericPage 上进行过滤,但它不在 GraphiQL 查询测试器的可用过滤器列表中。

在 Wordpress 中,自定义字段 generic_page 是在高级自定义字段的帮助下定义的,其字段类型为 'Post Object'。如您所见,我可以很好地查询该字段,而且我可以很容易地在 Wordpress 中创建元查询以对该字段进行过滤。它看起来像:

$query_args['meta_query'] = [
    "relation" => "OR",
    [
        'key' => 'generic_page',
        'value' => $postObjectId,
        'compare' => '='
    ],
    [
        'key' => 'generic_page',
        'value' => $postObjectId2,
        'compare' => '='
    ],
];

有什么方法可以让我在 Gatsby 中过滤 genericPage 吗?

如果没有,是否有其他解决方案可以让我提取我需要的数据?

After a bit debugging I've gathered, and please correct me if I'm wrong, that Gatsby on build downloads the entire data structure and caches it. So all the GraphQL queries are performed against the cache.

是的,没错。

我不太了解 Gatsby 或 GraphQL 编码,但这就是我所做的并且对我来说效果很好:

  1. 我使用“WordPress 博客”启动器创建了一个 Gatsby 站点:https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

  2. 然后在我的 WordPress 站点上,我安装了这些插件:ACF(免费版,v5.10.2)、WP Gatsby v1.1.3、WP GraphQL v1.6.4、“WPGraphQL for Advanced Custom Fields” v0.5.3,和(仅用于测试)WPGraphQL 元查询 v0.1.0

  3. 然后我创建了一个名为“Pages GEO”的 ACF 字段组:

    • GraphQL 元框 中,我将“在 GraphQL 中显示”设置为“是”,然后我将“GraphQL 字段名称”设置为pagesGeo(这是你使用的,对吧?)

    • 然后我创建了一个 Post 对象字段 命名为“通用页面”(generic_page)然后我设置“在 GraphQL 中显示”到“是”

  4. 当然,我 created/edited 一些页面(即 post 输入 page),然后为这些页面选择一个“通用页面”。

关于这个:

In this case I want to filter on genericPage, but it's not in the list of available filters in the GraphiQL query tester.

我无法添加 filter.pagesGeo.genericPage,但我通过这样做设法按该字段(即 filter.genericPage)进行过滤:

我注册了我自己的 自定义 WP GraphQL 字段,命名为 genericPage

  1. 在我的主题functions.php中,我添加了:

    • 代码基于here
    add_action( 'graphql_register_types', function() {
        register_graphql_field( 'Page', 'genericPage', [
            'type'        => 'Integer',
            'description' => 'generic_page meta value',
            'resolve'     => function( \WPGraphQL\Model\Post $post ) {
                return (int) get_post_meta( $post->databaseId, 'generic_page', true );
            }
        ] );
    });
    
  2. 然后在 GraphiQL IDE(在 http://localhost:8000/__graphql)中,我 运行 这个查询:

    • 所以在上面的查询中,我通过 generic_page 元过滤了 posts,我在其中查询 posts 元值(即post ID,或 GraphQL 中的 databaseId)是 2 82.

    • 我使用了 in 比较器,但您可以使用适合您的查询的任何其他比较器。参见 https://www.gatsbyjs.com/docs/query-filters/#supported-comparators

  3. 结果是:

    • 如您所见,对于每个 node/post(在 data.allWpPage.nodes 中),根 genericPage 匹配 pagesGeo.genericPage.databaseId

补充说明

我使用了 gatsby develop 命令(如果我没记错的话)重建缓存,但如果需要,可以手动清除缓存 — 参见 https://www.gatsbyjs.com/docs/build-caching/#clearing-cache.