在 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 编码,但这就是我所做的并且对我来说效果很好:
我使用“WordPress 博客”启动器创建了一个 Gatsby 站点:https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
然后在我的 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
然后我创建了一个名为“Pages GEO”的 ACF 字段组:
在 GraphQL 元框 中,我将“在 GraphQL 中显示”设置为“是”,然后我将“GraphQL 字段名称”设置为pagesGeo
(这是你使用的,对吧?)
然后我创建了一个 Post 对象字段 命名为“通用页面”(generic_page
)然后我设置“在 GraphQL 中显示”到“是”
当然,我 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
在我的主题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 );
}
] );
});
然后在 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
结果是:
- 如您所见,对于每个 node/post(在
data.allWpPage.nodes
中),根 genericPage
匹配 pagesGeo.genericPage.databaseId
。
补充说明
我使用了 gatsby develop
命令(如果我没记错的话)重建缓存,但如果需要,可以手动清除缓存 — 参见 https://www.gatsbyjs.com/docs/build-caching/#clearing-cache.
这是
经过一些调试,我收集到了,如果我错了请纠正我,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 编码,但这就是我所做的并且对我来说效果很好:
我使用“WordPress 博客”启动器创建了一个 Gatsby 站点:https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
然后在我的 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
然后我创建了一个名为“Pages GEO”的 ACF 字段组:
在 GraphQL 元框 中,我将“在 GraphQL 中显示”设置为“是”,然后我将“GraphQL 字段名称”设置为
pagesGeo
(这是你使用的,对吧?)然后我创建了一个 Post 对象字段 命名为“通用页面”(
generic_page
)然后我设置“在 GraphQL 中显示”到“是”
当然,我 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
在我的主题
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 ); } ] ); });
然后在 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
结果是:
- 如您所见,对于每个 node/post(在
data.allWpPage.nodes
中),根genericPage
匹配pagesGeo.genericPage.databaseId
。
- 如您所见,对于每个 node/post(在
补充说明
我使用了 gatsby develop
命令(如果我没记错的话)重建缓存,但如果需要,可以手动清除缓存 — 参见 https://www.gatsbyjs.com/docs/build-caching/#clearing-cache.