如何使用apollo-upload-client与graphql-yoga 3.x实现文件上传

方案一：修改客户端查询的标量类型名称 #

apollo-upload-client默认使用Upload标量，你可以直接在GraphQL查询/变更中替换为Yoga支持的File标量，无需修改客户端库本身：

1. 调整GraphQL操作语句，将Upload替换为File：

# 修改后适配Yoga的版本
mutation UploadFile($file: File!) {
  uploadFile(file: $file)
}

2. 如果使用TypeScript，同步调整类型定义中的标量类型，将Upload替换为File。

这种方法最简单，无需改动服务器端代码，直接让客户端适配Yoga的规范。

方案二：在Yoga服务器端添加Upload标量支持 #

如果你不想修改客户端代码，可以在Yoga服务器端声明Upload标量，并让它与内置的File标量等价：

1. 在schema的类型定义中添加Upload标量声明，并复用File的解析逻辑：

import { createYoga, createSchema } from 'graphql-yoga'

const schema = createSchema({
  typeDefs: /* GraphQL */ `
    scalar Upload
    scalar File

    type Mutation {
      uploadFile(file: Upload!): Boolean
    }
  `,
  resolvers: {
    // 让Upload标量复用File标量的解析逻辑
    Upload: {
      parseValue: (value) => value,
      parseLiteral: (ast) => ast,
      serialize: (value) => value
    },
    Mutation: {
      uploadFile: async (_parent, { file }) => {
        // 这里的file对象结构与使用File标量时完全一致
        const { createReadStream, filename, mimetype, encoding } = await file
        // 执行你的文件处理逻辑
        return true
      }
    }
  }
})

const yoga = createYoga({ schema })

2. 启动服务器后，apollo-upload-client发送的Upload类型请求就能被Yoga正确解析——两者都遵循GraphQL Multipart Request规范，仅标量名称不同，映射后处理逻辑完全兼容。

内容的提问来源于stack exchange，提问作者Martin Cup