PayloadCMS GraphQL查询返回错误URL问题求助

问题详情 #

• 使用PayloadCMS，数据库为MongoDB
• 某文档存储的字段：

  filename: "some_file.wav",
  url: "http://localhost:3000/pieces-files/some_file.webm"
  

• 执行以下GraphQL查询时，返回的url字段错误：

  query Piece($slug: String, $draft: Boolean) {
    Pieces(where: { slug: { equals: $slug }}, limit: 1, draft: $draft) {
      docs {
        id
        title
        filename
        url
        mimeType
        filesize
        composer
        album
        year
        label
        format
        description
        categories {
          title
        }
        createdAt
        user {
          id
          name
        }
      }
    }
  }
  

  返回结果中url为：http://localhost:3000/pieces-files/some_file.wav
• 补充测试：当修改查询条件为按url搜索时，只有传入带.webm后缀的地址能找到文档，传入.wav后缀的地址无法匹配。

原因分析 #

这是PayloadCMS内置的文件字段处理逻辑导致的：

1. 若你在文件上传配置中开启了自动格式转换（比如将上传的WAV转码为WEBM），Payload会保留原始上传文件的filename（带原后缀），但实际存储的url是转换后的文件地址。
2. GraphQL查询时，Payload的默认url字段resolver会自动用filename的后缀替换存储的url后缀，导致返回的url和数据库中实际存储的不一致。
3. 而按url查询时，是直接匹配数据库中存储的原始值，所以只有.webm后缀的地址能命中。

解决方案 #

1. 检查并调整文件转换配置：
   打开集合配置文件（如collections/Pieces.js），找到upload字段的transforms配置。如果不需要格式转换，可以直接禁用；如果需要保留转码，确保转换后的文件名后缀与存储的url一致。
   示例配置片段：

   upload: {
     staticURL: '/pieces-files',
     staticDir: 'pieces-files',
     transforms: [
       // 若存在转码配置，检查是否设置了正确的输出文件名
       {
         name: 'webm',
         transform: async ({ file, args }) => {
           // 确保转码后的文件名后缀为.webm，且更新filename字段或让resolver使用存储的url
         }
       }
     ]
   }
   

2. 自定义GraphQL Resolver覆盖url字段：
   在集合配置中添加自定义resolver，让url字段直接返回数据库中存储的原始值：

   import { CollectionConfig } from 'payload/types';
   
   const Pieces: CollectionConfig = {
     slug: 'pieces',
     fields: [
       // 其他字段...
       {
         name: 'url',
         type: 'text',
         admin: {
           disabled: true, // 若不需要在后台编辑
         },
         graphQL: {
           resolver: async ({ data }) => {
             return data.url; // 直接返回数据库存储的url
           }
         }
       }
     ]
   };
   
   export default Pieces;
   

3. 修改文件上传后的文件名处理：
   在文件上传的beforeChange钩子中，手动将filename设置为转换后的文件名（带.webm后缀），确保filename和url的后缀一致：

   hooks: {
     beforeChange: [
       async ({ data }) => {
         if (data.url) {
           // 从url中提取文件名，替换filename字段
           const urlParts = data.url.split('/');
           data.filename = urlParts[urlParts.length - 1];
         }
         return data;
       }
     ]
   }
   

内容的提问来源于stack exchange，提问作者Roberto Becerra