如何在Ruby on Rails的GraphQL中返回ActiveStorage图片变体？

问题场景 #

基于Ruby on Rails 7 + graphql-rails开发GraphQL接口，需要返回Post模型中ActiveStorage图片的多个变体URL。期望查询结构如下：

query {
    posts(limit: 1) {
        id
        caption
        image {
            web
            thumb
        }
    }
}

需要得到包含各变体URL的响应，但当前实现触发错误：

Failed to implement Variant.web, tried:
     
  - `Types::VariantType#web`, which did not exist
  - `ActiveStorage::Attached::One#web`, which did not exist
  - Looking up hash key `:web` or `"web"` on `<ActiveStorage::Attached::One:0x000000012511c5f8>`, but it wasn't a Hash
     
To implement this field, define one of the methods above (and check for typos)

错误根源 #

1. 方法定义位置错误：VariantType的字段实现方法（如web、url_for）被定义在了类外部，而非VariantType类的内部，导致GraphQL无法识别这些方法。
2. 字段类型未关联：PostType中的image字段未明确指定类型为VariantType，GraphQL默认尝试从ActiveStorage::Attached::One对象读取字段，自然找不到对应方法。

修复步骤 #

1. 修正VariantType的代码结构 #

将所有字段实现方法移入VariantType类内部，同时调整对象调用逻辑并增加异常防护：

module Types
  class VariantType < Types::BaseObject
    field :web, String, null: true
    field :opengraph, String, null: true
    field :twitter, String, null: true
    field :mobile, String, null: true
    field :thumb, String, null: true

    def web
      url_for(:web)
    end

    def opengraph
      url_for(:opengraph)
    end

    def twitter
      url_for(:twitter)
    end

    def mobile
      url_for(:mobile)
    end

    def thumb
      url_for(:thumb)
    end

    private

    def url_for(variant) # rubocop:disable Metrics/MethodLength
      return nil unless object.attached?

      img = object.variant(variant)

      # 处理CDN_HOST前缀
      cdn_host = ENV.fetch('CDN_HOST', nil)
      cdn_host = "https://#{cdn_host}" unless cdn_host.nil? || cdn_host.start_with?('http')
      
      if cdn_host.nil?
        blob_type = if img.is_a?(ActiveStorage::Variant) || img.is_a?(ActiveStorage::VariantWithRecord)
                      :rails_representation
                    else
                      :rails_blob
                    end

        Rails.application.routes.url_helpers.route_for(blob_type, img, only_path: true)
      else
        File.join(cdn_host, img.key)
      end
    end
  end
end

• 调整object.image.variant(variant)为object.variant(variant)：此时object是ActiveStorage::Attached::One实例，直接调用variant方法即可。
• 增加object.attached?判断：避免图片未上传时触发错误，同时将字段的null改为true（可根据业务需求调整）。

2. 在PostType中关联VariantType #

确保PostType的image字段类型指定为VariantType：

module Types
  class PostType < Types::BaseObject
    field :id, ID, null: false
    field :caption, String, null: true
    field :image, Types::VariantType, null: true
    # 其他业务字段...
  end
end

验证结果 #

重新发起查询后，将得到预期的响应：

{
    "data": {
        "posts": [
            {
                "id": "8d59b87c-c33b-4c29-b18f-a4d6aa2abf45",
                "caption": "Nam ad incidunt. Nisi sequi quibusdam. Nihil quis veritatis. Beatae consequatur excepturi. Et at sapiente. Delectus deleniti unde. Id a quo. Qui aut quod. Est qui quo. Dolores beatae facilis. Sed error vero. Est est at. Alias aut sit. Consequuntur consequ.",
                "image": {
                    "web": "some-url-here",
                    "thumb": "another-url-here"
                }
            }
        ]
    }
}

内容的提问来源于stack exchange，提问作者Rafael Fonseca