本文介绍如何在Apollo GraphQL中实现文件的传输
文件传输在GrapqhQL中官方建议
文章Apollo Server File Upload Best Practices提及了实现文件上传的几种方式，分别是：
- Signed URLs
- Using an image upload service
- Multipart Upload Requests
本文介绍我所尝试过的第一种和第三种。
用grapqhl-upload的方式
graphql-upload是一个第三方的库，可以用来传输多个文件，也是实现文件传输的最简单方式。
在《Principled GraphQL》中，Apollo创始人们对Data Graph原则的指南中建议我们“将GraphQL层与服务层分离”。通常情况下，在生产客户端-服务器架构中，客户端不直接与后端服务进行通信。通常，我们使用一个额外的层来“将负载平衡、缓存、服务定位或API密钥管理等关注点委派给单独的层”。
对于新的业余项目（不太重要或概念验证），通常情况下，面向客户端的GraphQL服务也是执行业务逻辑、直接与数据库交互（可能通过ORM）并返回解析器所需数据的后端服务。虽然我们不建议在生产环境中使用这种架构，但这是开始学习Apollo生态系统的一种不错的方式。
注意：除非明确使用csrfPrevention: true配置Apollo Server，否则此方法容易受到CSRF变异攻击的影响。
下面给出示例：
首先安装graphql-upload:
npm install graphql-upload
在定义graph schema时，添加Upload类型：
scalar Upload
Javascript code:
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const {
GraphQLUpload,
graphqlUploadExpress, // A Koa implementation is also exported.
} = require('graphql-upload');
const { finished } = require('stream/promises');
const { ApolloServerPluginLandingPageLocalDefault } = require('apollo-server-core');
const typeDefs = gql`
# The implementation for this scalar is provided by the
# 'GraphQLUpload' export from the 'graphql-upload' package
# in the resolver map below.
scalar Upload
type File {
filename: String!
mimetype: String!
encoding: String!
}
type Query {
# This is only here to satisfy the requirement that at least one
# field be present within the 'Query' type. This example does not
# demonstrate how to fetch uploads back.
otherFields: Boolean!
}
type Mutation {
# Multiple uploads are supported. See graphql-upload docs for details.
singleUpload(file: Upload!): File!
}
`;
const resolvers = {
// This maps the `Upload` scalar to the implementation provided
// by the `graphql-upload` package.
Upload: GraphQLUpload,
Mutation: {
singleUpload: async (parent, { file }) => {
const { createReadStream, filename, mimetype, encoding } = await file;
// Invoking the `createReadStream` will return a Readable Stream.
// See https://nodejs.org/api/stream.html#stream_readable_streams
const stream = createReadStream();
// This is purely for demonstration purposes and will overwrite the
// local-file-output.txt in the current working directory on EACH upload.
const out = require('fs').createWriteStream('local-file-output.txt');
stream.pipe(out);
await finished(out);
return { filename, mimetype, encoding };
},
},
};
async function startServer() {
const server = new ApolloServer({
typeDefs,
resolvers,
// Using graphql-upload without CSRF prevention is very insecure.
csrfPrevention: true,
cache: 'bounded',
plugins: [ApolloServerPluginLandingPageLocalDefault({ embed: true })],
});
await server.start();
const app = express();
// This middleware should be added before calling `applyMiddleware`.
app.use(graphqlUploadExpress());
server.applyMiddleware({ app });
await new Promise<void>((r) => app.listen({ port: 4000 }, r));
console.log(`? Server ready at http://localhost:4000${server.graphqlPath}`);
}
startServer();
用Signed URL的方式
首先介绍下Signed URL:
Signed URL是一种带有数字签名的URL。数字签名是由服务器生成的加密哈希值，用于验证URL的完整性和认证请求的来源。
Signed URL通常用于授权访问受限资源。通过生成签名URL，服务器可以控制谁可以访问特定的资源以及在多长时间内有效。签名URL通常包含参数，如过期时间、访问权限和其他验证信息。客户端通过使用签名URL来访问受保护的资源，服务器会验证签名的有效性以确定是否允许访问。
Signed URL在多种场景下都有应用，如：
文件下载：服务器可以生成带有签名的URL，允许用户在一段时间内下载文件。过期后，URL将不再有效。
私有内容共享：服务器可以生成签名URL，用于向特定用户授权访问私有内容，例如共享照片或视频。
安全传输：签名URL可以用于验证请求的来源，防止请求被篡改或伪造。
本文使用AWS S3作为云储存的媒介，下面介绍使用方法
AWS S3
首先在AWS S3中注册一个账号，然后在打开AWS Management Console, 找到Buckets, 创建一个Bucket：
然后在Permission中设置CORS
之后，在Bucket属性中，enable key，获取ACCESS_KEY和SECRET_ACCESS_KEY,参考：https://docs.aws.amazon.com/AmazonS3/latest/userguide/configuring-bucket-key.html
前端:
首先安装AWS相关API：
npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
上传文件，并生成Get的Presigned URL:
public async uploadTextFile(file: File): Promise<string> {
const text = await file.text();
const putCommand = new PutObjectCommand({
Bucket: BUCKET_NAME,
Key: file.name,
Body: text,
});
const downloadCommand = new GetObjectCommand({
Bucket: BUCKET_NAME,
Key: file.name,
});
await this.s3Client.send(putCommand);
return await getSignedUrl(this.s3Client, downloadCommand, {expiresIn: 3600});
}
后端：
不需要安装Aws api，获取URL后直接下载即可：
private async downloadFileFromS3PresignedUrl(url: string): Promise<string> {
try {
const response = await axios.get(url, {responseType: "document"});
const regex = /^\/([^?]+)/;
const match = response.request.path.match(regex);
if (match && match[1]) {
const filePath = `${process.cwd()}/.temp/${match[1]}`;
return response.data
} else {
return Promise.reject('File path extract error');
}
} catch (e) {
this.logger.error("error in axios call:", e);
}
}