从React应用中使用GraphQL上传文件。

Z时代
2024-01-10
分类：技术分享

React前端的文件上传可以通过Apollo Upload Client来实现。

GraphQL使我们开发者能够在前端应用和REST API之间实现一个强大而灵活的抽象层。作为一个3个月前才接触到GraphQL的实习生，我阅读了许多文章、博客文章和GraphQL社区成员准备的指南，了解如何构建GraphQL服务并将其连接到React应用。但这些资源都没有提到使用GraphQL可以上传文件。

Image for post

文件上传也可以这样说吗？也许...

当我受命管理和构建一个新的功能，包括使用GraphQL实现文件上传时，我意识到虽然这个功能包含在Apollo Server 2.0中，但大多数关于这个功能的资源都被布置在不同的资源库中，而且指南也遗漏了重要的步骤。

我从阅读官方博客文章开始研究这个功能，并虔诚地按照它的步骤进行研究，但不幸的是，这是我进入神秘错误之海的入口，只因为博客文章不完整。我花了近一周的时间，在github仓库中跳转GraphQL文件上传功能，以找出我的代码有什么问题。

因此，我决定收集这篇指南，展示通过使用GraphQL突变实现基本的文件上传功能GraphQL服务器和React客户端的必要步骤。另外，谈谈我对GraphQL这个功能的经验，以及为什么作为一个公司我们决定选择不同的方法。

在下面的部分中，本指南将带您通过必要的步骤来创建一个GraphQL服务器，该服务器可以处理从React应用程序与Apollo Client发送的文件上传突变。GraphQL服务器要有2种不同的功能；将文件保存到文件系统中和将其流进S3 bucket中。

Basic Architecture

Image for post

所有部件的示意图，更多细节请查看[github repository]（https://github.com/epalaz/gra...）。

在本指南中，我们的系统将由以下部分组成。
1.带有Apollo客户端包的React应用。
2.使用Apollo服务器包的GraphQL服务器。

我们的GraphQL服务器将有能力将上传的文件保存到文件系统中，并将接收到的数据流流进AWS上的S3 Bucket。为此，我们将有2个查询：singleUpload和singleUploadStream。

Step 1: Preparing GraphQL Server

Setup

要使用apollo-server库创建一个GraphQL服务器，最简单的方法是按照它的官方指南，但我还是会在这里列出所需步骤。
首先创建一个目录并安装包。

$ mkdir your_dir_name $ cd your_dir_name $ yarn init --yes $ yarn add apollo-server graphql graphql-upload $ yarn add aws-sdk

这组命令应该安装包和创建。下一步就是开始定义出类型定义和解析器。

类型定义和突变解析器

突变的类型定义和填充物查询

我们定义了2种不同的突变。singleUpload突变用于上传文件并将其保存到文件系统的一个目录中，而singleUploadStream则用于流式传输到S3 bucket。这些突变采用Upload标量类型，在Apollo Server 2.0中是默认的，所以它的解析是由apollo服务器自己完成的。Apollo服务器将多部分请求形式映射到这个Upload标量，并为文件生成一个承诺。这两个突变都会返回文件类型，该类型由文件名、mimetype和编码字段组成，虽然这并不符合现实生活中的日程安排，但返回文件的正确字段表示文件正确上传至GraphQL服务器。

SingleUpload和singleUploadStream突变的解析器

在这些文件上传解析器中，一个关键的细节是文件参数返回的承诺。为了能够读取文件流，我们应该等待承诺被解析。在这个例子中，两个突变解析器使用了不同的方法。singleUpload通过使用then()返回承诺，并将解析后的流保存到文件系统中。另一方面，singleUploadStream使用await等待承诺解析，通过使用文件流将文件上传到S3。这些解析器的另一个区别是，在解析器函数里面使用await需要将其定义为async，而singleUpload解析器可以保持同步。

