WPGraphQL 中实现图片画廊字段的自定义Mutation开发指南

在WordPress开发中，WPGraphQL插件为开发者提供了强大的GraphQL API功能。本文将详细介绍如何在WPGraphQL中为文章类型实现一个包含图片画廊字段的自定义Mutation操作。

需求分析

我们需要实现一个功能，允许通过GraphQL Mutation创建包含画廊图片URL列表的文章。画廊数据需要以数组形式存储，并能通过查询返回符合尺寸要求的高质量图片URL。

技术实现方案

1. 数据结构设计

画廊数据将存储在文章的_gallery自定义字段中，格式为图片URL数组。为了确保图片质量，我们设置最小宽度和高度为600px。

2. 自定义Mutation注册

正确的做法是使用register_graphql_mutation函数而非直接注册字段。这个函数允许我们完整定义Mutation的输入输出结构及执行逻辑。

register_graphql_mutation('createListing', [
    'inputFields' => [
        'title' => [
            'type' => 'String',
            'description' => '文章标题',
        ],
        'content' => [
            'type' => 'String',
            'description' => '文章内容',
        ],
        'gallery' => [
            'type' => ['list_of' => 'String'],
            'description' => '画廊图片URL数组',
        ],
    ],
    'outputFields' => [
        'listing' => [
            'type' => 'Listing',
            'description' => '创建的文章对象',
        ],
    ],
    'mutateAndGetPayload' => function($input) {
        // 创建文章逻辑
    },
]);

3. 画廊字段解析器

对于查询端，我们需要为Listing类型注册画廊字段的解析器：

register_graphql_field('Listing', 'gallery', [
    'type' => ['list_of' => 'String'],
    'description' => '画廊图片URL列表',
    'resolve' => function($post) {
        $gallery = (array) get_post_meta($post->ID, '_gallery', true);
        $image_urls = [];
        $min_width = 600;
        $min_height = 600;
        
        foreach ($gallery as $url) {
            // 这里可以添加图片尺寸验证逻辑
            $image_urls[] = $url;
        }
        
        return $image_urls;
    }
]);

4. 数据存储处理

在Mutation执行后，我们需要处理画廊数据的存储：

add_action('graphql_post_object_mutation_update_additional_data', function($post_id, $input) {
    if (isset($input['gallery']) && is_array($input['gallery'])) {
        $sanitized_gallery = array_map('esc_url_raw', $input['gallery']);
        update_post_meta($post_id, '_gallery', $sanitized_gallery);
    }
}, 10, 2);

安全考虑

1. 对输入的URL使用esc_url_raw进行净化，比sanitize_text_field更适合URL处理
2. 考虑添加图片URL验证逻辑，确保只接受可信来源
3. 对于生产环境，建议添加Mutation权限检查

性能优化建议

1. 可以实现图片URL的懒加载
2. 考虑添加分页参数控制返回的图片数量
3. 对于大型画廊，可以实现缓存机制

完整实现示例

以下是整合后的完整代码示例：

add_action('graphql_register_types', function() {
    // 注册创建文章的Mutation
    register_graphql_mutation('createListing', [
        'inputFields' => [
            'title' => ['type' => 'String'],
            'content' => ['type' => 'String'],
            'gallery' => ['type' => ['list_of' => 'String']],
        ],
        'outputFields' => [
            'listing' => ['type' => 'Listing'],
        ],
        'mutateAndGetPayload' => function($input) {
            $post_id = wp_insert_post([
                'post_title' => $input['title'],
                'post_content' => $input['content'],
                'post_status' => 'publish',
                'post_type' => 'listing',
            ]);
            
            return ['listing' => $post_id];
        },
    ]);
    
    // 注册画廊字段
    register_graphql_field('Listing', 'gallery', [
        'type' => ['list_of' => 'String'],
        'resolve' => function($post) {
            $gallery = (array) get_post_meta($post->ID, '_gallery', true);
            return array_values($gallery);
        }
    ]);
});

// 处理画廊数据存储
add_action('graphql_post_object_mutation_update_additional_data', function($post_id, $input) {
    if (isset($input['gallery'])) {
        update_post_meta($post_id, '_gallery', array_map('esc_url_raw', (array)$input['gallery']));
    }
}, 10, 2);

通过以上实现，开发者可以轻松地在WPGraphQL中集成画廊功能，既支持通过Mutation创建带画廊的文章，也能高效查询画廊数据。