注：旧的例子可以显示文件具有filed stream，而不是createReadStream函数。最新的变更请查看graphql-upload repository。变化的PR](https://github.com/jaydenseri...。

配置服务器和AWS SDK。

这个server.js文件包含了在localhost的4000端口上启动Apollo服务器并配置AWS JavaScript SDK的代码。(更多细节请参考文档)。使用类型定义和突变解析器创建ApolloServer实例应该足以处理文件上传，以便保存在文件系统中并上传到S3。如果你需要进一步帮助在AWS上创建S3 Buckets，请参考这个链接。

    const { ApolloServer, gql } = require('apollo-server');
const fs = require('fs')
const typeDefs = gql`
type File {
filename: String!
mimetype: String!
encoding: String!
}
type Query {
_ : Boolean
}
type Mutation {
singleUpload(file: Upload): File!,
}
`;
const resolvers = {
Mutation: {
singleUpload: (parent, args) => {
return args.file.then(file => {
const {createReadStream, filename, mimetype} = file
const fileStream = createReadStream()
fileStream.pipe(fs.createWriteStream(`./${filename}`))
return file;
});
},
},
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`\`🚀  Server ready at ${url}`);
});});

您可以通过键入以下内容测试GraphQL服务器

$ cd your_project_dir $ node server.js

到你的控制台。这应该启动服务器的端口4000的localhost。在这之后键入localhost:4000到你的浏览器，你应该能够看到Playground页面上，你可以发送查询和突变到服务器进行测试，也可以看到自动生成的文件的基础上。

Image for post

Apollo Server游乐场截图显示定义的突变和查询。

现在，你可以验证你的突变和查询是否被服务器识别，你已经准备好从你的React应用中向服务器发送graphql请求。

尽管graphiql本身的ide不支持，但是可以使用altair测试上传文件和查看结果。

Step 2: Creating the React Application

为了轻松地创建我们的react应用和它的模板代码，我们将使用户create-react-app工具由Facebook开发。

$ yarn create react-app your-app-name。
$ yarn add apollo-client apollo-upload-client react-apollo graphql-tag

这条命令应该创建一个给定名称的react应用目录，并自动生成模板代码，开始开发我们的应用。你可以通过输入以下命令来测试这个命令是否成功

$ 纱线开始

这时应该在localhost:3000端口上启动开发服务器，并进行实时更新。

由create-react-app创建的应用示例。

如果你能看到这个屏幕，说明你的项目已经设置成功，你可以开始编辑这个模板来上传你的文件。

配置Apollo客户端并为突变准备Schemas。

        import React from 'react';
import logo from './logo.svg';
import './App.css';
import { InMemoryCache } from 'apollo-cache-inmemory'
import { createUploadLink } from 'apollo-upload-client'
import {ApolloClient} from "apollo-client"
import {ApolloProvider, Mutation} from "react-apollo"
import gql from "graphql-tag"
const apolloCache = new InMemoryCache()
const uploadLink = createUploadLink({
uri: 'http://localhost:4000', // Apollo Server is served from port 4000
headers: {
"keep-alive": "true"
}
})
const client = new ApolloClient({
cache: apolloCache,
link: uploadLink
})
const UPLOAD_FILE = gql`
mutation SingleUpload($file: Upload) {
singleUpload(file: $file) {
filename
mimetype
encoding
}
}
`;
function App() {
return (
<div className="App">
<ApolloProvider client={client}>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Save Local</h2>
<Mutation mutation={UPLOAD_FILE}>
{(singleUpload, { data, loading }) => {
console.log(data)
return (<form onSubmit={() => {console.log("Submitted")}} encType={'multipart/form-data'}>
<input name={'document'} type={'file'} onChange={({target: { files }}) => {
const file = files[0]
file && singleUpload({ variables: { file: file } })
}}/>{loading && <p>Loading.....</p>}</form>)}
}
</Mutation>
</header>
</ApolloProvider>
</div>
);
}
export default App;

这段代码创建了一个基本的UI，有1个表单，一个是singleUpload，在这个例子中，onChange事件被用来启动文件上传突变函数，但你也可以选择用你所选择的事件来启动它。做文件上传onChange可以让你在文件被选中后立即上传。另一个细节是将表单元素的encType为multipart/form-data。查看这个链接来阅读关于GraphQL多部分请求规范的更多细节。在设置了这些组件的渲染函数后，你的UI应该看起来有点类似于这样。